HarmonyOS ArkTS 渲染控制概述 if/else:条件渲染

ArkUI通过自定义组件的build()函数和@builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外,还可以使用渲染控制语句来辅助UI的构建,这些渲染控制语句包括控制组件是否显示的条件渲染语句,基于数组数据快速生成组件的循环渲染语句以及针对大数据量场景的数据懒加载语句

if/else:条件渲染

ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和else if渲染对应状态下的UI内容。

使用规则

  • 支持if、else和else if语句。
  • if、else if后跟随的条件语句可以使用状态变量。
  • 允许在容器组件内使用,通过条件渲染语句构建不同的子组件。
  • 条件渲染语句在涉及到组件的父子关系时是“透明”的,当父组件和子组件之间存在一个或多个if语句时,必须遵守父组件关于子组件使用的规则。
  • 每个分支内部的构建函数必须遵循构建函数的规则,并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。
  • 某些容器组件限制子组件的类型或数量,将条件渲染语句用于这些组件内时,这些限制将同样应用于条件渲染语句内创建的组件。例如,Grid容器组件的子组件仅支持GridItem组件,在Grid内使用条件渲染语句时,条件渲染语句内仅允许使用GridItem组件。

更新机制

当if、else if后跟随的状态判断中使用的状态变量值变化时,条件渲染语句会进行更新,更新步骤如下:

  1. 评估if和else if的状态判断条件,如果分支没有变化,无需执行以下步骤。如果分支有变化,则执行2、3步骤:
  2. 删除此前构建的所有子组件。
  3. 执行新分支的构造函数,将获取到的组件添加到if父容器中。如果缺少适用的else分支,则不构建任何内容。

条件可以包括Typescript表达式。对于构造函数中的表达式,此类表达式不得更改应用程序状态。

使用if进行条件渲染

@Entry
@Component
struct ViewA {@State count: number = 0;build() {Column() {Text(`count=${this.count}`)if (this.count > 0) {Text(`count is positive`).fontColor(Color.Green)}Button('increase count').onClick(() => {this.count++;})Button('decrease count').onClick(() => {this.count--;})}}
}

if语句的每个分支都包含一个构建函数。此类构建函数必须创建一个或多个子组件。在初始渲染时,if语句会执行构建函数,并将生成的子组件添加到其父组件中。

每当if或else if条件语句中使用的状态变量发生变化时,条件语句都会更新并重新评估新的条件值。如果条件值评估发生了变化,这意味着需要构建另一个条件分支。此时ArkUI框架将:

1、删除所有以前渲染的(早期分支的)组件。
2、执行新分支的构造函数,将生成的子组件添加到其父组件中。

在以上示例中,如果count从0增加到1,那么if语句更新,条件count > 0将重新评估,评估结果将从false更改为true。因此,将执行条件为真分支的构造函数,创建一个Text组件,并将它添加到父组件Column中。如果后续count更改为0,则Text组件将从Column组件中删除。由于没有else分支,因此不会执行新的构造函数。

if … else …语句和子组件状态

以下示例包含if … else …语句与拥有@State装饰变量的子组件。

@Component
struct CounterView {@State counter: number = 0;label: string = 'unknown';build() {Row() {Text(`${this.label}`)Button(`counter ${this.counter} +1`).onClick(() => {this.counter += 1;})}}
}@Entry
@Component
struct MainView {@State toggle: boolean = true;build() {Column() {if (this.toggle) {CounterView({ label: 'CounterView #positive' })} else {CounterView({ label: 'CounterView #negative' })}Button(`toggle ${this.toggle}`).onClick(() => {this.toggle = !this.toggle;})}}
}

