Flutter GridView Demo

GridView

代码

///2019.4.20 By GX
Widget _buildRechargeGridView() {
    List list = [];
    for (int i = 0; i < (infoList == null ? 0 : this.infoList.length); i++) {
      ///初始化每个单元
      Widget view = _buildGridUnit();
      list.add(view);
    }

    return Container(
        height: (MediaQuery.of(context).size.width) / 3 + 44,
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.only(
            left: getWidthFromRatio(context, 20),
            right: getWidthFromRatio(context, 20)),
        child: GridView(
            ///机型适配，如有需要，变更SliverGridDelegateWithFixedCrossAxisCount
            gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: (MediaQuery.of(context).size.width) / 3,
            mainAxisSpacing: 22,
            crossAxisSpacing: 20,
            childAspectRatio: 2,
          ),
          children: list,
        ),
      );
  }

代码说明

infoList

infoList 是对GridView每个单元的初始化信息的List。在您的代码中应该是从网络获取或是其他方式。

_buildGridUnit()

_buildGridUnit 是return一个 widget的私有函数，根据需求在函数中创建GridView的通用单元布局

属性说明

SliverGridDelegateWithMaxCrossAxisExtent

const SliverGridDelegateWithMaxCrossAxisExtent({
    @required this.maxCrossAxisExtent, //每个Unit有多宽
    this.mainAxisSpacing = 0.0,//主轴方向间距
    this.crossAxisSpacing = 0.0,//纵轴方向间距
    this.childAspectRatio = 1.0,//主轴纵轴缩放比例
    })

SliverGridDelegateWithFixedCrossAxisCount

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

小坑

GridView做出来，会有滑动效果，根据UI的示意图和产品的要求，可能会需要添加解除滑动的容器

赞赏

如对您有帮助，支持我，不胜感激