[英]How to make this type of layout using grid layout in flutter
只是一個帶有GridViews
的ListView
,並且不要忘記為GridViews
設置shrinkWrap
true
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"),
);
},
)
],
),
);
}
}
由於您一次又一次地重用一些代碼並占用一些內存。 為什么我們不動態生成那幾行代碼? 是的,我是顫振的新手。
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"),
);
},
),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.