GridView创建网格列表主要有下面三种方式
1、可以通过GridView.count 实现网格布局 一行的 Widget 数量
class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); List<Widget> _getListData() { List<Widget> list = []; for (var i = 0; i < 200; i++) { list.add(Container( alignment: Alignment.center, color: Colors.blue, child: Text( '这是第$i条数据', style: const TextStyle(color: Colors.white, fontSize: 20), ), // height: 400, //设置高度没有反应 )); } return list; } @override Widget build(BuildContext context) { return GridView.count( crossAxisSpacing: 10.0, //水平子 Widget 之间间距 mainAxisSpacing: 20.0, //垂直子 Widget 之间间距 padding: const EdgeInsets.all(10), crossAxisCount: 2, //一行的 Widget 数量 childAspectRatio: 2, //宽度和高度的比例 children: _getListData(), ); } }
2、可以通过GridView.extent 实现网格布局 视图中每个单元格在网格交叉轴上最大的尺寸
class HomePage5 extends StatelessWidget { const HomePage5({Key? key}) : super(key: key); List<Widget> _getListData() { List<Widget> list = []; for (var i = 0; i < 200; i++) { list.add(Container( alignment: Alignment.center, color: Colors.blue, child: Text( '这是第$i条数据', style: const TextStyle(color: Colors.white, fontSize: 20), ), // height: 400, //设置高度没有反应 )); } return list; } @override Widget build(BuildContext context) { return GridView.extent( crossAxisSpacing: 10.0, //水平子 Widget 之间间距 mainAxisSpacing: 20.0, //垂直子 Widget 之间间距 padding: const EdgeInsets.all(10), childAspectRatio: 2, //宽度和高度的比例 maxCrossAxisExtent: 400, //视图中每个单元格在网格交叉轴上最大的尺寸 children: _getListData(), ); } }
3、通过GridView.builder实现动态网格布局
(1)SliverGridDelegateWithFixedCrossAxisCount Flutter中用于创建具有固定列数的网格布局
class MyApp4 extends StatelessWidget { MyApp4({Key? key}) : super(key: key) { print(ListText); } Widget _initListData(context, index) { return Container( decoration: BoxDecoration( color: Color.fromARGB(255, 181, 192, 27), //背景颜色 border: Border.all( //边框 color: Colors.red, //边框颜色 width: 1.0), borderRadius: BorderRadius.circular(20), //圆角 ), child: Column(children: [ Image.network(ListText[index]["imageUrl"],height: 100,), const SizedBox(height: 10,), Text(ListText[index]["title"]), ]), ); } @override Widget build(BuildContext context) { return GridView.builder( itemCount: ListText.length, //数组长度 gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisSpacing: 10.0, //水平子 Widget 之间间距 mainAxisSpacing: 10.0, //垂直子 Widget 之间间距 crossAxisCount: 2, //一行的 Widget 数量 childAspectRatio: 2, //宽度和高度的比例 ), itemBuilder: _initListData ); } }
(2)SliverGridDelegateWithMaxCrossAxisExtent 单个网格项目或列表项的最大宽度
class MyApp5 extends StatelessWidget { MyApp5({Key? key}) : super(key: key) { print(ListText); } Widget _initListData(context, index) { return Container( decoration: BoxDecoration( color: Color.fromARGB(255, 181, 192, 27), //背景颜色 border: Border.all( //边框 color: Colors.red, //边框颜色 width: 1.0), borderRadius: BorderRadius.circular(20), //圆角 ), child: Column(children: [ Image.network(ListText[index]["imageUrl"],height: 100,), const SizedBox(height: 10,), Text(ListText[index]["title"]), ]), ); } @override Widget build(BuildContext context) { return GridView.builder( itemCount: ListText.length, //数组长度 gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( crossAxisSpacing: 10.0, //水平子 Widget 之间间距 mainAxisSpacing: 10.0, //垂直子 Widget 之间间距 childAspectRatio: 2, //宽度和高度的比例 maxCrossAxisExtent: 800, //这个属性的作用是定义单个网格项目或列表项的最大宽度 必须 ), itemBuilder: _initListData ); } }
map遍历
class myApp5 extends StatelessWidget { myApp5({super.key}); List<String> _list = []; void putList() { for (int i = 0; i < 20; i++) { _list.add("列表$i"); } } @override Widget build(BuildContext context) {
putList(); //调方法
return ListView( children: _list.map((e) { return ListTile( title: Text(e), ); }).toList(), ); } }