在学习 Flutter 的过程中也看到一些江湖侠客们对于 Flutter 的议论。他们大多觉得 Flutter 不够友好、括号太多了,导致看起来代码非常复杂,对此呲之以鼻并以唱衰之。
当然也有一些侠客认为,不再以 xml 的方式实现结构布局且以代码逻辑来驱动和构建布局的方式对于一些审美感不高的人是一种乐于接受的方式。
所谓江湖纷杂,流派众多,也是各花入各眼。孰对孰错并无绝对之说。
而我的看法则是较为中立,应该是各取一半吧,以代码驱动构建布局确实是可以省下对于布局的搔首挠耳之苦,但对于较为复杂的结构代码驱动的形式就显得没那么游刃有余了。当然在一些特性上相对传统确实是较为便捷不可否认。
这段时间学习以来,看过一些大侠们的作品,功力不一般。大多为独立实现的作品,让我看了煞是羡慕。
不过说来惭愧我也学了一月有余,对于 Flutter 的整体认识程度还不是很高,还不能很全面的去讲解整个 Flutter 的体系。但我能做到的是将我在学习过程中我遇到的问题、踩到的坑、理解上的问题解决完后,再重新整理输出出来,以便有需要或有兴趣学的少侠们提供帮助参考。
Ok,以上就是我瞎逼逼的废话了。那么接下来就来看一看 Flutter 的视图布局吧。
01 - 视图的布局方式
简单说一下我对 Flutter 视图布局的看法,在前篇中我有提到 Flutter 是使用了 Dart 语言进行编写,所以弱化了视图编辑的部分,视图的渲染、结构、布局都通过代码逻辑来生成。在一定程度上在视图结构和逻辑的关联性是强了,但在直观布局结构方面却弱了,所以就导致在代码中会发现嵌套层次很多很深,同事也会对开发者的能力有了一些要求,当然如果有面向对象编程的经验的话,那么就上手来说问题并不大。
在 Flutter 中主要的布局方式有两种:
还有一个比较特殊的 LayoutBuilder,这个主要是构建一个可以依赖父窗口大小的 Widget 树。
此外在官方文档术语描述中将2个 Widget 嵌套关系为 Widget 下的子 Widget,这不便于一些已经学过 html 或 xml 的少侠们理解,故在此约定:
约定
在接下来的 《Flutter 视图布局》系列文章中我将 widget 下的第一级 widget 称之为 “子元素” 以便让少侠们理解。
多子类元素布局
多子类元素布局的 Widget 有10种:
每一种 Widget 所实现的布局方式都不一样,都有一个主要的实现场景,以及对子元素的展示方式。
单子类元素布局
单子类元素布局的 Widget 有18种:
每一种 Widget 都会影响其子元素最终的视图显示效果,如大小、位置、边框、背景等。
02 - 布局分篇
由于 Widget 布局的种类多达 28 + 1 种,单篇文章中无法将其一一列举说完,所以我打算将其分为多篇文章来对其进行说明。
关于单子类元素布局的 Widget,因部分只会在特定的需求场景中使用,所以这部分我可能不会太深入细说。
在整理之后,我考虑将其按如下分篇:
由于 CustomMultiChildLayout、CustomSingleChildLayout 较为相似,我将它们与 LayoutBuilder 放在一起。
此外我还考虑为了方便各位少侠小伙伴们更直观的学习和参考,我还将 Flutter 系列的 MyApp 项目同步到了 Github 上,以后如有文章更新都会将文章内的代码同步更新到 Github 的项目里。
当然,在代码中我尽量写了足够详细的注释,也是希望让少侠小伙伴们不要去猜代码,这没有意义,而是要看懂这是怎么回事,然后再去尝试修改代码运行得到结果。
有需要的小伙伴可以 clone 下来学习,但是千万不要将修改过后的代码提交到项目中,我也会考虑给项目加上修改权限。
Github 地址:
https://github.com/linxsbox/myapp.git
相关文章
感谢大家的喜欢!
欢迎 关注、留言、分享、转发、在看。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。