Flutter组件之GridView

使用命名构造函数GridView.count实现网格布局

主要属性

• children 子组件
• crossAxisSpacing 设置交叉轴的间距
• mainAxisSpacing 设置株洲间距
• padding 设置GridView的内边距
• childAspectRatio 设置每个子组件的宽高比例
• crossAxisCount 设置列的数量

代码

	import 'package:flutter/material.dart';

    class Cart extends StatelessWidget {

      List<Widget> list = new List();
      Cart(){
        for(int i = 0 ;i < 20 ; i++){
          this.list.add(
            Container(
              alignment: Alignment.center,
              child: Text("这是第$i个组件"),

              color: Color(0xffff793f),
            )
          );
        }
      }
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("购物车"),
            centerTitle: true,
          ),
          body: GridView.count(
            // 设置交叉轴组件的数量
            crossAxisCount: 3,
            // 设置子组件列表
            children: this.list,
            // 设置交叉轴间距
            crossAxisSpacing: 20.0,
            // 设置主轴间距
            mainAxisSpacing: 20.0,
            // 设置整个组件的内边距
            padding: EdgeInsets.all(20),
            // 设置子组件的宽高比例
            childAspectRatio: 0.7,

          ),
        );
      }
    }