Flutter：GridView组件及动态GridView

GridView（网格列表）的常用属性：

我们常用的创建网格列表的方式有两种：

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

1.GridViewcoun

GridViewcount的简单使用示例：

    return GridView.count(
      crossAxisCount: 3,//列数
      children: [
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
        Text('这是一个文本'),
      ],
    );

接下来将通过遍历一个container列表的方式实现表格列表：

class HomeContent extends StatelessWidget {
  List<Widget> _getListdate() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        color: Colors.blue,
        child: Text('这是第$i条数据'),
      ));
    }
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(5),//控制整个表上下左右的间距
      childAspectRatio: 0.7,//调整容器高度，表示宽度和高度的比例
        crossAxisSpacing: 2, //控制表格左右的距离
        mainAxisSpacing: 2, //控制表格上下的距离
        crossAxisCount: 2, //列数
        children: this._getListdate());
  }
}

效果：

需注意，在这里无法通过height来调整Container的高度，所以使用了childAspectRatio

ListDate.dart:

List listData=[
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
  },
  {
    "title": 'Childhood in a picture',
    "author": 'Google',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
  },
  {
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
  },
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
  },
  {
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
  },
  {
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
  }

];

将上面的数据转换成动态表格：

import 'package:flutter/material.dart';
import 'res/ListDate.dart';

class MyApp_GridViewLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  List<Widget> _getListdate() {
    var tempList = listData.map((e) {
      return Container(
        child: Column(
          children: [
            Image.network(
              e['imageUrl'],
            ),
            SizedBox(
              height: 10,
            ), //设置text和image之间的距离
            Text(
              e['title'],
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.lightGreen, width: 1) //设置四个边框
            ), //listview会平铺数据，Column会垂直排列
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
        padding: EdgeInsets.all(5),
        //控制整个表上下左右的间距
        //childAspectRatio: 0.7,//调整容器高度，表示宽度和高度的比例
        crossAxisSpacing: 2,
        //控制表格左右的距离
        mainAxisSpacing: 2,
        //控制表格上下的距离
        crossAxisCount: 2,
        //列数
        children: this._getListdate());
  }
}

效果：

2.GridViewbuilder

gridviewbuilder用法和count差不多，但也有不同之处。使用builder实现上面同样的功能：

import 'package:flutter/material.dart';
import 'res/ListDate.dart';

class MyApp_GridViewLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  Widget _getListdate(context,index){
    return Container(
      child: Column(
        children: [
          Image.network(
            listData[index]['imageUrl'],
          ),
          SizedBox(
            height: 10,
          ), //设置text和image之间的距离
          Text(
            listData[index]['title'],
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.lightGreen, width: 1) //设置四个边框
      ), //listview会平铺数据，Column会垂直排列
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,  //循环数量
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing: 2,
          //控制表格左右的距离
          mainAxisSpacing: 2,
          //控制表格上下的距离
          crossAxisCount: 2,
          //列数
        ),
        itemBuilder: this._getListdate);
  }
}

效果：