Flutter 08 - 列表组件之 GridView 组件详解

一、概述

当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 GridView 实现布局。

二、常用参数

GridView 创建网格列表有多种方式，下面我们主要介绍两种。

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

常用属性

名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsetsGeometry	内边距
crossAxisSpacing	double	水平子 Widget 之间间距
mainAxisSpacing	double	垂直子 Widget 之间间距
crossAxisCount	int	一行的 Widget 数量
childAspectRatio	double	子 Widget 宽高比例
children		<Widget>[ ]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount(常用) SliverGridDelegateWithMaxCrossAxisExtent	控制布局主要用在 GridView.builder 里面

三、GridView.count 实现网格布局

1. 本文网格列表展示

class GridViewWithTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return GridView.count(
      crossAxisCount: 2, // 一行的 Widget 数量
      children: <Widget>[
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
      ]
    );
  }
}

GridViewWithTextWidget.png

2. 文本样式网格列表展示

class GridViewWithTextStyleWidget extends StatelessWidget {

  List<Widget> _getListData() {
    List<Widget> list = new List();

    for(var i = 0; i < 20; i++) {
      list.add( 
        Container( 
          alignment: Alignment.center,
          child: Text(
            '这是第$i条数据',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20
            )
          ),
          color: Colors.blue
        )
      );
    }
    return list;
  }

GridViewWithTextStyleWidget.png

3. 图文网格列表展示

// listData.dart
  List listData = [
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://img.haomeiwen.com/i8863827/f214cb00231a4784.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://img.haomeiwen.com/i8863827/6f3e06b72ac3f406.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://img.haomeiwen.com/i8863827/2e006a5894bbab1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://img.haomeiwen.com/i8863827/7bd40d0269c75a40.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://img.haomeiwen.com/i8863827/684693c44f575ace.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://img.haomeiwen.com/i8863827/3b56e58df8c7e1c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://img.haomeiwen.com/i8863827/a3b61e6cf2426326.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      }      

  ];

import 'listData.dart';

class GridViewWithImageTextWidget extends StatelessWidget {

  List<Widget> _getListData() {
    var tempList = listData.map
   ((value) {
      return Container(
        child: Column(
          children: <Widget> [
            Image.network(value['imageUrl']),
            SizedBox(height: 12),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 15)
            )
          ],
        ),
        decoration: BoxDecoration(
          border: Border.all(
            color: Color.fromRGBO(233, 233, 233, 0.9),
            width: 1
          )
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 10.0,
      mainAxisSpacing: 10.0,
      padding: EdgeInsets.all(10),
      crossAxisCount: 2,
      children: this._getListData()
    );
  }
}

GridViewWithImageTextWidget.png

四、GridView.builder 实现网格布局

import 'listData.dart';

class GridViewWithBuilderWidget extends StatelessWidget {  

  Widget _getListData(context,index) {
        return Container(            
            child:Column(
                children: <Widget>[
                  Image.network(listData[index]['imageUrl']),
                  SizedBox(height: 12),
                  Text(
                    listData[index]['title'],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 15 
                      )
                  )
                ]
            ),
            decoration: BoxDecoration(
              border: Border.all(
                color:Color.fromRGBO(233, 233,233, 0.9),
                width: 1
              )
            )
          );
  }

  @override
  Widget build(BuildContext context) {    
    return GridView.builder(
        // 注意
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing: 10.0, // 水平子 Widget 之间间距
          mainAxisSpacing: 10.0,  // 垂直子 Widget 之间间距        
          crossAxisCount: 2       // 一行的 Widget 数量
        ),
        itemCount: listData.length,
        itemBuilder:this._getListData,
    );
  }
}

GridViewWithBuilderWidget.png