（Flutter 五）gridView：网格列表

GridView能实现类似相册的功能。

GridView的属性列表如下：
GridView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required this.gridDelegate,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
List<Widget> children = const <Widget>[],
int semanticChildCount,
})

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'This is a Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, //每行显示3列
              mainAxisSpacing: 2.0,//每行的间距
              crossAxisSpacing: 2.0, //每列的间距
              childAspectRatio: 0.7 //宽高比，如果为1表示不变形，如果为2表示宽是高的2倍
            ),
            children: <Widget>[
              new Image.network('http://img5.mtime.cn/mg/2020/03/18/071546.22519737_285X160X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2020/01/06/144226.95498850.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/12/24/172628.72586301.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/12/24/172743.73758749.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/11/19/095516.52126673_220X124X4.jpg',fit: BoxFit.cover),
              new Image.network('http://img5.mtime.cn/mg/2019/12/11/164436.50928841_220X124X4.jpg',fit: BoxFit.cover),
            ],
          ),
      ),
    );
  }
}

运行结果如下：