【OpenHarmony】ArkTS 语法基础 ④ ( ArkTS UI 渲染控制 | if else 条件渲染 | ForEach 循环渲染 )

文章目录

  • 一、ArkTS UI 渲染控制
    • 1、if else 条件渲染
    • 2、ForEach 循环渲染
  • 二、完整代码示例
    • 1、自定义组件代码
    • 2、主界面代码
    • 3、执行结果



在这里插入图片描述


参考文档 : <HarmonyOS第一课>ArkTS开发语言介绍





一、ArkTS UI 渲染控制




1、if else 条件渲染


在 @Component 自定义组件 中的 build 函数中 ,

可以 使用 if else 条件控制语句 , 控制 UI 渲染 ,

根据不同的条件 为 同一个 UI 组件 动态设置不同的 渲染样式 ;


在下面的代码中 , 根据 自定义组件 的 this.num1 成员变量的值 , 决定 Text 组件的渲染样式 ,

  • 如果 this.num1 值大于等于 60 , 将 Text 组件背景 设置为 红色 ;
  • 否则 , 将 Text 组件背景设置为 黑色 ;
  build() {Column({ space: 20 }) { // 设置子组件间距为10// 条件渲染 使用 if else 进行渲染// 根据不同的条件 动态控制组件显示if (this.num1 >= 60) {Text('Text1 ' + this.num1).fontSize(20).fontColor(Color.White).backgroundColor(Color.Red)} else {Text('Text1 ' + this.num1).fontSize(20).fontColor(Color.White).backgroundColor(Color.Black)}}// Column
}// build

展示效果 :

在这里插入图片描述

完整代码 , 在本博客的 绑定资源 中下载 ;


2、ForEach 循环渲染


ArkTS 提供了 ForEach 语句 , 进行循环渲染 ;

在 UI 渲染函数 build 函数中 ,

调用 ForEach 函数 , 进行循环渲染 ,

可以根据一个数组数据源 , 执行循环操作 , 渲染出多个 UI 组件 ;


在 ForEach 函数中 , 传入三个参数 , 函数原型如下 :

ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void,keyGenerator?: (item: any, index?: number) => string
)
  • arr 参数一 : 任意类型的数组 , 该数组是 循环渲染 的 数据源 , 根据该数组中的每个元素生成 UI 组件 ;
  • itemGenerator 参数二 : 组件生成函数 , 是一个 Lambda 表达式函数 , 函数类型是 (item: any, index?: number) => void ,
    • Lambda 表达式 的 第一个参数 item: any 是数组元素 ,
    • Lambda 表达式 的 第二个参数是 index?: number 数组元素的索引 ;
    • Lambda 表达式 返回值 是 void , 不返回任何返回值 , 在函数中只需要创建 UI 组件即可 , 创建的 UI 组件会自动添加到父容器中 ;
  • keyGenerator 参数三 : 键值生成函数 , 是一个 Lambda 表达式函数 , 函数类型是 (item: any, index?: number) => string ;
    • Lambda 表达式 的 第一个参数 item: any 是数组元素 ,
    • Lambda 表达式 的 第二个参数是 index?: number 数组元素的索引 ;
    • Lambda 表达式 返回值 是 string 字符串类型 ;

特别注意 : 最后一个函数参数 生成的键值 , 必须是 不重复的 , 否则会导致 ForEach 循环渲染失败 , 如果生成的 键值相同 , 则后面键值相同的组件不会被添加到 UI 布局中 ;


循环渲染示例代码 :

  // 循环渲染数据源numArr: number[] = [9527, 2024, 911];// 自定义子组件build() {Column({ space: 20 }) { // 设置子组件间距为10// 省略若干代码 ... // 第一个参数是数组// 第二个参数是子组件生成函数// 第三个参数是键值生成器ForEach(// 参数一 : 数组, 循环渲染 的 数据源this.numArr,// 参数二 : 子组件生成函数(item: number, index: number): void => {Text('Text ' + index + " " + item).fontSize(20).fontColor(Color.White).backgroundColor(Color.Black)}, // (item, index) => {// 参数三 : 键值生成器, 为组件生成唯一稳定键值(item: number, index: number): string => "ForEach" + index) // ForEach}

Previewer 显示效果 : 在 ForEach 循环中 , 每循环一个数组元素 , 就生成一个 Text 组件 , 将 数组元素值 显示到 Text 组件的文本中 ;

在这里插入图片描述





二、完整代码示例




1、自定义组件代码


