27 | 如何用 Flexbox 思路开发?跟自动布局比,Flexbox 好在哪?
戴铭
该思维导图由 AI 生成,仅供参考
你好,我是戴铭。今天,我要和你跟你聊聊 Flexbox。
你很有可能不知道 Flexbox 是啥,但一定不会对 React Native、Weex 和 Texture(AsyncDisplayKit) 感到陌生,而 Flexbox 就是这些知名布局库采用的布局思路。不可小觑的是,苹果公司官方的 UIStackView,也是采用 Flexbox 思路来实现布局的。
接下来,我们就一起来看看 Flexbox 布局思路有什么优势,以及如何用它来实现布局。
Flexbox 好在哪?
目前来看,iOS 系统提供的布局方式有两种:
一种是 Frame 这种原始方式,也就是通过设置横纵坐标和宽高来确定布局。
另一种是自动布局(Auto Layout),相比较于 Frame 需要指出每个视图的精确位置,自动布局对于视图位置的描述更加简洁和易读,只需要确定两个视图之间的关系就能够确定布局。
通过 Masonry和 SnapKit这些第三方库,自动布局的易用性也有了很大提升。而且 iOS 12 以后,苹果公司也已经解决了自动布局在性能方面的问题(这里,你可以再回顾下前面第 4 篇文章《Auto Layout 是怎么进行自动布局的,性能如何?》中的相关内容)。
那么在这种情况下,我们为什么还要关注其他布局思路呢?关于原因,我觉得主要包括以下两个方面。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Flexbox是一种灵活的布局思路,被广泛应用于React Native、Weex和Texture等知名布局库中。相比iOS系统提供的Frame和自动布局方式,Flexbox提供了更多、更规范的布局方法,更易于使用。其主要思想是通过Flex容器设定的属性来改变内部Flex项目的宽、高,并调整项目的位置来填充容器的可用空间。Texture框架的布局方案考虑得十分长远,提供了多种布局思路,并通过ASLayoutSpec的子类实现了各种布局思路。其中,ASStackLayoutSpec是应用最广泛的子类之一,其布局思路和Flexbox类似,可以通过示例代码了解如何通过Texture使用Flexbox布局思路开发界面。Flexbox的算法设计也是值得深入了解的,了解其布局算法设计可以更好地理解Flexbox布局,同时也有助于设计适合自身业务场景的布局算法。随着新硬件的不断推出,如手表和折叠屏手机,掌握更多的布局算法将变得更加重要。Flexbox的应用不仅限于React Native和Weex,Yoga库为许多其他开源框架提供支持,且可以方便地集成到Android和iOS上。整体而言,Flexbox的灵活性和适用性使其成为一种值得关注和学习的布局思路。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《iOS 开发高手课》,新⼈⾸单¥59
《iOS 开发高手课》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(14)
- 最新
- 精选
- 豆豆斗地主老师您好 请问在实际开发中 是否以删除 storyboard的方式进行开发?
作者回复: 可以的
2019-05-13 - Jeffrey肯定frame效率高2019-05-118
- K以下是个人理解,如有问题请指正,谢谢。 yoga是对frame的封装,内部实现了Flexbox算法(理念),texture是对yoga的封装,增加了异步渲染等。 性能上,由于frame是线性的,所以yoga和texture也应该是线性的,或者更优。而autolayout属于指数级的,这可能跟两者算法有关。所以,在使用上,在简单的布局页面或者性能要求不高的页面可以直接使用autolayout。相反,性能要求高的页面,可以选择frame, texture, yoga.2019-05-1836
- Zreact native 里面的布局确实比较好用,比原生节省了开发效率2019-05-1415
- powerGuo作者的怎么看flexlib这个库,我已经在我自己开始使用了,就是把flexbox编写的xml通过解析转换成Yoga的iOS原布局2020-02-083
- 最强小鲁班UIStackView真的巨好用2019-10-3022
- Geek_2844bdTexture和frame对比,性能如何?2019-05-112
- lvv推荐一下我基于 Facebook 的 yoga 修改的版本,支持 iOS macOS tvOS 项目地址:https://github.com/cntrump/yoga2020-05-011
- Geek_8e8cbf那现阶段想在iOS中使用Flexbox布局,是用Yoga,还是Texture呢?2019-05-1121
- ...flexbox相比自动布局的具体好处是?(除了前端生态之外的)2021-09-04
收起评论