如何在颤动中使用网格布局制作这种类型的布局答案

【问题标题】：How to make this type of layout using grid layout in flutter如何在颤动中使用网格布局制作这种类型的布局
【发布时间】：2019-05-19 14:16:52
【问题描述】：

一个屏幕中的多个网格布局

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

只是一个 ListView 和 GridViews 里面，不要忘记 shrinkWrap 为真 GridViews

  class MultipleGridView extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: ListView(
          children: <Widget>[
            Text("Title 1"),
            GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5,
                crossAxisSpacing: 5.0,
                mainAxisSpacing: 5.0,
              ),
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  color: Colors.blue,
                  child: Text("index: $index"),
                );
              },
            ),
            Text("Title 2"),
            GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5,
                crossAxisSpacing: 5.0,
                mainAxisSpacing: 5.0,
              ),
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  color: Colors.blue,
                  child: Text("index: $index"),
                );
              },
            ),
            Text("Title 3"),
            GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5,
                crossAxisSpacing: 5.0,
                mainAxisSpacing: 5.0,
              ),
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  color: Colors.blue,
                  child: Text("index: $index"),
                );
              },
            ),
            Text("Title 4"),
            GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5,
                crossAxisSpacing: 5.0,
                mainAxisSpacing: 5.0,
              ),
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  color: Colors.blue,
                  child: Text("index: $index"),
                );
              },
            )
          ],
        ),
      );
    }
  }

【讨论】：

【解决方案2】：

由于您一次又一次地重用某些代码并占用了一些内存。为什么我们不动态生成那几行代码呢？是的，我是 Flutter 的新手。

Text("Title 1"),
           GridView.builder(
             physics: NeverScrollableScrollPhysics(),
             shrinkWrap: true,
             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
               crossAxisCount: 5,
               crossAxisSpacing: 5.0,
               mainAxisSpacing: 5.0,
             ),
             itemCount: 10,
             itemBuilder: (context, index) {
               return Container(
                 color: Colors.blue,
                 child: Text("index: $index"),
               );
             },
           ),

【讨论】：