鸿蒙UI开发快速入门 —— part12: 渲染控制
如果你对鸿蒙开发感兴趣,加入Harmony自习室吧~👇🏻👇🏻👇🏻👇🏻
扫描下面的二维码关注公众号。

1、前言
在声明式描述语句中开发者除了使用系统组件外,还可以使用渲染控制语句来辅助UI的构建,这些渲染控制语句包括控制组件是否显示的条件渲染语句,基于数组数据快速生成组件的循环渲染语句。
2、条件渲染
假设我们存在这样一个应用场景:当我们的界面在满足某种条件时,需要显示一些组件,在不满足某些条件时,不显示某些组件(比如登录注册时的错误提示)。
举例:在下面的案例中,数字为偶数时,我们需要提示一个红色的文字,否则不显示红色的文字。

此时,我们就需要用到鸿蒙提供的条件渲染。ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和else if渲染对应状态下的UI内容。
使用规则如下:
-
支持if、else和else if语句。
-
if、else if后跟随的条件语句可以使用状态变量。
-
允许在容器组件内使用,通过条件渲染语句构建不同的子组件。
-
条件渲染语句在涉及到组件的父子关系时是“透明”的,当父组件和子组件之间存在一个或多个if语句时,必须遵守父组件关于子组件使用的规则。
-
每个分支内部的构建函数必须遵循构建函数的规则,并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。
-
某些容器组件限制子组件的类型或数量,将条件渲染语句用于这些组件内时,这些限制将同样应用于条件渲染语句内创建的组件。例如,Grid容器组件的子组件仅支持GridItem组件,在Grid内使用条件渲染语句时,条件渲染语句内仅允许使用GridItem组件。
if条件渲染与我们通常写的逻辑if、else、else if保持一致。本小节中举例的使用代码如下:
@Entry@Componentstruct Index {@State num: number = 1;build() {Row() {Column({ space: 15 }) {Text(`当前数字: ${this.num}`)Button('将数字+1').onClick(() => this.num++);// 偶数if(this.num % 2 === 0) {Text('当前输入的数字是偶数!').fontColor(Color.Red)}}.width('100%')}.height('100%')}}
代码中,this.num % 2 === 0表示是偶数,在遇到偶数时,if条件成立,最终显示'当前输入的数字是偶数!'提示,否则提示消失。
3、循环渲染
ForEach接口基于数组类型数据来进行循环渲染,需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。
3.1、 接口描述
ForEach(arr: Array,itemGenerator: (item: any, index: number) => void,keyGenerator?: (item: any, index: number) => string)
arr:必填,是需要渲染的组件的数据源。
itemGenerator:必填,是组件生成函数。
keyGenerator: 可选,是键值生成函数(确定唯一性)
在ForEach循环渲染过程中,系统会为每个数组元素生成一个唯一且持久的键值,用于标识对应的组件。当这个键值变化时,ArkUI框架将视为该数组元素已被替换或修改,并会基于新的键值创建一个新的组件。
ArkUI框架对于ForEach的键值生成有一套特定的判断规则,这主要与itemGenerator函数的第二个参数index以及keyGenerator函数的第二个参数index有关,具体的键值生成规则判断逻辑如下图所示。
图1 ForEach键值生成规则

3.2、 Demo如下
我们创建一个数组,然后将数组中的内容使用Text()分别展示出来

@Entry@Componentstruct Index {@State simpleList: Array<string> = ['one', 'two', 'three', 'four', 'five'];build() {Row() {Column() {ForEach(this.simpleList, (item: string, idx: number) => {ChildItem({ 'item': `${idx+1}.${item}` } as Record<string, string>)})}.alignItems(HorizontalAlign.Start).padding(10).width('100%').height('100%')}.height('100%').backgroundColor(0xF1F3F5)}}@Componentstruct ChildItem {@Prop item: string;build() {Text(this.item).fontSize(50).margin({bottom: 10})}}
3.3、 需要注意的keyGenerator
我们如果要复写keyGenerator,一定要保证其生成的值与实际的业务是严格对应关系,否则,keyGenerator函数如果生成有重复(不同的业务场景对应相同的key),则可能导致渲染异常问题。
举例,假设我们有个列表,用于显示数组中的所有字符串,如果我们复写了keyGenerator,使用其字符串内容作为key。示意如下:

4、结语
至此,我们的“鸿蒙UI开发快速入门系列”正式结束了!
接下来,我们将围绕UI开发的一些细节做展开,例如:学习ArkUI提供的所有布局方式、学习系统的常用控件、UI动画等。
请持续关注后续“鸿蒙UI开发系列”。
如果你对鸿蒙开发感兴趣,加入Harmony自习室吧~👇🏻👇🏻👇🏻👇🏻
扫描下面的二维码关注公众号。

相关文章:
鸿蒙UI开发快速入门 —— part12: 渲染控制
如果你对鸿蒙开发感兴趣,加入Harmony自习室吧~👇🏻👇🏻👇🏻👇🏻 扫描下面的二维码关注公众号。 1、前言 在声明式描述语句中开发者除了使用系统组件外,还可…...
添加用户页面(Flask+前端+MySQL整合)
首先导入Flask库和pymysql库。Flask用于创建Web应用程序,pymysql用于连接和操作MySQL数据库。 from flask import Flask, render_template, request import pymysql创建一个Flask应用实例。__name__参数告诉Flask使用当前模块作为应用的名称。 app Flask(__name_…...
素数筛(算法篇)
算法之素数筛 素数筛 引言: 素数(质数):除了1和自己本身之外,没有任何因子的数叫做素数(质数) 朴素筛法(优化版) 概念: 朴素筛法:是直接暴力枚举2到当前判断的数x(不包括),然后看在这范围内是否存在因…...
迁移Microsoft Edge
如何将Microsoft Edge迁移到d盘?对于Microsoft Edge想必大部分人都不陌生,它是Windows操作系统的默认浏览器,存储用户的个人数据、缓存和设置等信息。有些时候,我们需要对Microsoft Edge中的数据进行数据迁移,以释放c盘…...
Maven高级理解属性
属性 在这一章节内容中,我们将学习两个内容,分别是 属性版本管理 属性中会继续解决分模块开发项目存在的问题,版本管理主要是认识下当前主流的版本定义方式。 4.1 属性 4.1.1 问题分析 讲解内容之前,我们还是先来分析问题: …...
Trilium Notes浏览器插件保存网页内容到docker私有化部署
利用Trilium浏览器插件可以很方便的把网页内容保存到Trilium,需要先在docker部署好trilium,还没有部署的可以先看这篇文章:trilium笔记私有化部署-www.88531.cn资享网 1.下载Trilium浏览器插件:https://www.npspro.cn/33462.html…...
C++ 统计二进制串中0出现的个数
描述 一个32位有符号整数,使用二进制来表示,现在要统计一下二进制串中0的个数。 示例1 输入: 11 返回值: 29 说明: 二进制00000000000000000000000000001011中有29位0 class Solution { public:/*** 代码中的…...
note-网络是怎样连接的6 请求到达服务器,响应返回浏览器
助记提要 服务器程序的结构套接字的指代方式MAC模块的接收过程IP模块的接收过程TCP模块处理连接包TCP模块处理数据包TCP模块的断开操作URI转换为实际文件路径URI调用程序Web服务器访问控制响应内容的类型 6章 请求到达服务器,响应返回浏览器 1 服务器概览 在数据…...
存储过程与函数:封装数据库逻辑的艺术(七)
引言 在上一章《事务处理》中,我们深入探讨了事务的ACID特性以及如何通过事务控制语句和隔离级别来确保数据的一致性和完整性。本章,我们将把焦点转向存储过程与函数,这是数据库系统中用于封装复杂业务逻辑和增强代码复用性的强大工具。通过…...
【复旦邱锡鹏教授《神经网络与深度学习公开课》笔记】卷积
卷积经常用在信号处理中,用于计算信号的延迟累积。假设一个信号发射器每个时刻 t t t产生一个信号 x t x_t xt,其信息的衰减率为 w k w_k wk,即在 k − 1 k-1 k−1个时间步长后,信息为原来的 w k w_k wk倍,时刻 …...
Trie字符串统计
Trie字符串统计 维护一个字符串集合,支持两种操作: I x 向集合中插入一个字符串 x;Q x 询问一个字符串在集合中出现了多少次。 共有 N个操作,所有输入的字符串总长度不超过 105,字符串仅包含小写英文字母。 输入格式…...
Kali Linux源
中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib deb-src http://mirrors.ustc.edu.cn/kali kali-rolling main non-free contrib阿里云 deb http://mirrors.aliyun.com/kali kali-rolling main non-free contrib deb-src http://mirrors.…...
【RT摩拳擦掌】基于RT106L/S语音识别的百度云控制系统
【RT摩拳擦掌】基于RT106L/S语音识别的百度云控制系统 一 文档简介二 平台构建2.1 使用平台2.2 百度智能云2.2.1 物联网核心套件2.2.2 在线语音合成 2.3 playback语音数据准备与烧录2.4 开机语音准备与添加2.5 唤醒词识别词命令准备与添加 三 代码准备3.1 sln-local/2-iot 代码…...
国标GB28181视频汇聚平台EasyCVR设备展示数量和显示条数不符的原因排查与解决
国标GB28181/GA/T1400协议/安防综合管理系统EasyCVR视频汇聚平台能在复杂的网络环境中,将前端设备统一集中接入与汇聚管理。智慧安防/视频存储/视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级…...
FastAPI教程I
本文参考FastAPI教程https://fastapi.tiangolo.com/zh/tutorial 第一步 import uvicorn from fastapi import FastAPIapp FastAPI()app.get("/") async def root():return {"message": "Hello World"}if __name__ __main__:uvicorn.run(&quo…...
如何在 HTML 中实现响应式设计以适应不同设备的屏幕尺寸?
要在HTML中实现响应式设计以适应不同设备的屏幕尺寸,可以使用CSS媒体查询和流动布局。 以下是实现响应式设计的一些关键步骤: 使用CSS媒体查询:CSS媒体查询允许根据屏幕尺寸和设备特性应用不同的CSS样式。通过在CSS中使用media规则…...
【基础篇】第1章 Elasticsearch 引言
1.1 Elasticsearch简介 1.1.1 基本概念 Elasticsearch,一个开源的分布式搜索引擎,以其强大的搜索能力和实时数据分析能力,在大数据时代脱颖而出。它基于Apache Lucene库构建,旨在提供高效、可扩展且易于使用的全文检索解决方案。…...
在区块链技术广泛应用的情况下,C 语言如何在区块链的底层开发中发挥更有效的作用,提高性能和安全性?
C语言在区块链底层开发中发挥着重要的作用,可以提高性能和安全性。具体可以从以下几个方面进行优化: 性能优化:C语言是一种高效的编程语言,可以直接访问内存和硬件资源。在区块链底层开发中,使用C语言可以更好地利用底…...
量化投资 日周月报 2024-06-28
文章 深度学习在量化交易中的应用:在BigQuant量化交易平台的文章中,探讨了深度学习在量化交易中,特别是在因子挖掘方面的应用。文章提到,随着传统线性模型的潜力逐渐枯竭,非线性模型逐渐成为量化交易的主要探索方向。深度学习因其对非线性关系的拟合能力,在量化交易中展现…...
基于 Paimon 的袋鼠云实时湖仓入湖实战剖析
在当今数据驱动的时代,企业对数据的实施性能力提出了前所未有的高要求。为了应对这一挑战,构建高效、灵活且可扩展的实时湖仓成为数字化转型的关键。本文将深入探讨袋鼠云数栈如何通过三大核心实践——ChunJun 融合 Flink CDC、MySQL 一键入湖至 Paimon …...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目,该项目是一个 Spring AI 快速入门的样例工程项目,旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计,每个模块都专注于特定的功能领域,便于学习和…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