import hilog from '@ohos.hilog'@Component
export struct MyComponent {// 要显示的文字内容num1: number = 80;// 循环渲染数据源numArr: number[] = [9527, 2024, 911];// 创建后 , build 之前回调aboutToAppear() {console.log("HSL MyComponent aboutToAppear")}// 自定义子组件build() {Column({ space: 20 }) { // 设置子组件间距为10// 条件渲染 使用 if else 进行渲染// 根据不同的条件 动态控制组件显示if (this.num1 >= 60) {Text('Text1 ' + this.num1).fontSize(20).fontColor(Color.White).backgroundColor(Color.Red)} else {Text('Text1 ' + this.num1).fontSize(20).fontColor(Color.White).backgroundColor(Color.Black)}// 第一个参数是数组// 第二个参数是子组件生成函数// 第三个参数是键值生成器ForEach(// 参数一 : 数组, 循环渲染 的 数据源this.numArr,// 参数二 : 子组件生成函数(item: number, index: number): void => {Text('Text ' + index + " " + item).fontSize(20).fontColor(Color.White).backgroundColor(Color.Black)}, // (item, index) => {// 参数三 : 键值生成器, 为组件生成唯一稳定键值(item: number, index: number): string => "ForEach" + index) // ForEach}.width('50%') // 设置 Row 的宽度.height('50%') // 设置 Row 的高度.backgroundColor(Color.Pink).alignItems(HorizontalAlign.Center) // 水平居中.justifyContent(FlexAlign.Center) // 垂直居中}// build 之后 , 销毁前回调aboutToDisappear() {console.log("HSL MyComponent aboutToDisappear")}
}

2、主界面代码


