GridView 列表组件 以及动态 GridView

Posted 2021-03-09 zhaofeis

 

 

 

1、通过 GridView.builder 实现网格布局

Widget getList(context, index) {
  return Container(
    margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
    padding: EdgeInsets.all(10),
    child: Column(
      children: <Widget>[
        Image.network(
          listData[index][‘imageUrl‘],
          fit: BoxFit.cover,
        ),
        SizedBox(height: 5),
        Text(
          listData[index][‘title‘],
          style: TextStyle(
              fontSize: 14
          ),
          overflow: TextOverflow.ellipsis,
        )
      ],
    ),
    decoration: BoxDecoration(
        border: Border.all(
            width: 1,
            color: Colors.black12
        )
    ),
  );
}
Widget build(BuildContext context) {
  // TODO: implement build
  return Container(
    padding: EdgeInsets.all(10),
    child: GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
      ),
      itemCount: listData.length,
      itemBuilder: getList,
    )
  );
}

2、可以通过 GridView.count 实现网格布局

getList() {
  var tempList = listData.map((val) {
      return Container(
        margin: EdgeInsets.fromLTRB(0, 0, 0, 10),
        padding: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            Image.network(
                val[‘imageUrl‘],
              fit: BoxFit.cover,
            ),
            SizedBox(height: 5),
            Text(
              val[‘title‘],
              style: TextStyle(
                fontSize: 14,
                color: Colors.red
              ),
              overflow: TextOverflow.ellipsis,
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            width: 1,
            color: Colors.black12
          )
        ),
      );
  });
  return tempList.toList();
}
Widget build(BuildContext context) {
  // TODO: implement build
  return GridView.count(
    padding: EdgeInsets.all(10),
    crossAxisCount: 2,
    crossAxisSpacing: 10,
    children: getList(),
  );
}