Flutter GridView（网格）

GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView，有 CustomScrollView 的特性。

通常，我们可以利用 GridView 构建这样的界面。

String imgsrc = 'http://5b0988e595225.cdn.sohucs.com/images' +
            '/20171218/342e43903694448b91698b5ce7623314.jpeg';

List<Widget> buildGridTileList(int number) {
    List<Widget> widgetList = new List();

    for (int i = 0; i < number; i++) {
        widgetList.add(new Container(
            decoration: new BoxDecoration(
                color: Colors.white,
                image: new DecorationImage(
                    image: new NetworkImage(this.imgsrc),
                    fit: BoxFit.cover,
                ),
                shape: BoxShape.circle,
                boxShadow: <BoxShadow>[
                    new BoxShadow(
                        offset: new Offset(0.0, 1.0),
                        blurRadius: 2.0,
                        color: const Color(0xffaaaaaa),
                    ),
                ],
            ),
        ));
    }
    return widgetList;
}

// GridView 默认滚动方向是垂直的。
new GridView.count(
    padding: const EdgeInsets.all(8.0),
    primary: false,
    mainAxisSpacing: 12.0,              // 竖向间距
    crossAxisCount: 3,                  // 横向 Item 的个数
    crossAxisSpacing: 12.0,             // 横向间距
    children: buildGridTileList(15),
),