鸿蒙跨端实践-布局方案介绍

💡 原文中文,约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宽度、尺寸来源、比例占据空间等。
  • 动态化是一个综合解决方案,涉及多个技术领域,欢迎交流。
➡️

继续阅读