头图

【Flutter 2-12】Flutter手把手教程UI布局和Widget——网格列表GridView

作者 | 弗拉德
来源 | 弗拉德(公众号:fulade_me)

GridView

GridView 是一个好用的网格布局控件,它的很多属性跟前面提到的ListView是一样的,重复的属性这里就不赘述了。我们重点了解初始化方法GridView.count的使用,还有两个代理SliverGridDelegateWithFixedCrossAxisCountSliverGridDelegateWithMaxCrossAxisExtent的参数以及使用。

GridView.count

我们先来看GridView.count的构造函数

GridView.count({
    /// key 
    Key key,
    /// 布局方向
    Axis scrollDirection = Axis.vertical,
    /// 是否 倒序显示
    bool reverse = false,
    /// ScrollController用于控制滚动位置和监听滚动事件
    ScrollController controller,
    /// 是否使用默认的controller
    bool primary,
    /// 滚动效果  可以通过此参数 设置 GridView 不可滚动
    ScrollPhysics physics,
    /// 是否根据子控件的总长度来设置 GridView 的长度,默认值为false
    bool shrinkWrap = false,
    ///  padding
    EdgeInsetsGeometry padding,
    /// 交叉轴 子控件的个数
    @required int crossAxisCount,
    /// 主轴方向的间距
    double mainAxisSpacing = 0.0,
    /// 交叉轴方向子元素的间距
    double crossAxisSpacing = 0.0,
    /// 子控件的宽高比例
    double childAspectRatio = 1.0,
    // 在 关闭屏幕时 是否释放子控件
    bool addAutomaticKeepAlives = true,
    /// 是否 避免列表项重绘
    bool addRepaintBoundaries = true,
    /// 该属性表示是否把子控件包装在IndexedSemantics里,用来提供无障碍语义
    bool addSemanticIndexes = true,
    // 预加载子控件的个数
    double cacheExtent,
    /// 子控件的数组
    List<Widget> children = const <Widget>[],
    /// 子控件的数量
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
})

这里要说的是有两个比较重要的参数crossAxisSpacingchildAspectRatio,这个两个参数是用来定义子控件大小的。

假如我们设置 crossAxisSpacing = 2,那么每一行就会显示2个控件,而且控件的高度由childAspectRatio来确定。
childAspectRatio表示子控件的宽高比,假如我们设置为2 / 3,那么高就是宽的1.5倍,这样就可以计算子控件的大小了,并且按照 GridView设置好的方向来排列和布局子控件。

GridView.count(
    crossAxisCount: 3,
    childAspectRatio: 2 / 3,
    children: List.generate(
        50,
        (index) {
        return Card(
            child: Container(
            color: Colors.green,
                child: Center(
                    child: Text("$index"),
                ),
            ),
        );
        },
    ),
)

效果图如下:
2021_01_16_gridview_count

SliverGridDelegateWithFixedCrossAxisCount

除了GridView.count()这种构造方法,我们很多时候常用一个构造方法是GridView.builder(gridDelegate: itemBuilder:),它接收一个delegate对象,并且跟ListView一样接收一个itemBuilder方法。
SliverGridDelegateWithFixedCrossAxisCount的构造方法如下:

SliverGridDelegateWithFixedCrossAxisCount({
  @required this.crossAxisCount,
  this.mainAxisSpacing = 0.0,
  this.crossAxisSpacing = 0.0,
  this.childAspectRatio = 1.0,
})

可以看得出来它是把GridView.count()的几个参数封装了一下,具体的用法和效果跟GridView.count()一样,这里就不赘述了。

SliverGridDelegateWithFixedCrossAxisCount在很多情况下都能满足我们的布局需求,但是有一个不足,因为它设置的每一行数是一个定值。
当我们把屏幕旋转,此时原来的高度会变为现在的宽度,效果就会如下:
2021_01_16_gridview_la

所以我们可以使用下面delegate来解决这个问题。

SliverGridDelegateWithMaxCrossAxisExtent