CounterView(label为 ‘CounterView #positive’)子组件在初次渲染时创建。此子组件携带名为counter的状态变量。当修改CounterView.counter状态变量时,CounterView(label为 ‘CounterView #positive’)子组件重新渲染时并保留状态变量值。当MainView.toggle状态变量的值更改为false时,MainView父组件内的if语句将更新,随后将删除CounterView(label为 ‘CounterView #positive’)子组件。与此同时,将创建新的CounterView(label为 ‘CounterView #negative’)实例。而它自己的counter状态变量设置为初始值0。

说明
CounterView(label为 ‘CounterView #positive’)和CounterView(label为 ‘CounterView #negative’)是同一自定义组件的两个不同实例。if分支的更改,不会更新现有子组件,也不会保留状态。

以下示例展示了条件更改时,若需要保留counter值所做的修改。

@Component
struct CounterView {@Link counter: number;label: string = 'unknown';build() {Row() {Text(`${this.label}`)Button(`counter ${this.counter} +1`).onClick(() => {this.counter += 1;})}}
}@Entry
@Component
struct MainView {@State toggle: boolean = true;@State counter: number = 0;build() {Column() {if (this.toggle) {CounterView({ counter: $counter, label: 'CounterView #positive' })} else {CounterView({ counter: $counter, label: 'CounterView #negative' })}Button(`toggle ${this.toggle}`).onClick(() => {this.toggle = !this.toggle;})}}
}

此处,@State counter变量归父组件所有。因此,当CounterView组件实例被删除时,该变量不会被销毁。CounterView组件通过@Link装饰器引用状态。状态必须从子级移动到其父级(或父级的父级),以避免在条件内容或重复内容被销毁时丢失状态。

嵌套if语句

条件语句的嵌套对父组件的相关规则没有影响。

@Entry
@Component
struct CompA {@State toggle: boolean = false;@State toggleColor: boolean = false;build() {Column() {Text('Before').fontSize(15)if (this.toggle) {Text('Top True, positive 1 top').backgroundColor('#aaffaa').fontSize(20)// 内部if语句if (this.toggleColor) {Text('Top True, Nested True, positive COLOR  Nested ').backgroundColor('#00aaaa').fontSize(15)} else {Text('Top True, Nested False, Negative COLOR  Nested ').backgroundColor('#aaaaff').fontSize(15)}} else {Text('Top false, negative top level').fontSize(20).backgroundColor('#ffaaaa')if (this.toggleColor) {Text('positive COLOR  Nested ').backgroundColor('#00aaaa').fontSize(15)} else {Text('Negative COLOR  Nested ').backgroundColor('#aaaaff').fontSize(15)}}Text('After').fontSize(15)Button('Toggle Outer').onClick(() => {this.toggle = !this.toggle;})Button('Toggle Inner').onClick(() => {this.toggleColor = !this.toggleColor;})}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/748926.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】二叉树OJ题(C语言实现)

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ 🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿🌿&#x1…

【C#】int+null=null

C#语法,这玩意不报错 intnullnull,有点不合逻辑 (Int32)(bizRepair0rder.CreateTime. Value - regues.Mlodifylime.Value).TotalMinutes (Int32)(bizRepair0rder.CreateTime. Value - reques.llodifylime.Value).TotalMinutes nullstring是引用类型&…

机器学习-04-分类算法-03KNN算法

总结 本系列是机器学习课程的系列课程,主要介绍机器学习中分类算法,本篇为分类算法与knn算法部分。 本门课程的目标 完成一个特定行业的算法应用全过程: 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化…

冲动是魔鬼,工作不顺心时不要把坏脾气带给家人

今天与一个跟踪了很久的客户准备签合同了,客户突然反悔,为此与他周旋了一整天,忙碌得一口水都没有喝。回到小区坐在车里抽着烟,久久不愿回家,只想一个人坐着,疲惫、无奈。这个月的奖金似乎又将成为泡影。 …

AI - 决策树模型

🤔决策树算法 决策树的思想来源可以追溯到古希腊时期,当时的哲学家们就已经开始使用类似于决策树的图形来表示逻辑推理过程。然而,决策树作为一种科学的决策分析工具,其发展主要发生在20世纪。 在20世纪50年代,美国兰…

Machine Vision Technology:Lecture5 Local feature:Corners角点

Machine Vision Technology:Lecture5 Local feature:Corners角点 Motivation:panorama stitching全景图拼接提取良好特征Feature points applications特征点应用Finding Corners找角点Corner Detection:Basic Idea角点检测基本思想…

BeanPostProcessor子类中无法使用@GrpcClient或者@Autowired注入普通bean

BeanPostProcessor子类中无法使用GrpcClient或者Autowired注入普通bean 原因分析: 在Spring框架中,BeanPostProcessor 是一种特殊的bean,它的主要职责是在容器标准初始化流程前后对其他bean进行额外的预处理或后处理。BeanPostProcessor 的…

【数据结构和算法初阶(C语言)】队列实操(概念实现+oj题目栈和队列的双向实现以及循环链表难点题目详解!)

目录 1. 队列的概念及结构 2.队列结构存在的意义应用 3.队列实现的结构选择 4.队列实现 5.队列对数据的处理 5.1队列初始化 5.2队尾入数据 5.3队头出数据 5.4获取队列尾部元素 5.5获取队列头部元素 5.6获取队列中元素个数 5.7检测队列是否为空 5.8销毁队列 6.循环队列补充 7.使…

什么是分布式锁,分布式锁的几种实现方式

锁存在的意义: 原因其实很简单:因为我们想让同一时刻只有一个线程在执行某段代码。 因为如果同时出现多个线程去执行,可能会带来我们不想要的结果,可能是数据错误,也可能是服务宕机等等。 例如:某平台做活…

【AcWing】蓝桥杯集训每日一题Day5|归并排序|离散化|二分|逆序数对|505.火柴排队(C++)

火柴排队 505. 火柴排队 - AcWing题库难度:中等时/空限制:1s / 128MB总通过数:2058总尝试数:4484来源:NOIP2013提高组算法标签贪心离散化树状数组归并排序 题目内容 涵涵有两盒火柴,每盒装有 n 根火柴…

广度优先算法(一篇文章讲透)

目录 引言 一、算法概述 二、算法步骤 1 初始化 2 循环处理 三、算法应用 1 图的最短路径问题 2 网络爬虫 3 社交网络分析 4 游戏路径搜索 事例 四、算法特点与性能 五、性能优化 1 剪枝策略: 2 使用高效的数据结构: 3 并行化处理&#…

qt vs 编程 字符编码 程序从源码到编译到显示过程中存在的字符编码及隐藏的字符编码转换

理解字符编码,请参考:unicode ucs2 utf16 utf8 ansi GBK GB2312 CSDN博客 了解windows字符显示必须了解locale概念 参考:揭密 Windows 上的各种 locale - 知乎 汉字(或者说多字节字符)的存放需求,是计算…

IDEA创建Sping项目只能勾选17和21,没有Java8?

解决办法: 替换创建项目的源 我们只知道IDEA页面创建Spring项目,其实是访问spring initializr去创建项目。故我们可以通过阿里云国服去间接创建Spring项目。将https://start.spring.io/或者http://start.springboot.io/替换为 https://start.aliyun.com/

理解数学概念——同伦和简单连通域

1. 同伦(homotopy) 1.1 homotopy[hɒməʊˈtɒpi] n. (1) <<The Oxford English Dictionary>>第二版&#xff1a; [数学专用术语&#xff0c;这个词由德语homotopie改造而来&#xff0c;(Dehn & Heegaard Analysis Situs in Encykl.d.math.Wiss.(1907) I…

修改ubuntu的子网掩码

1、找到需要修改的子网掩码所在的网卡&#xff0c;一般inet addr不是127.0.0.1的那个网卡就是我们需要修改的网卡 2、执行 sudo vim /etc/network/interfaces 在文件中&#xff0c;通常能看到如下内容&#xff1a; iface <interface> inet static address <ip_addr…

【滤波专题-第8篇】ICA降噪方法——类EMD联合ICA降噪及MATLAB代码实现(以VMD-ICA为例)

今天来介绍一种效果颇为不错的降噪方法。&#xff08;针对高频白噪声&#xff09; 上一篇文章我们讲到了FastICA方法。在现实世界的许多情况下&#xff0c;噪声往往接近高斯分布&#xff0c;而有用的信号&#xff08;如语音、图像特征等&#xff09;往往表现出非高斯的特性。F…

测试环境搭建整套大数据系统(十一:docker部署superset,无密码登录嵌入html,http改为https)

一&#xff1a;安装docker 参考文档 https://blog.csdn.net/weixin_43446246/article/details/136554243 二&#xff1a;安装superset 下载镜像。 拉取镜像&#xff08;docker pull amancevice/superset&#xff09; 查看镜像是否下载完成&#xff08;docker images&#xf…

【Unity】旋转的尽头是使用四元数让物体旋转

// 导入必要的命名空间 using System.Collections; using System.Collections.Generic; using UnityEngine;// 创建一个名为 RotateObj 的 MonoBehaviour 类&#xff0c;该类可以附加到 Unity 中的游戏对象上并控制其行为 public class RotateObj : MonoBehaviour {// Update 函…

如何检测无源晶振过驱?晶振过驱怎么办?

无源晶振(Passive Crystal Oscillator)是一种使用晶体元件来生成稳定频率的振荡器&#xff0c;它不像有源振荡器(如时钟芯片)那样需要外部电源。检测无源晶振是否过驱通常需要通过测量其输出波形和频率&#xff0c;与期望的规格进行比较。 如何检测无源晶振过驱&#xff1a; …

Linux——线程池

线程池的概念 线程池也是一种池化技术&#xff0c;可以预先申请一批线程&#xff0c;当我们后续有任务的时候就可以直接用&#xff0c;这本质上是一种空间换时间的策略。 如果有任务来的时候再创建线程&#xff0c;那成本又要提高&#xff0c;又要初始化&#xff0c;又要创建数…