JZTXT

7、Flutter GridView网格布局组件

发布时间 2023-11-15 18:58:15作者: 鲤斌

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
    );
  }
}