最佳答案
只是一个 ListView
里面有 GridViews
,并且不要忘记 GridViews
的 shrinkWrap
true/p>
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"),
);
},
)
],
),
);
}
}
关于dart - 如何在 flutter 中使用网格布局来制作这种类型的布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53845295/