【 Flutter 布局探索】第五本小册上线

一、 Flutter 探索系列的蓝图

现在 Flutter 小册又多了一位成员,这是对 Flutter 而言至关重要的一个探索模块 --- 布局 。五本小册的创作历程,也是我本人对 Flutter 框架深入探索的过程。其中经历了很多困难,也得到了很多收获。


想当初只是为了好玩,写了一本 《妙笔生花》 ,并没有料想到会一步步发展到现在的局面。到现在,五本小册的问世,已经勾勒出深入理解 Flutter 的雏形,也为全面认识 Flutter 打下了一个坚实的基础。最后还剩下 最困难最简单 两个 最难写 的部分, 就可以完成 七剑合璧 了。

让没有编程基础的人也能摆正对 Flutter 认知的 思想级启蒙 读物 ---- Flutter 语言基础 - 梦始之地 ;对 Flutter 世界框架层运行原理的探索 ---- Flutter 渲染机制 - 聚沙成塔 。当你看完 渲染机制 的小册,再回到 梦始之地 ,你会体会到一路的成长,和当初稚嫩懵懂的美好,这个循环就算我想锻造的东西。


这七剑表面上是对 Flutter 世界的揭秘,但本质上是一种探索的精神、思考的过程、对未知挑战的具象化。没有谁是一下就能认清原理的,但通过调试、通过分析,一点点地梳理,总能拨开云雾,站在更高的境界去审视整个世界。别人可以教会你知识,但境界是自身对世界的认知程度,只取决于你的思想。

我这个人并不喜欢说教,别人怎么样其实跟我也没什么太大的关系。世界这么大,总会有自甘堕落的可怜人,总会有无知无畏的杠精,总会有恃才傲物的娇子,总会有固步自封的顽固派,总会有好吃懒做还想一步登天的梦幻者,总会有迫于生存备受压迫的行路人。

我不能站在他人的成长环境去理解他们的思维,所以不想对任何人的生存方式指指点点。比如作为音乐家你深知音乐的魅力,就想让所有人都学习乐理,懂得音乐,都成为音乐家。殊不知,并不是所有人都可以活在高雅之中。有些人为了生存拼尽全力,在他疲累之时,与其让他学习乐理,不如为他奏上一曲,舒缓紧绷的思绪。

想将自己认为美好强行施加给别人,这种思想偏激是很危险的行为。无法站在别人生存环境中的指点,就是 “何不食肉糜?” 的真实体现。所以,我并不能强求所有人都能去探索源码,都对 Flutter 有很深的理解。虽然理解原理是最好的,就像肉好吃一样,但并不是任何人都能吃到。

我所能做的,是尽自己所能,在这片海域中,搭建一座桥;你走与不走,是否要在我指出的路上开辟自己的道路,都是自己的自由。至于我为什么做要这些,那就是在 Flutter 道路上的行者奏上一曲吧。


二、 布局小册介绍

布局的重要性不言而喻,如果把 界面搭建 比作 盖房子,布局就是钢筋水泥,它是支撑界面呈现的 根基。 如果把 界面搭建 比作 征战沙场,布局就是 调兵遣将,呈现特定的阵型。 对于 Flutter 中的一块布局而言,最核心的有三个要点,是本册探索的核心:

1.我需要控制 [自身区域] 有多大 --- Size
2.我需要限制 [子级区域] 的范围 --- BoxConstraints
3.我需要确定 [子级区域] 偏移量 --- Offset
复制代码

对于布局来说,明面上是 Widgets 层的事,但暗地里组件布局特性本质上渲染对象 所决定的。组件只是个 属性搬运工 而已。对源码中布局流程的了解,在一定程度上也能透过表象的 Widget,站在更高的视角去审视 渲染对象 的作用,从而对 Flutter 框架有更深的认知。


三、 本册内容简介

模块一:让大家感知盒约束的存在,并认知布局的特点。 这块是比较轻松的引子,会结合一些案例,从盒约束的角度去解释看似不合理的尺寸现象,以及对布局结构有基本的认知。

模块二:初步了解常用布局组件特点和演练。 这块会选取常用的布局组件,从属性的解读去分析它们的布局特性,最后会结合几个案例进行演练。

模块三:从源码的角度去探索组件布局特性 。 到这里,将进入硬核的下半篇章。通过对布局组件源码的分析,从根本上去认识各布局组件内部约束传递、尺寸确定、偏移设置的实现。

模块四:自定义布局组件和总结篇。 这块将介绍通过 CustomSingleChildLayoutCustomMultiChildLayoutFlow 组件自定义布局的方法,以及如何通过 Overlay 组件实现浮动层。通过这部分的学习,你可以更自由的控制布局,而不只拘泥于 Flutter 提供的布局组件。最后,会对本册进行一个总结。

最后:由于纯手工码字以及认知的局限性,如果本册内容上有什么错误疑问错别字修改建议,可在评论区指正,或直接联系我进行探讨 ~


Flutter 布局的源码探索让我收获良多,也希望我眼中所见的光景,可以通过这本小册传达给更多人,让你也可以立于布局体系之上去见识 Flutter 世界的风采。谢谢大家一直以来的支持 ~

猜你喜欢

转载自juejin.im/post/7080815937003192351