如何在 flutter 中使用网格布局来制作这种类型的布局

Question

一屏多格布局

Answer 1

只是一个 ListView 里面有 GridViews，并且不要忘记 GridViews

的 shrinkWrap 为真

  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"),
                );
              },
            )
          ],
        ),
      );
    }
  }

Answer 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"),
               );
             },
           ),

如何在 flutter 中使用网格布局来制作这种类型的布局

How to make this type of layout using grid layout in flutter

dart

flutter

flutter-layout