7、Flutter GridView网格布局组件

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

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