flutter GridView 列表组件 以及动态 GridView

在ListView中使用GridView

// 使用GridView.builder方法实现网格布局
GridView.builder(
    itemCount: 5,
    // 当在ListView中使用GridView时，该属性必填
    shrinkWrap: true,
    // 设置不可滚动
    physics: new NeverScrollableScrollPhysics(),
    // SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, // 横轴元素个数
        mainAxisSpacing: 20.0, // 纵轴间距
        crossAxisSpacing: 10.0, // 横轴间距
        childAspectRatio: 1.0 // 子组件宽高长度比例
    ),
    itemBuilder: (BuildContext context, int index) {
        return Text('更多游戏', style: TextStyle(fontSize: Screen.width(30)),);
    }
)

案例：ListView中的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) {
    return Container(
        padding: EdgeInsets.all(10),
        child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
            ),
            itemCount: listData.length,
            itemBuilder: getList,
        )
    );
}

通过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) {
    return GridView.count(
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        children: getList(),
    );
}