我们可以在GridView.builder(gridDelegate: itemBuilder:)方法内传入另外一个参数SliverGridDelegateWithMaxCrossAxisExtent

构造方法如下:

const SliverGridDelegateWithMaxCrossAxisExtent({
    @required this.maxCrossAxisExtent,
    this.mainAxisSpacing = 0.0,
    this.crossAxisSpacing = 0.0,
    this.childAspectRatio = 1.0,
}) 

这里有一个比较重要的参数就是maxCrossAxisExtent,这个值表示的是子控件最大的宽度是多少。
举个例子:
手机的屏幕宽度为375,子控件之间的间距为0maxCrossAxisExtent的值设置为100,那么我们知道子控件的宽度取值区间在0~100之间。

  • 假设我们布局3个子控件,3 乘以最大值100等于300,很明显是不能满足布局在375的宽度上的。
  • 假设我们布局4个子控件,4乘以100等于400400 大于 375。我们知道宽度的取值区间在0~100375 / 4 = 93.75既满足了宽度小于100,又满足了可以充满375的宽度,那么子控件的个数为 4宽度为93.75

这就是maxCrossAxisExtent的用法。

其实GridView还可以做瀑布流效果,感兴趣的同学可以去查一下。

想体验以上的示例的运行效果,可以到我的Github仓库项目flutter_app->lib->routes->gridview_page.dart查看,并且可以下载下来运行并体验。


公众号

一生只有一个职业:学生

29 声望
6 粉丝
0 条评论
推荐阅读
【Flutter 3-5】Flutter进阶教程——在Flutter中使用Lottie动画
在移动开发中总是需要展示一些动画特效,作为程序员的我们并不是很擅长用代码做动画,即便是有些动画可以实现,在跨平台的过程中也会因为API的差异性导致动画在各个平台中展示的有差异。所以为了释放程序员的双手...

弗拉德阅读 4.7k

封面图
程序员英语学习指南
动机为什么程序员要学习英语?工作:我们每天接触的代码都是英文的、包括很多技术文档也是英文的学习:最新最前沿的技术最开始都是只有English版本就业:学好英语让你的就业范围扩大到全球,而不只限于国内目标读...

九旬6阅读 618

安卓逆向之破解某成人APP播放次数限制
某成人水果APP非VIP用户存在播放次数限制,每天只能播放3次。超过3次需要购买VIP。 由于过于贫穷,于是抽空,对其安卓APP进行了逆向分析,最终成功破解了其播放次数限制。

悖论3阅读 1.2k评论 3

封面图
iOSer 年度总结|晋升的逻辑是什么
2022年是疫情3年的一个“小尾巴”,但它一点也不小,因为它是3年内大家感受最深的一年,也是影响最大的一年。身边同事们换工作、周围见闻都可以印证这个结论。

杭城小刘6阅读 1.8k

封面图
这一次,解决Flutter Dialog的各种痛点!
4.0版本做了重大调整,迁移请参照: SmartDialog 3.x 迁移 4.0本文内容已更新,文中内容及其代码皆为4.0用法前言Q:你一生中闻过最臭的东西,是什么?A:我那早已腐烂的梦。兄弟萌!!!我又来了!这次,我能自信...

小呆呆6661阅读 3.4k

封面图
iOS 健康共享失败如何解决
您要开始与之共享的对象必须已经连同他们的 iCloud 账户邮箱一起保存在您的“通讯录”中(iCloud 账户邮箱即 iCloud 账户绑定的邮箱信息,不是强制要求 @iCloud.com 邮箱)。

岚哲阅读 7k

uni-app中安卓包检查更新、新版本下载、下载进度条显示功能实现
如果想要做一个app的话,可以有很多种选择方案,uni-app是其中的一个性价比高一些(坑多一些)的方案。本文记录一下,uni-app打安卓包以后,需要检查并下载更新,且显示进度条的功能。

水冗水孚2阅读 729

一生只有一个职业:学生

29 声望
6 粉丝
宣传栏