鸿蒙跨端实践-布局方案介绍
💡
原文中文,约7300字,阅读约需18分钟。
📝
内容提要
京东金融App在适配鸿蒙系统时发现布局不一致,决定废弃鸿蒙提供的布局方式,使用标准的Flex布局和yoga布局库。介绍了Flex布局的常用属性和列表类布局的标签,讨论了绝对布局和视图的显示和隐藏控制的方法。解决了布局问题的共性问题,并给出了布局的思路。动态化是一个综合解决方案,涉及多个领域,欢迎交流。
🎯
关键要点
- 京东金融App在适配鸿蒙系统时发现布局不一致,决定使用标准的Flex布局和yoga布局库。
- 动态化使用jue语言开发,支持Flex布局和列表类视图的标签,提升研发效率。
- 鸿蒙提供的Flex布局与W3C标准不一致,导致UI布局错乱。
- Flex布局的主要概念包括容器、项目、主轴和交叉轴。
- Flex布局的常用属性包括flex-direction、flex-wrap、justify-content、align-items等。
- 动态化提供多种列表布局标签,便于实现不同布局方式。
- 绝对布局用于固定显示于某个指定位置的子视图。
- 视图的显示和隐藏控制方法包括v-if、display、v-show、visibility等。
- 动态化在京东金融App中广泛使用,解决了许多布局相关问题。
- 布局问题分析包括item宽度、尺寸来源、比例占据空间等。
- 动态化是一个综合解决方案,涉及多个技术领域,欢迎交流。
➡️