Flutter GridView Demo

最新推荐文章于 2023-10-19 20:28:39 发布

原创最新推荐文章于 2023-10-19 20:28:39 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

麻麻Flutter是个啥专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在Flutter中使用GridView构建动态网格视图，包括数据加载、单元格布局及响应式设计。通过实例展示了GridView的灵活性和强大的适应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GridView

代码

///2019.4.20 By GX
Widget _buildRechargeGridView() {
    List<Widget> 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,//主轴纵轴缩放比例
    })