Flutter之GridView组件

/**
    GridView({
    Key key,
    Axis scrollDirection = Axis.vertical,//滚动方向
    bool reverse = false,//是否反向显示数据
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,//物理滚动
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required this.gridDelegate,
    bool addAutomaticKeepAlives = true,//自动保存视图缓存
    bool addRepaintBoundaries = true,//添加重绘边界
    bool addSemanticIndexes = true,
    double cacheExtent,
    List children = const [],
    int semanticChildCount,
    })
 */

/**
    const SliverGridDelegateWithFixedCrossAxisCount({
    @required this.crossAxisCount,//每行几个
    this.mainAxisSpacing = 0.0,//主轴方向间距
    this.crossAxisSpacing = 0.0,//纵轴方向间距
    this.childAspectRatio = 1.0,//主轴纵轴缩放比例
    })
 */

第一种构造函数方式

body: GridView(
  //SliverGridDelegateWithFixedCrossAxisCount可以直接指定每行（列）显示多少个Item，SliverGridDelegateWithMaxCrossAxisExtent会根据GridView的宽度和你设置的每个的宽度来自动计算没行显示多少个Item
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, //每行2个
    mainAxisSpacing: 10.0, //主轴方向间距
    crossAxisSpacing: 10.0, //水平方向间距
    childAspectRatio: 1.0, //纵轴缩放比例
  ),
  children: [
    Container(
      color: Color(0xfff1f1f1),
      child: Text("aaaaaaaaaaaaaaaa"),
    ),
    Container(
      color: Color(0xfff1f1f1),
      child: Text("aaaaaaaaaaaaaaaa"),
    ),
    Container(
      color: Color(0xfff1f1f1),
      child: Text("aaaaaaaaaaaaaaaa"),
    ),
    Container(
      color: Color(0xfff1f1f1),
      child: Text("aaaaaaaaaaaaaaaa"),
    ),
    Container(
      color: Color(0xfff1f1f1),
      child: Text("aaaaaaaaaaaaaaaa"),
    ),
  ],
),

第二种builder方式

body: Container(
          height: 200.0,
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 20,
              crossAxisSpacing: 10,
//              childAspectRatio: 1,
            ),
            reverse: true,
            scrollDirection: Axis.horizontal,
            itemCount: list.length,
            itemBuilder: (BuildContext context, int position) {
              return ItemView(list, position);
            },
          ),
        ),

class ItemView extends StatelessWidget {
  Listlist;
  int position;

  ItemView(this.list, this.position) {}

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        color: Color(0xfff1f1f1),
        child: Text(list[position].title),
      ),
      onTap: () {
        print(position);
      },
    );
  }
}

第三种custom方式

第三种custom方式
body: GridView.custom(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    mainAxisSpacing: 10,
    crossAxisSpacing: 10,
    childAspectRatio: 1,
  ),
  childrenDelegate: SliverChildBuilderDelegate(
          (context, position) {
        return Container(
          color: Color(0xfff1f1f1),
          child: Text("aaaaaaaaaaaaaaaa"),
        );
      },
      childCount: 20,
  ),
),

练习demo，链接https://gitee.com/xgljh/Flutter