Flutter 小技巧之 Row/Column 即将支持 Flex.spacing

embedded/2024/10/21 3:49:06/

事实上这是一个相当久远的话题,如果对于前因后果不管兴趣,直接看最后就行。

这个需求最早提及应该是 2018 年初在 #16957 被人提起,因为在 Flutter 上 WraprunSpacingspacing 用于配置垂直和水平间距,而为什么 ColumRow 这样更通用的控件居然没有 spacing 支持?

而后在 2020 年,Flutter 在 #55378 用户希望再一次推进 Row/Column 内置 spacing 的实现,但后续从 PM 的角度却认为,这并不是一个很急需的功能,并且正常情况下通过额外的实现也可以做到类似需求,而通过增加 Flex 的复杂度来内置这种“非必需”的 spacing 完全没必要。

事实上 ColumRow 一开始缺乏 spacing 相关配置并非 Flutter 特例,早期 Jetpack Compose 同样缺少 itemSpacing ,只是四年前 Jetpack Compose 通过了用户的提议,后续才有了 Arrangement.spacedBy 的相关支持,而这也成为了 Flutter 在 Row/Column 同样需要内置 spacing 的有力佐证。

另外后续用户的指出,目前众多 UI 框架上只有极少数的 Row/Column 没有内置 spacing , 甚至曾经没有的 Jetpack Compose 都提供了,这时候 Flutter 拒绝内置这样一个「实现并不困难」的功能并不理智,所以官方开始松口。

而在 TahaTesser 的坚持努力下,最后这个需求终于被合并了,而事实上在 Flex 上直接支持 spacing 确实侵入性很强,因为它确确实实要侵入性到底层的通用代码。

相信作为程序员大多应该都能衡量,如果因为这样一个 spacing 修改,导致一个大量使用的业务代码可能出现问题,那后果绝对是难以接受的,不得不说 TahaTesser 很头铁,正常人应该都不愿意接这个锅。

而从调整的结果看,核心就是根据主轴布局增加了 spacing 的支持,最终体现在 childMainPosition 上,落地后的改动量其实并不大,所以最终也被成功合并,风险评估不高。

最后,前面扯了那么多,对于大多数开发者,其实就是通过 main 分支,现在可以通过 spacing 属性配置 Row/Column 的 child 间距,另外 #78200 对于 PageView 增加参数指定页面之间的边距的 issue 也被提了出来。

从目前来看,这对于 Flutter 开发者来说是好事,大概下一个 stable 版本应该就可以在 Row/Column 用上了 spacing 了,同时可以看到,只要能提出有力的证据,还是可以推动一些「必要的功能」,当然可能还需要有一个头铁的「哥们」。

		const Column(spacing: 20.0,children: <Widget>[Row(spacing: 50.0,mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[ColoredBox(color: Color(0xffff0000),child: SizedBox(width: 50.0,height: 75.0,child: Center(child: Text('RED',style: TextStyle(color: Colors.white),),),),),ColoredBox(color: Color(0xff00ff00),child: SizedBox(width: 50.0,height: 75.0,child: Center(child: Text('GREEN',style: TextStyle(color: Colors.black),),),),),],),Row(spacing: 100.0,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[ColoredBox(color: Color(0xffff0000),child: SizedBox(width: 50.0,height: 75.0,child: Center(child: Text('RED',style: TextStyle(color: Colors.white),),),),),ColoredBox(color: Color(0xff00ff00),child: SizedBox(width: 50.0,height: 75.0,child: Center(child: Text('GREEN',style: TextStyle(color: Colors.black),),),),),],),],)


http://www.ppmy.cn/embedded/108864.html

相关文章

git为不同的项目设置不同的提交作者

方法1&#xff1a;找到项目的.git文件夹打开 打开config在下面添加自己作者信息 [user]name 作者名email 邮箱方法2&#xff1a;直接在.git文件夹设置作者名&#xff08;不使用–global参数&#xff09; git config user.name "xxxxx"如果想要修改之前提交的…

2.软件生命周期及流程(包含笔试/面试题)

一、软件生命周期 1.什么是软件的生命周期&#xff1f; 软件生命周期就是软件从开始研发到最终被废弃不用的一整个过程。 二、软件生命周期模型 1.瀑布型生命周期模型&#xff08;基本不用这个模型&#xff09; 最早期的模型&#xff0c;流程是从上而下的&#xff0c;如同瀑布流…

鸿蒙轻内核M核源码分析系列七 动态内存Dynamic Memory

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 轻内核M核源码分析系列一 数据结构-双向循环链表 轻内核M核源码分析系列二 数据结构-任务就绪队列 鸿蒙轻内核M核源码分析系列三 数据结构-任务排序链表 轻…

NAT技术+代理服务器+内网穿透

NAT技术 IPv4协议中&#xff0c;会存在IP地址数量不充足的问题&#xff0c;所以不同的子网中会存在相同IP地址的主机。那么就可以理解为私有网络的IP地址并不是唯一对应的&#xff0c;而公网中的IP地址都是唯一的&#xff0c;所以NAT&#xff08;Network Address Translation&…

人生苦短我用Python pandas文件格式转换

人生苦短我用Python pandas文件格式转换 前言示例1 excel与csv互转常用格式的方法Flat fileExcelJSONXML 示例2 常用格式转换简要需求依赖export方法main方法 附其它格式的方法HTMLPicklingClipboardLatexHDFStore: PyTables (HDF5)FeatherParquetORCSASSPSSSQLGoogle BigQuery…

Apache DolphinScheduler在Cisco Webex的应用与优化实践

引言 我叫李庆旺&#xff0c;是Cisco Webex的一名软件工程师&#xff0c;同时也是Apache DolphinScheduler&#xff08;以下简称DS&#xff09;的Committer。 在过去的两年里&#xff0c;公司基于Apache DolphinScheduler进行了多项持续改进和创新&#xff0c;以更好地适应我们…

Android Fragment 学习备忘

1.fragment的动态添加与管理&#xff0c;fragment生命周期在后面小节&#xff1a;https://www.bilibili.com/video/BV1Ng411K7YP/?p37&share_sourcecopy_web&vd_source982a7a7c05972157e8972c41b546f9e4https://www.bilibili.com/video/BV1Ng411K7YP/?p37&share_…

Fabric.js全面介绍:强大的交互式图形编辑框架

在前端开发中&#xff0c;图形界面的创建与编辑一直是开发者们关注的重点。随着Web技术的不断发展&#xff0c;HTML5 Canvas 提供了一个强大的画布功能&#xff0c;然而其API相对低级&#xff0c;操作复杂图形和高级交互时显得力不从心。这时&#xff0c;Fabric.js 应运而生&am…