企业网站建设方案机构,电子商务网站建设课外实训,公司网站制作招聘,宁波网络推广教程一、前言Flutter 作为时下最流行的技术之一#xff0c;凭借其出色的性能以及抹平多端的差异优势#xff0c;早已引起大批技术爱好者的关注#xff0c;甚至一些 闲鱼 #xff0c; 美团 #xff0c; 腾讯 等大公司均已投入生产使用。虽然目前其生态还没有完全成熟#xff0…一、前言Flutter 作为时下最流行的技术之一凭借其出色的性能以及抹平多端的差异优势早已引起大批技术爱好者的关注甚至一些 闲鱼 美团 腾讯 等大公司均已投入生产使用。虽然目前其生态还没有完全成熟但身靠背后的 Google 加持其发展速度已经足够惊人可以预见将来对 Flutter 开发人员的需求也会随之增长。对 ListView 组件的学习我们已经对滚动型组件的使用有了初步认识这对今天要学习的GridView 组件十分有帮助。因为两者都继承自 BoxScrollView 所以两者的属性有80%以上是相同的用法非常相似。而且如下图所示可见 GridView 网格布局在app中的使用频率其实非常高所以接下来就让我们来看看在 Flutter 中如何使用吧~二、初识GridView今天我们的主角GridView一共有5个构造函数GridViewGridView.builderGridView.count GridView.extent 和 GridView.custom 。但是不用慌因为可以说其实掌握其默认构造函数就都会了~来看下 GridView 构造函数已省略不常用属性GridView({
Key key,
Axis scrollDirection Axis.vertical,
bool reverse false,
ScrollController controller,
ScrollPhysics physics,
bool shrinkWrap false,
EdgeInsetsGeometry padding,
required this.gridDelegate,
double cacheExtent,
ListWidget children const Widget[],
})虽然又是一大堆属性但是大部分都很熟悉老朋友嘛~除了一个必填参数 gridDelegate 外全和ListView 默认构造函数的参数一样这也是文章开头为什么说掌握了 ListView 再学 GridView 非常容易的原因。那么接下来就让我们来重点关注下 gridDelegate 这个参数它其实是 GridView 组件如何控制排列子元素的一个委托。跟踪源码我们可以在scroll_view.dart中看到 gridDelegate 的类型是SliverGridDelegate 进一步跟踪进sliver_grid.dart可以看到 SliverGridDelegate 其实是一个抽象类而且一共有两个实现类SliverGridDelegateWithFixedCrossAxisCount 用于固定列数的场景SliverGridDelegateWithMaxCrossAxisExtent 用于子元素有最大宽度限制的场景2.1SliverGridDelegateWithFixedCrossAxisCount我们先来看下 SliverGridDelegateWithFixedCrossAxisCount 根据类名我们也能大概猜它是干什么用的如果你的布局中 每一行的列数是固定的 那你就应该用它。来看下其构造函数SliverGridDelegateWithFixedCrossAxisCount({
required this.crossAxisCount,
this.mainAxisSpacing 0.0,
this.crossAxisSpacing 0.0,
this.childAspectRatio 1.0,
})crossAxisCount 列数即一行有几个子元素mainAxisSpacing 主轴方向上的空隙间距crossAxisSpacing 次轴方向上的空隙间距childAspectRatio 子元素的宽高比例。想必看到上面的示例图你就秒懂其中各个参数的含义了。不过这里有一点需要特别注意如果你的子元素宽高比例不为1那么你一定要设置 childAspectRatio 属性。2.2SliverGridDelegateWithMaxCrossAxisExtentSliverGridDelegateWithMaxCrossAxisExtent 在实际应用中可能会比较少来看下其构造函数SliverGridDelegateWithMaxCrossAxisExtent({
required this.maxCrossAxisExtent,
this.mainAxisSpacing 0.0,
this.crossAxisSpacing 0.0,
this.childAspectRatio 1.0,
})可以看到除了 maxCrossAxisExtent 外其他参数和SliverGridDelegateWithFixedCrossAxisCount 都是一样的。那么 maxCrossAxisExtent 是干什么的呢我们来看个例子假如手机屏宽 375 crossAxisSpacing 值为 0 maxCrossAxisExtent 值为 125 时网格列数将是 3 。因为 125 * 3 375 刚好每一列的宽度就是 375/3 。maxCrossAxisExtent 值为 126 时网格列数将是 3 。因为 126 * 3 375 显示不下每一列的宽度将是 375/3 。maxCrossAxisExtent 值为 124 时网格列数将是 4 。因为 124 * 3 375 仍有多余每一列的宽度将是 375/4 。可以看到 maxCrossAxisExtent 其实就是告诉 GridView 组件子元素的最大宽度可能是多少然后计算得到合适的列宽实际上我们也很少这么应用所以这种方法的使用频率不高。3. 实际应用经过前面的介绍我们已经对 GrdiView 组件有了初步了解下面就来看看如何使用。还记得之前GridView 的各种构造函数吗其实1. GridView 默认构造函数可以类比于 ListView 默认构造函数适用于有限个数子元素的场景因为 GridView 组件会一次性全部渲染 children 中的子元素组件2. GridView.builder 构造函数可以类比于 ListView.builder 构造函数适用于长列表的场景因为 GridView 组件会根据子元素是否出现在屏幕内而动态创建销毁减少内存消耗更高效渲染3. GridView.count 构造函数是 GrdiView 使用 SliverGridDelegateWithFixedCrossAxisCount的简写语法糖效果完全一致4. GridView.extent 构造函数式 GridView 使用 SliverGridDelegateWithMaxCrossAxisExtent的简写语法糖效果完全一致。先来看一个简单的例子它使用到 GridView.count 构造函数模仿美团外卖首页服务列表服务菜单项的代码可以看这里也算是对基础组件使用的进一步巩固代码GridView.count(
crossAxisCount: 5,
padding: EdgeInsets.symmetric(vertical: 0),
children: serviceList.map((item) ServiceItem(data: item)).toList(),
)
/*************/
/* 完全等同于 */
/************/
GridView(
padding: EdgeInsets.symmetric(vertical: 0),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5,
),
children: serviceList.map((item) ServiceItem(data: item)).toList(),
)预览再来看一个模仿喜马拉雅中相声列表用到 GridView.builder 创建网格布局的具体例子相声卡片的代码可以看这里代码文件地址GridView.builder(
shrinkWrap: true,
itemCount: programmeList.length,
physics: NeverScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: 16),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.7,
),
itemBuilder: (context, index) {
return Programme(data: programmeList[index]);
},
)预览4. 总结本文先是介绍了 GridView 组件的属性含义并着重讲解了liverGridDelegateWithFixedCrossAxisCount 和SliverGridDelegateWithMaxCrossAxisExtent 分别适用的应用场景。然后通过两个实际的应用例子介绍了 GridView 组件常用的构造函数使用方法。希望通过本文的介绍你可以掌握 Flutter 中网格型布局的使用~了解更多Flutter知识推荐点击这里。
