flutter - GridView 网格布局，以及设置子元素的间距和大小

基础的 GridView 布局

参数	说明
gridDelegate	对子元素进行修饰，由于SliverGridDelegate 是一个抽象类， 找它的实现类有 【SliverGridDelegateWithFixedCrossAxisCount，SliverGridDelegateWithMaxCrossAxisExtent,】
childAspectRatio	子元素列表

SliverGridDelegateWithFixedCrossAxisCount方法	说明
crossAxisCount	设置一行几列
childAspectRatio	设置每子元素的大小（宽高比）
crossAxisSpacing	元素的左右的 距离
mainAxisSpacing	子元素上下的 距离

class GridWidget extends StatelessWidget {
     
  @override
  Widget build(BuildContext context) {
     
    return Container(
      height: 200,
      child: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          // 一行几列
          crossAxisCount: 4,
          // 设置每子元素的大小（宽高比）
          childAspectRatio: 1.8,
          // 元素的左右的 距离
          crossAxisSpacing: 20,
          // 子元素上下的 距离
          mainAxisSpacing: 10,
        ),
        children: [
          Container(
            color: Colors.red,
            child: Icon(Icons.keyboard),
          ),
          Container(
            color: Colors.pink,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.green,
            child: Icon(Icons.home),
          ),
          Container(
            color: Colors.blue,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.orange,
            child: Icon(Icons.home),
          ),
        ],
      ),
    );
  }
}

SliverGridDelegateWithMaxCrossAxisExtent方法	说明
maxCrossAxisExtent	每个子元素水平方向上的宽度
childAspectRatio	设置每子元素的大小（宽高比）
crossAxisSpacing	元素的左右的 距离
mainAxisSpacing	子元素上下的 距离

class GridWidget extends StatelessWidget {
     
  @override
  Widget build(BuildContext context) {
     
    return Container(
      height: 200,
      child: GridView(
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          // 每个子元素水平方向上的宽度
          maxCrossAxisExtent: 120,
          // 设置每子元素的大小（宽高比）
          childAspectRatio: 1.8,
          // 元素的左右的 距离
          crossAxisSpacing: 20,
          // 子元素上下的 距离
          mainAxisSpacing: 10,
        ),
        children: [
          Container(
            color: Colors.red,
            child: Icon(Icons.keyboard),
          ),
          Container(
            color: Colors.pink,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.green,
            child: Icon(Icons.home),
          ),
          Container(
            color: Colors.blue,
            child: Icon(Icons.add),
          ),
          Container(
            color: Colors.orange,
            child: Icon(Icons.home),
          ),
        ],
      ),
    );
  }
}