Flutter 网格布局 Gridview

动态网格 Gridview  有几个形式 

GridView，GridView.builder（常用），GridView.count（常用），GridView.extent和GridView.custom

padding:表示内边距。

crossAxisSpacing:网格间的空当，相当于每个网格之间的间距。

crossAxisCount:网格的列数 相当于 一行放置的网格数量。

GridView.count 接收下面的命名参数：

crossAxisCount 是必传的，用来控制横轴子项的个数

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'listview',

      home: Scaffold(

          appBar: new AppBar(

            title: new Text('GridView'),

          ),

          body: GridView.count(

            padding: const EdgeInsets.all(20.0), // 内边距设置

             //childAspectRatio: 0.7    //图片宽高比

            crossAxisSpacing: 10.0, //网格的间距

            crossAxisCount: 3, //每一行显示多少列

            children: <Widget>[

              //网格内容

              Container(

                child: new Text('网格1'),

                width: 100,

                height: 100,

                decoration: new BoxDecoration(

                  border: Border.all(width: 2.0, color: Colors.red),

                ),

              ),

              Container(

                child: new Text('网格2'),

                width: 100,

                height: 100,

                decoration: new BoxDecoration(

                  border: Border.all(width: 2.0, color: Colors.red),

                ),

              ),

              Container(

                child: new Text('网格3'),

                width: 100,

                height: 100,

                decoration: new BoxDecoration(

                  border: Border.all(width: 2.0, color: Colors.red),

                ),

              ),

              const Text('4'),

              const Text('5'),

            ],

          )),

    );

  }

}