// 导入外部自定义子组件
import {MyComponent} from '../view/MyComponent';@Entry
@Component
struct Example {aboutToAppear(){console.log("HSL Example aboutToAppear")}onPageShow() {console.log("HSL Example onPageShow")}onBackPress() {console.log("HSL Example onBackPress")}build() {// 必须使用布局组件包括子组件Column(){// 自定义子组件MyComponent();}}onPageHide() {console.log("HSL Example onPageHide")}aboutToDisappear(){console.log("HSL Example aboutToDisappear")}}

3、执行结果


在这里插入图片描述

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

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

相关文章

⌈ 传知代码 ⌋ 预测人物性别年龄

&#x1f49b;前情提要&#x1f49b; 本文是传知代码平台中的相关前沿知识与技术的分享~ 接下来我们即将进入一个全新的空间&#xff0c;对技术有一个全新的视角~ 本文所涉及所有资源均在传知代码平台可获取 以下的内容一定会让你对AI 赋能时代有一个颠覆性的认识哦&#x…

chargpt: 用纯c 写一9*9数独程序

Chatgpt 真的可以写出完美的代码&#xff0c;学计算机编程没有前途。还有2天就要高考了&#xff0c;大家加油考出好成绩。但不要报编程专业了。 下面是一个完整的9x9数独求解程序&#xff0c;使用C语言实现。这个程序包括读取数独棋盘、解决数独问题并打印解决方案的功能。数独…

一篇最容易入门和经典Python库,看这篇就够了

1.NumPy 简介:用于处理大型多维数组和矩阵的库,以及一系列高级数学函数. import numpy as np a np.array([1, 2, 3, 4]) b np.array([[1, 3], [3, 4]]) print(np.dot(a, b))2.Pandas 简介:用于数据分析和操作的库,提供了主要数据结构为数据框&#xff08;DataFrame&#xf…

Python报错:AttributeError: <unknown>.DeliveryStore 获取Outlook邮箱时报错

目录 报错提示&#xff1a; 现象描述 代码解释&#xff1a; 原因分析&#xff1a; 报错提示&#xff1a; in get_outlook_email return account.DeliveryStore.DisplayName line 106, in <module> email_address get_outlook_email() 现象描述 获取outlook本地邮箱…

Javascript 数据类型详解:7种基本类型、3种引用类型

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…

LightDB PLSQL介绍(第一篇)

文章目录 概述开发工具ltsql PL/SQL基础程序结构匿名块存储过程函数 数据类型 控制语句条件语句IF 条件语句CASE条件语句 循环语句简单LOOPFOR LOOPWHILE循环循环退出循环继续 循序控制 静态语句动态语句游标隐式游标隐式游标属性隐式游标的异常处理 显式游标声明显式游标打开显…

【CesiumJS入门】(12)Vite+Vue3+Cesium 简易安装与配置

步骤 vite 创建项目&#xff1a;yarn create vite安装 Cesium&#xff1a;yarn add cesium安装 vite-plugin-static-copy&#xff1a;yarn add -D vite-plugin-static-copy 配置 vite.config.js &#xff1a; import { defineConfig } from "vite"; import vue fro…

制作自己的 ButterKnife(使用 AutoService 和 APT 注解处理器在编译期生成 Java 代码)

ButterKnife 开发过 Android 的肯定都知道曾经有这么一个库&#xff0c;它能够让你不用再写 findViewById 这样的代码&#xff0c;这就是大名鼎鼎的 ButterKnife&#xff08;https://github.com/JakeWharton/butterknife&#xff09;。虽然现在这个库已经不再维护&#xff0c;…

LabVIEW实现汽车逆变器功能测试系统

​介绍了如何利用LabVIEW开发汽车逆变器&#xff08;包括功率板和控制板&#xff09;的自动测试设备&#xff08;ATE&#xff09;&#xff0c;实现对额定800V电压、300A电流的逆变器进行功能测试。系统通过CAN2.0通讯协议&#xff0c;实现电机控制、温度传感器监测、电压校验和…

Java程序策——Java连接数据库保姆级教程(超详细步骤)

【Java程序策】——连接数据库 目录 ​编辑 一&#xff1a;在数据库中建立一个表&#xff08;student表&#xff09; 1.1&#xff1a;进入mysql 1.2&#xff1a;建立一个“数据库成员” 1.3&#xff1a;建立一个表&#xff08;student表&#xff09; 1.4&#xff1a;给表…

pytorch学习day5

一、权值初始化 在深度学习中&#xff0c;权值初始化是神经网络训练中关键的一步。正确的权值初始化可以帮助加速收敛速度&#xff0c;提高模型的稳定性和泛化能力。在PyTorch中&#xff0c;我们可以通过torch.nn.init模块中的函数来实现不同的权值初始化方法。 1.常规初始化 P…

算法刷题笔记 判断子序列(C++实现)

文章目录 题目描述基本思路实现代码 题目描述 给定一个长度为n的整数序列a1,a2,…,an以及一个长度为m的整数序列b1,b2,…,bm。请你判断a序列是否为b序列的子序列。子序列指序列的一部分项按原有次序排列而得的序列&#xff0c;例如序列{a1,a3,a5}是序列{a1,a2,a3,a4,a5}的一个…

MATLAB 函数 function

函数定义函数调用局部函数匿名函数函数句柄子函数函数文件的位置函数的文档函数的参数函数的返回值总结 在 MATLAB中&#xff0c;函数是一个执行特定任务的代码块&#xff0c;可以被重复调用。 MATLAB函数可以执行计算、数据操作、文件处理等任务&#xff0c;并且可以接收输入…

AI市场驱动HBM持续爆火

随着人工智能市场的蓬勃发展&#xff0c;对AI处理器的需求激增&#xff0c;内存制造巨头正积极扩大高带宽内存&#xff08;HBM&#xff09;的产能&#xff0c;并努力提高其良率和竞争力。最新的动态是美光在日本广岛县计划建设新工厂&#xff0c;旨在最早于2027年开始生产芯片和…

关于 spring boot 的目录详解和配置文件

目录 配置文件 spring boot 的配置文件有两种格式&#xff0c;分别是 properties 和 yml&#xff08;yaml&#xff09;。这两种格式的配置文件是可以同时存在的&#xff0c;此时会以 properties 的文件为主&#xff0c;但一般都是使用同一种格式的。 格式 properties 语法格…

36. 【Java教程】输入输出流

本小节将会介绍基本输入输出的 Java 标准类&#xff0c;通过本小节的学习&#xff0c;你将了解到什么是输入和输入&#xff0c;什么是流&#xff1b;输入输出流的应用场景&#xff0c;File类的使用&#xff0c;什么是文件&#xff0c;Java 提供的输入输出流相关 API 等内容。 1…

C#之位运算符

位运算符 位运算符 主要是用于数值类型计算运算方式: 将数值转换为二进制 在进行位运算返回的是一个二进制转十进制的数值如果二进制数 不够位置 则在前面补零 位与 & 符号 &#xff1a;& 链接两个数值进行运算 将数值转换为二进制 对位运算 有1则1 用法: 先将a和…

逆天面试题-

扪心自问&#xff0c;不借助第三变量实现两个变量value的交换&#xff0c;你怎么做&#xff1f; 3 2 1 看两种思路&#xff1a; 一.联想运算 不多说&#xff0c;试着去感受它的奇妙 #include<iostream> using namespace std; int main(){int a 3;int b 5;a a …

eNSP学习——OSPF的DR与BDR

目录 相关命令 原理概述 实验内容 实验目的 实验拓扑 实验编址 实验步骤 1、基本配置 2、搭建基本的OSPF网络 3、查看默认情况下的DR/BDR状态 4、根据现网需求影响DR/BDR选举 需要eNSP各种配置命令的点击链接自取&#xff1a;华为&#xff45;NSP各种设备配置命令大…

小白级教程—安装Ubuntu 20.04 LTS服务器

下载 本教程将使用20.04版进行教学 由于官方速度可能有点慢&#xff0c;可以下方的使用清华镜像下载 https://mirrors.tuna.tsinghua.edu.cn/ubuntu-releases/ 点击20.24版本 选择 ubuntu-20.04.6-live-server-amd64.iso 新建虚拟机 下载好后 我们使用 VMware 打开它 这里选…