如何在Flutter中使用网格布局制作这种类型的布局 [英] How to make this type of layout using grid layout in flutter
本文介绍了如何在Flutter中使用网格布局制作这种类型的布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在一个屏幕中有多个网格布局
Multiple grid layouts in one screen
推荐答案
只需一个 ListView
,其中包含 GridViews
,不要忘记 shrinkWrap
对于 GridViews
Just a ListView
with GridViews
inside, and don't forget the shrinkWrap
true for the 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"),
);
},
)
],
),
);
}
}
这篇关于如何在Flutter中使用网格布局制作这种类型的布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文