包含GridView和颤振中的ListView的ListView

我一直在寻找一种实现这种设计的方法，但我不确定最好的方法是什么，我想知道如何使用listview和gridview（可以在图标按下时更改为listview）来布局这些列表，谢谢

---

我认为，在底部列表中只使用gridview，然后将代理的

子视图向上更改（因为网格项显然不按显式高度排列）和
crossAxisCount
就可以了

导入“包装：颤振/材料.省道”；
类扩展StatefulWidget{
@凌驾
_TiresState createState（）=>\u TiresState（）；
}
类_TiresState扩展状态{
var _crossAxisCount=1；
var_childAspectRatio=2.0；
@凌驾
小部件构建（构建上下文）{
final mediaQuery=mediaQuery.of（上下文）；
最终标题样式=文本样式（fontWeight:fontWeight.bold）；
返回列表视图(
儿童：[
填充物(
填充：边缘组。对称（水平：16.0），
子项：文本（“热门报价”，样式：标题样式），
),
尺寸箱（高度：8），
容器(
高度：mediaQuery.size.height/4，
子项：ListView.separated(
收缩膜：对，
填充：边缘组。对称（水平：16.0），
滚动方向：轴水平，
物品计数：10，
分离器构建器：（u，uu）=>SizedBox（宽度：10），
itemBuilder:（，_）=>SizedBox(
宽度：mediaQuery.size.width/3，
子：Card（），
),
),
),
尺寸箱（高度：8），
填充物(
填充：边缘组。对称（水平：16.0），
孩子：排(
儿童：[
文本（“热门报价”，样式：标题样式），
垫片（），
图标按钮(
图标：图标（Icons.list），
按下时：（）=>设置状态（）{
_crossAxisCount=_crossAxisCount=1；
_childAspectRatio=_childAspectRatio=2.0；
}),
),
图标按钮(
图标：图标（图标。网格打开），
按下时：（）=>设置状态（）{
_crossAxisCount=_crossAxisCount=2；
_childAspectRatio=_childAspectRatio=1.0；
}),
),
],
),
),
尺寸箱（高度：8），
GridView.builder(
主要：错误，
收缩膜：对，
填充：边缘组。对称（水平：16.0），
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio:_childAspectRatio，
横轴间距：16，
平均间距：16，
crossAxisCount:\u crossAxisCount，
),
物品计数：15，
itemBuilder:（，_）=>Card（），
)
],
);
}
}

我认为，在底部列表中只使用gridview，然后将代理的
子视图向上更改（因为网格项显然不按显式高度排列）和
crossAxisCount
就可以了

导入“包装：颤振/材料.省道”；
类扩展StatefulWidget{
@凌驾
_TiresState createState（）=>\u TiresState（）；
}
类_TiresState扩展状态{
var _crossAxisCount=1；
var_childAspectRatio=2.0；
@凌驾
小部件构建（构建上下文）{
final mediaQuery=mediaQuery.of（上下文）；
最终标题样式=文本样式（fontWeight:fontWeight.bold）；
返回列表视图(
儿童：[
填充物(
填充：边缘组。对称（水平：16.0），
子项：文本（“热门报价”，样式：标题样式），
),
尺寸箱（高度：8），
容器(
高度：mediaQuery.size.height/4，
子项：ListView.separated(
收缩膜：对，
填充：边缘组。对称（水平：16.0），
滚动方向：轴水平，
物品计数：10，
分离器构建器：（u，uu）=>SizedBox（宽度：10），
itemBuilder:（，_）=>SizedBox(
宽度：mediaQuery.size.width/3，
子：Card（），
),
),
),
尺寸箱（高度：8），
填充物(
填充：边缘组。对称（水平：16.0），
孩子：排(
儿童：[
文本（“热门报价”，样式：标题样式），
垫片（），
图标按钮(
图标：图标（Icons.list），
按下时：（）=>设置状态（）{
_crossAxisCount=_crossAxisCount=1；
_childAspectRatio=_childAspectRatio=2.0；
}),
),
图标按钮(
图标：图标（图标。网格打开），
按下时：（）=>设置状态（）{
_crossAxisCount=_crossAxisCount=2；
_childAspectRatio=_childAspectRatio=1.0；
}),
),
],
),
),
尺寸箱（高度：8），
GridView.builder(
主要：错误，
收缩膜：对，
填充：边缘组。对称（水平：16.0），
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio:_childAspectRatio，
横轴间距：16，
平均间距：16，
crossAxisCount:\u crossAxisCount，
),
物品计数：15，
itemBuilder:（，_）=>Card（），
)
],
);
}
}

您可以使用条子在一个滚动视图中包含所有网格和列表

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {

    return _MyAppState();
  }

}


class _MyAppState extends State<MyApp> {
 bool isGrid = true;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      home: Scaffold(
        appBar: AppBar(title: Text('demo'),),
        body: Padding(

          child: CustomScrollView(

            slivers: <Widget>[

              SliverToBoxAdapter(
                child: Container(
                  height: 100.0,
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    itemBuilder: (context, index) {
                      return Container(
                        width: 100.0,
                        child: Card(
                          child: Text('data'),
                        ),
                      );
                    },
                  ),
                ),
              ),
              SliverToBoxAdapter(
         child: Row(
           children: <Widget>[
             Text('choose view method'),
             Row(
               children: <Widget>[
                 IconButton(icon: Icon(Icons.list), onPressed: (){
                   setState(() {
                       isGrid = false;
                   });
                 }, ),

                 IconButton(icon: Icon(Icons.grid_on), onPressed: (){
                   setState(() {
                     isGrid = true;
                   });
                 }, ),

               ],
             )
           ],
         ),
              ),
              ProductsWidget(
                isGrid: isGrid,
              ),

            ],
          ), padding: EdgeInsets.all(20),
        ),
      ),
    );
  }
}

class ProductsWidget extends StatelessWidget {
  final bool isGrid;

  const ProductsWidget({Key key, this.isGrid = true}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return isGrid ? SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
          return  Container(
            width: 100.0,
            child: Card(
              child: Text('data'),
            ),
          );
        },
        childCount: 50,
      ),
    ) :  SliverList(
        delegate: SliverChildListDelegate(
          [
            Card(child: Text('data'),),
            Card(child: Text('data'),),
            Card(child: Text('data'),),
            Card(child: Text('data'),),
          ],
        ), ) ;


  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
状态createState（）{
返回_MyAppState（）；
}
}
类MyAppState扩展了状态{
bool-isGrid=true；
@凌驾
小部件构建（构建上下文）{
重新