
HarmonyOS NEXT应用元服务布局优化合理使用渲染控制语法
合理控制元素显示与隐藏
控制元素显示与隐藏是一种常见的场景,使用Visibility.None、if条件判断等都能够实现该效果。其中if条件判断控制的是组件的创建、布局阶段,visibility属性控制的是元素在布局阶段是否参与布局渲染。使用时如果使用的方式不当,将引起性能上的问题。
对于不同的场景下,需要选择合适的手段,根据性能或者内存要求选择不同的实现方式:
只有初始的一次渲染或者交互次数很少的情况下,建议使用if条件判断来控制元素的显示与隐藏效果,对于内存有较大提升。
如果会频繁响应显示与隐藏的交互效果,建议使用切换Visibility.None和Visibility.Visible来控制元素显示与隐藏,提高性能。
通过对一个复杂的视图结构,例如以下示例代码中,对包含100个Image组件控制。的Column容器进行显示与隐藏控制,分别采用if条件判断和visibility属性的方式进行
Row() {
Text("Hello World")
if(this.visible) {
Column() {
... // 100个Image组件
}
}
通过visibility属性控制的示例码代如下:
Row() {
Text("Hello World")
Column() {
... // 100个Image组件
}.visibility(this.visible?Visibility.Visible:Visibility.None)
}
在相同的测试环境下,分别测试在初次加载页面,以及改变状态变量this.visible的值来修改显示隐藏的情况下,通过Profiler工具抓取的布局时Measure、Layout以及组件创建的时长。
在初次加载的情况下的测试结果如下:
说明
以上数据来源均为版本DevEco Studio 4.0.3.415、SDK 4.0.10.9条件下测试得到,不同设备类型数据可能存在差异,测试数据旨在体现性能优化趋势,仅供参考。
通过以上数据可以发现:
通过if条件判断控制显示与隐藏的方式:
对比判断值为true和false时,初次加载过程中Measure、Layout时间明显存在区别,并且从组件创建时间可以判断,加载时会根据初始值判断是否创建对应组件内容。
当条件为false时,对应的组件内容不参与创建、Measure和Layout阶段。
通过visibility控制显示与隐藏的方式:
在初次加载时,无论visibility的值为Visibility.None还是Visibility.Visible都会创建对应组件内容。
visibility属性控制的是Measure和Layout阶段,当visibility属性为Visibility.None时,对应的组件不参与Layout。
说明
以上数据来源均为版本DevEco Studio 4.0.3.415、SDK 4.0.10.9条件下测试得到,不同设备类型数据可能存在差异,测试数据旨在体现性能优化趋势,仅供参考。
在切换显示状态的情况下:
使用if条件判断切换显示时,组件会因为条件改变而判断是否参与创建、布局过程,切换过程会出现较大的Measure的性能消耗,原因是创建了新的组件,重新进行了Measure和Layout的过程。
使用visibility的情况下,无论是否隐藏,组件在初次已经创建完成,并一直都存在组件树上,不会出现组件重新创建的过程,并且在Measure和Layout阶段的性能消耗比使用if/else的方式性能小很多,原因是组件的计算在首帧时已经计算过,不需要重复计算。
综上所述,在控制组件显示与隐藏时,建议遵循以下原则来选择使用控制方式:
在对性能要求较高,并且会频繁切换元素的显示与隐藏的情况下,应该避免使用if条件判断,而改为通过visibility的属性控制,这样在切换Visibility.None和Visibility.Visible时,可以省去组件创建的时间,直接进入渲染过程。
如果组件的创建非常消耗资源,且不会立即使用,也并非频繁切换交互的情况下,只在特定条件下才会出现时,可以通过if/else来进行内容的显示与隐藏控制,来达到懒加载的效果。
本文主要引用整理于鸿蒙官方文档
