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

文章目录

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



在这里插入图片描述


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

ForEach 渲染控制文档 : https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-rendering-control-foreach-0000001524537153-V2





一、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.rhkb.cn/news/345699.html

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

相关文章

软件心学格物致知篇(7)软件开发文档写什么

软件心学格物致知篇(7)软件开发文档写什么 前言 当今约束大家生产力的有哪些因素&#xff1f;是编程语言&#xff1f;开发框架&#xff1f;开发IDE&#xff1f;还是自身迫切需要更高水平的技能&#xff1f; 好像上面的每一项技术都在不断发展&#xff0c;也在不断的为我们生…

error while loading shared libraries 找不到动态库问题如何解决

在使用 c 或 c 开发应用时&#xff0c;在启动程序时&#xff0c;有时会遇到这个错误&#xff0c;找不到动态库。这个时候&#xff0c;我们使用 ldd 来查看&#xff0c;发现可执行文件依赖的动态库显示为 not found。 1 实验代码 使用如下 3 个文件做实验。 hello.h 中声明了函…

基于51单片机俄罗斯方块小游戏

基于51单片机俄罗斯方块游戏 &#xff08;仿真&#xff0b;程序&#xff09; 功能介绍 具体功能&#xff1a; 1.用LCD12864显示游戏界面&#xff1b; 2.用四个按键控制游戏&#xff08;左、右移、下移、翻转&#xff09;&#xff1b; 3.游戏规则和平时玩的俄罗斯方块一样&a…

基于vue的音乐播放器的设计与实现(论文+源码)_kaic

摘 要 当下&#xff0c;如果还依然使用纸质文档来记录并且管理相关信息&#xff0c;可能会出现很多问题&#xff0c;比如原始文件的丢失&#xff0c;因为采用纸质文档&#xff0c;很容易受潮或者怕火&#xff0c;不容易备份&#xff0c;需要花费大量的人员和资金来管理用纸质文…

C51学习归纳9 --- I2C通讯学习(重点)

首先&#xff0c;我自己学习过以后的直观感觉&#xff0c;通信协议是单片机的灵魂之一&#xff0c;只有规定好了通信协议我们才能够正确的接收到信息&#xff0c;才能实现更加深入的研究。所以这一部分是需要好好学习的。 本节借助一个可存储的芯片AT24C02&#xff0c;进行在I2…

C++网络编程基础

文章目录 协议局域网通信IP 地址网络通信的本质tcp 和 udp 协议网络字节序网络主机数据转化接口 协议 协议&#xff1a;收到数据后&#xff0c;多出来的那一部分&#xff0c;也叫一种 “约定”&#xff0c;一整套的自硬件到软件&#xff0c;都有协议&#xff0c;需要有人定制&a…

【清华大学】《自然语言处理》(刘知远)课程笔记 ——NLP Basics

自然语言处理基础&#xff08;Natural Language Processing Basics, NLP Basics&#xff09; 自然语言处理( Natural Language Processing, NLP)是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。自然语言…

关于Latitude5490的问题Bios引导问题

关于Latitude5490的问题Bios引导问题 一、问题描述1、第一次维修&#xff1a;2、第二次维修&#xff1a; 二、捣鼓过程1、Latitude 5490的Bios引导2、捣鼓硬盘分区格式3、使用PE修复引导4、处理方法 三、参考链接 一、问题描述 本人原本电脑型号为Latitude 5480&#xff0c;电…

归并排序——逆序数对的统计

逆序数对的统计 题目描述 运行代码 #include <iostream> using namespace std; #define LL long long const int N 1e5 5; int a[N], tmp[N]; LL merge_sort(int q[], int l, int r) {if (l > r)return 0; int mid l r >> 1; LL res merge_sort(q, l,…

OPPO高级项目经理曹帆受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 OPPO互联网服务系统内容生态中心高级互联网项目经理曹帆先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“加、减、乘、除——激活项目团队效能”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&#xff01; 议…

初中英语优秀作文分析-004My favorite Chinese traditional story-我最喜欢的中国传统故事

PDF格式公众号回复关键字:SHCZYF004 记忆树 1 There are many traditional stories in China. 翻译 中国有很多传统故事 简化记忆 传统故事 句子结构 There be句型 many traditional stories 名词短语 很多传统故事&#xff0c;in China 介词短语&#xff0c;在中国 …

Docker:利用Docker搭建一个nginx服务

文章目录 搭建一个nginx服务认识nginx服务Web服务器反向代理服务器高性能特点 安装nginx启动nginx停止nginx查找nginx镜像拉取nginx镜像&#xff0c;启动nginx站点其他方式拉取nginx镜像信息通过 DIGEST 拉取镜像 搭建一个nginx服务 首先先认识一下nginx服务&#xff1a; NGI…

【Linux】进程6——环境变量

1.什么是环境变量 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数 比如&#xff1a;我们在编写C/C代码的时候&#xff0c;在链接的时候&#xff0c;从来不知道我们的所链接的动态静态库在哪里&#xff0c;但是照样可以链接成功&…

什么是档案数字化管理

档案数字化管理指的是将传统的纸质档案转换为数字形式&#xff0c;并通过电子设备、软件和网络技术进行管理和存储的过程。 档案数字化管理包括以下几个步骤&#xff1a; 1. 扫描和数字化&#xff1a;将纸质档案通过扫描仪转换为数字图像或文档。可以使用OCR&#xff08;光学字…

使用C++结合OpenCV进行图像处理与分类

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的在读研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三…

Java 期末复习 习题集

&#x1f496; 单选题 &#x1f496; 填空题 &#x1f496; 判断题 &#x1f496; 程序阅读题 1. 读代码写结果 class A {int m 5;void zengA(int x){m m x;}int jianA(int y){return m - y;} }class B extends A {int m 3;int jianA(int z){return super.jianA(z) m;} …

笔记本充电出现了问题。

不知道为什么。电池充电图片一直显示的空。谁能救救我&#xff01;

[图解]建模相关的基础知识-07

1 00:00:04,710 --> 00:00:08,900 这是划分&#xff0c;下一个是有序对的概念 2 00:00:11,720 --> 00:00:13,800 我们知道集合是不分顺序的 3 00:00:15,090 --> 00:00:18,200 我们花括号来代表集合的话 4 00:00:18,210 --> 00:00:21,000 AB花括号等于BA花括号 …

【python报错】关于 xlrd.biffh.XLRDError: Excel xlsx file; not supported 解决方法【已解决】

【Python报错】关于xlrd.biffh.XLRDError: Excel xlsx file; not supported解决方法【已解决】 在使用Python进行数据分析时&#xff0c;经常需要处理Excel文件。xlrd库是一个流行的用于读取Excel文件的库&#xff0c;但如果你在使用xlrd打开.xlsx文件时遇到了xlrd.biffh.XLRDE…

aabb c++

题目描述 查找形如"aabb"的四位完全平方数&#xff0c;也即前两位数字相同&#xff0c;后两位数字也相同。 输入 无 输出 若干行&#xff0c;每行一个符合条件的四位数&#xff08;从小到大&#xff09;。 分析&#xff1a; 完全平方数&#xff1a; &#xff…