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

一、概述

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

二、常用参数

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

1. 可以通过 GridView.count 实现网格布局
2. 通过 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://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-6f3e06b72ac3f406.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-2e006a5894bbab1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-7bd40d0269c75a40.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-684693c44f575ace.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-3b56e58df8c7e1c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-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