Flutter开发之GridView组件（20）

参考文章：https://www.jianshu.com/p/fb3bf633ee12

GridView有5种写法

写法一：GridView.count （body: myGridView1()）
写法二：GridView.builder （body: myGridView2()）
写法三：GridView.builder（SliverGridDelegateWithMaxCrossAxisExtent）（body: myGridView3()）
写法四：GridView.custom (childrenDelegate: SliverChildBuilderDelegate）（body: myGridView4()）
写法五：GridView.extent(允许您指定最大像素宽度) （body: myGridView5()）

建一个页面

import 'package:flutter/material.dart';

// widget 封装
Widget initBodyCustom() {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          padding: EdgeInsets.only(top: 20),
          width: 200,
          height: 60,
          color:Colors.orange,
          child: Text("This is First Screen11",textAlign:TextAlign.center,),
        ),
      ],
    ),
  );
}

// 构建路由传参
class GridViewTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GardViewTest"),
        backgroundColor: Colors.orange,
      ),

      body: initBodyCustom(),
      // body: myGridView1(),
      // body: myGridView2(context),
      // body: myGridView3(context),
      // body: myGridView4(context),
      body: myGridView5(context),
    );
  }
}

1、 body: initBodyCustom(),

2、准备数据源

List getDataList() {
  List list = [];
  for (int i = 0; i < 100; i++) {
    list.add(i.toString());
  }
  return list;
}

// map 的用法  返回值类型
// .toList()返回迭代器返回的元素的数组
ListgetWidgetList(){
  return getDataList().map((String item)
      {
        return getItemContainer(item);
      }).toList();
}

// ItemView
Widget getItemContainer(String item) {
  return GestureDetector(
      onTap: () {
        //处理点击事件
        print("哈哈哈。。。哈哈哈哈。。。");
      },
  child: Container(
    color: Colors.blue,
    child: new Column(
      //mainAxisAlignment: MainAxisAlignment.center,
      children:[

        Expanded(
          flex:3,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3
          child: Container(
            //alignment: Alignment.center,
            alignment: Alignment(0.0,0.5),
            //padding: EdgeInsets.only(top: 35),
            child: Text(item,style: TextStyle(color: Colors.white,fontSize: 20),
            ),
          ),
        ),

        Expanded(
          flex:1,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3
          child: Container(
            //alignment: Alignment(-1.0,0),
            //alignment:Alignment.center,
            padding: EdgeInsets.only(top: 5),
            width: 100,
            height: 40,
            child: Text("满200减50",
              textAlign: TextAlign.center, // 与上面Alignment冲突
              style: TextStyle(color: Colors.white,fontSize: 16),
            ),
          ),
        ),

      ],
    ),
  ),
    
  );
}

getItemContainer（）相当于iOS 中的cell 或者 Item 一个公共组件

3、body: myGridView1(),

// GridView 1 封装
Widget myGridView1() {
  return GridView.count(
    //水平子Widget之间间距
    crossAxisSpacing: 10.0,
    //垂直子Widget之间间距
    mainAxisSpacing: 30.0,
    //GridView内边距
    padding: EdgeInsets.all(10.0),
    //一行的Widget数量
    crossAxisCount: 2,
    //子Widget宽高比例
    childAspectRatio: 2.0,
    //子Widget列表
    children: getWidgetList(),
  );
}

4、body: myGridView2(),

// GridView 2 封装
Widget myGridView2(BuildContext context) {
  List datas = getDataList();
  return GridView.builder(

      itemCount: datas.length,
      itemBuilder: (BuildContext context, int index) {
        //Widget Function(BuildContext context, int index)
        return getItemContainer(datas[index]);
      },

      //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 3,
          //纵轴间距
          mainAxisSpacing: 20.0,
          //横轴间距
          crossAxisSpacing: 10.0,
          //子组件宽高长度比例
          childAspectRatio: 1.0
      ),

  );
}

5、body: myGridView3(),

// GridView 3 封装
Widget myGridView3(BuildContext context) {
  List datas = getDataList();
  return GridView.builder(

    itemCount: datas.length,
    itemBuilder: (BuildContext context, int index) {
      return getItemContainer(datas[index]);
    },

    // 对于SliverGridDelegateWithMaxCrossAxisExtent而言，
    // 水平方向元素个数不再固定，其水平个数也就是有几列，
    // 由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing等决定。
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //单个子Widget的水平最大宽度
        maxCrossAxisExtent: 100,
        //水平单个子Widget之间间距
        mainAxisSpacing: 20.0,
        //垂直单个子Widget之间间距
        crossAxisSpacing: 10.0
    ),
  );
}

6、body: myGridView4(),

// GridView 4 封装
Widget myGridView4(BuildContext context) {
  List datas = getDataList();
  return GridView.custom(

      padding: EdgeInsets.all(10),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 20.0,
      ),

      childrenDelegate: SliverChildBuilderDelegate((context, position) {
        return getItemContainer(datas[position]);
      },
          childCount: datas.length
      )
  );
}

6、body: myGridView5(),

// GridView 5 封装
Widget myGridView5(BuildContext context) {
  List datas = getDataList();
  return GridView.extent(
      padding: EdgeInsets.all(10),
      // item 最大宽度200
      maxCrossAxisExtent: 200.0,
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
      children: getWidgetList(),
      semanticChildCount:datas.length,
  );
}

最后借一张gif

这里面我还增加了点击- item -的点击事件，只需要把 index 穿过去即可处理。

注意⚠️: 在显示二维列表时，重要的是单元格占用哪一行和哪一列时， 应该使用Table或 DataTable。