Flutter 中GridView部件的两种方式

1、GridView.count

直接写间距等,在children下写内容

return GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      //只能设置宽高比
      // childAspectRatio: 0.6,
      padding: EdgeInsets.all(20),
      children: this._getListData(),
    );

List _getListData() {
    var tempListData = listData.map((value) {
      return Container(
        child: Column(
          children: [
            Image.network(value['imageUrl']),
            Text(value['title']),
            Text(value['author'])
          ],
        ),
      );
    });
    return tempListData.toList();
  }

2、GridView.builder

需要实现gridDelegate、itemBuilder、itemCount,

gridDelegate:gridDelegate: SliverGridDelegateWithFixedCrossAxisCount()中写间距什么的,

itemBuilder:itemBuilder: (context, index){return 内容}

itemCount:itemCount返回多少行

return Container(
      child: GridView.builder(
          padding: EdgeInsets.all(20),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemCount: listData.length,
          itemBuilder: (context, index) {
            return Column(
              children: [
                Image.network(listData[index]['imageUrl']),
                SizedBox(
                  height: 10,
                ),
                Text(
                  listData[index]['title'],
                  style: TextStyle(
                    fontSize: 18,
                  ),
                ),
              ],
            );
          }),
    );

 

你可能感兴趣的:(Flutter)