在鸿蒙中我们如果要控制一个组件的显示与隐藏可以设置组件的Visibility属性,也可使用(if…else)条件控制,具体我们该选择哪个?二者有什么区别呢?
// xxx.ets @Entry @Component struct VisibilityExample {build() {Column() {Column() {// 隐藏不参与占位Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)// 隐藏参与占位Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)// 正常显示,组件默认的显示模式Text('Visible').fontSize(9).width('90%').fontColor(0xCCCCCC)Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE)}.width('90%').border({ width: 1 })}.width('100%').margin({ top: 5 })} }
if语句的每个分支都包含一个构建函数。此类构建函数必须创建一个或多个子组件。在初始渲染时,if语句会执行构建函数,并将生成的子组件添加到其父组件中。
每当if或else if条件语句中使用的状态变量发生变化时,条件语句都会更新并重新评估新的条件值。如果条件值评估发生了变化,这意味着需要构建另一个条件分支。此时ArkUI框架将:
- 删除所有以前渲染的(早期分支的)组件。
- 执行新分支的构造函数,将生成的子组件添加到其父组件中。
通过if进行条件渲染,其作用方式是满足条件时创建、未满足条件时销毁组件:- 只有在满足条件时,组件才会被创建。 – 条件不满足时,组件会被销毁,不会挂载在组件树上。
通过visibility进行显隐控制,根据参数值,控制当前组件显示或隐藏: – 初始时,无论是否显示,组件都会被创建。 – 隐藏时,组件不会被销毁,会继续挂载在组件树上,只是状态为不可见。
1、关于if条件渲染或visibility显隐控制,实现组件的展示和隐藏状态的切换,两者的优势场景分别如下: 显隐控制的优势场景: – 如果组件动效占用较多、频繁地在展示和隐藏间切换时,建议使用显隐控制替代条件渲染,以避免组件的频繁创建与销毁,提升性能。详细使用场景,请参考《[优化布局性能](zh-cn/application-dev/performance/reduce-view-nesting-levels.md · OpenHarmony/docs – Gitee.com)》。
2、条件渲染的优势场景: – 在应用冷启动阶段,应用加载绘制首页时,如果组件初始不需要显示,建议使用条件渲染替代显隐控制,以减少渲染时间,加快启动速度。详细使用场景,请参考《[应用冷启动与加载绘制首页](zh-cn/application-dev/performance/reduce-redundant-operations-when-render-first-frame.md · OpenHarmony/docs – Gitee.com)》。
3、如果组件动效占用较少或无动效、不会较频繁地在展示和隐藏间切换,或者大部分时间不需要显示,建议使用条件渲染替代显隐控制,以减少界面复杂度、减少嵌套层次,提升性能。 – 如果被控制的组件所占内存庞大,开发者优先考虑内存时,建议使用条件渲染替代显隐控制,以即时销毁不需要显示的组件,节省内存。
4、针对反复切换条件渲染的控制分支的情况,且控制分支中的组件子树结构比较复杂,建议使用组件复用机制,提升应用性能。详细使用场景,请参考《[组件复用实践](zh-cn/application-dev/performance/component-recycle.md · OpenHarmony/docs – Gitee.com)》。
5、针对反复切换条件渲染的控制分支,但切换项仅涉及页面中少部分组件的情况,建议精准控制组件更新的范围,例如使用容器限制刷新范围,提升应用性能。详细使用场景,请参考《[提升应用响应速度](zh-cn/application-dev/performance/improve-application-response.md · OpenHarmony/docs – Gitee.com)》。
参考:华为开发者问答 | 华为开发者联盟