HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第77天，改善布局性能。
HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第77天，改善布局性能。
改善布局性能
Flex为采用弹性布局的容器。容器内部的所有子元素，会自动参与弹性布局。子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸。
在单行布局场景下，容器里子组件的主轴尺寸长度总和可能存在不等于容器主轴尺寸长度的情况。例如，三个子组件的宽均为200px，容器宽为500px，
当第一个子组件和第二个子组件布局完成后，为了显示第三个子组件，需要给第二个子组件和第三个子组件设置压缩属性flexShrink，此时第二个子组件会被再布局一次，
导致布局效率下降。
场景一
所有子组件未设置displayPriority属性（或displayPriority设置为默认值1）和layoutWeight属性（或layoutWeight设置为默认值0）时，所有子组件先按序布局一次。
-
第一次布局子组件主轴尺寸长度总和等于容器主轴尺寸长度，不需要二次布局。
-
第一次布局子组件主轴尺寸长度总和小于容器主轴尺寸长度，且包含设置有效的
flexGrow属性的子组件，设置有效的flexGrow属性的子组件会触发二次布局，拉伸布局填满容器。 -
第一次布局子组件主轴尺寸长度总和大于容器主轴尺寸长度，且包含设置有效的
flexShrink属性（flex子组件默认值为1，为有效值）的子组件，设置有效的flexShrink属性的子组件会触发二次布局，压缩布局填满容器。
场景二
子组件存在设置displayPriority属性，不存在设置layoutWeight属性。
根据displayPriority从大到小顺序，布局每组同displayPriority值的子组件，直到子组件主轴尺寸长度总和最大且不超过容器主轴尺寸长度，舍弃未布局的低优先级displayPriority（可能存在一组临界displayPriority值的子组件布局但未使用的情况）。
-
第一次布局子组件主轴尺寸长度总和等于容器主轴尺寸长度，不需要二次布局。
-
第一次布局子组件主轴尺寸长度总和小于容器主轴尺寸长度，且包含设置有效的
flexGrow属性的子组件，设置有效的flexGrow属性的子组件会触发二次布局，拉伸布局填满容器。
场景三
子组件中存在设置layoutWeight属性。
根据displayPriority从大到小顺序，对设置displayPriority相同值的子组件且不设置layoutWeight属性的子组件进行布局，直到子组件主轴尺寸长度的总和最大且不超过容器主轴尺寸长度。如果子组件主轴尺寸长度的总和超过了容器主轴尺寸长度，舍弃未布局的低优先级displayPriority，可能存在一组临界displayPriority值的子组件布局但未使用的情况。
剩余空间按设置layoutWeight属性的子组件的layoutWeight比例填满容器。
- 两次遍历都只布局一次组件，不会触发二次布局。
如何优化Flex的布局性能
- 使用Column/Row代替Flex。
- 大小不需要变更的子组件主动设置
flexShrink属性值为0。 - 优先使用
layoutWeight属性替代flexGrow属性和flexShrink属性。 - 子组件主轴长度分配设置为最常用场景的布局结果，使子组件主轴长度总和等于Flex容器主轴长度。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第77天，改善布局性能。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，ArkTS语言是一种基于TypeScript的开发语言，专为鸿蒙系统设计。改善布局性能是开发高效应用的关键之一。以下是一些在ArkTS中优化布局性能的常见方法：
-
使用Flex布局：Flex布局是鸿蒙系统中推荐的布局方式，能够有效减少嵌套层次，提升渲染性能。
-
避免过度嵌套：减少布局的嵌套层次可以显著提升性能，建议使用
Stack、Column、Row等布局组件时，尽量减少不必要的嵌套。 -
使用
LazyForEach：对于列表或网格布局，使用LazyForEach可以延迟加载列表项，减少初始渲染时的性能开销。 -
优化组件重用：通过
@Component装饰器创建的组件应尽量设计为可重用的，减少重复代码和内存占用。 -
减少不必要的状态更新：使用
@State、@Prop、@Link等状态管理装饰器时，确保只在必要时更新状态，避免不必要的UI重绘。 -
使用
if和show条件渲染：根据条件动态显示或隐藏组件时，使用if语句或show属性，可以减少不必要的渲染。 -
优化图片资源：使用合适尺寸和格式的图片资源，避免加载过大的图片，提升布局渲染速度。
-
使用
@Watch监听器：在必要时使用@Watch装饰器监听状态变化，避免频繁触发不必要的回调。
通过以上方法，可以在ArkTS中有效改善布局性能，提升应用的整体流畅度。
更多关于HarmonyOS 鸿蒙Next ArkTS语言教程入门学习第77天，改善布局性能。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
第77天学习重点：改善布局性能。在ArkTS中，优化布局性能的关键在于减少不必要的重绘和布局计算。使用Flex布局时，避免嵌套过多容器，尽量使用Column和Row进行简单布局。对于复杂布局，考虑使用List或Grid组件，它们支持懒加载，减少内存消耗。此外，避免在onClick等事件中频繁更新UI，可以通过State管理状态，减少不必要的UI更新。通过这些优化，可以显著提升应用性能。
