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),
          ),
        ],
      ),
    );
  }
}
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页