【HarmonyOS】HarmonyOS NEXT学习日记:六、渲染控制、样式结构重用

【HarmonyOS】HarmonyOS NEXT学习日记:六、渲染控制、样式&结构重用

渲染控制包含了条件渲染和循环渲染,所谓条件渲染,即更具状态不同,选择性的渲染不同的组件。
而循环渲染则是用于列表之内的、多个重复元素组成的结构中。

在声明式描述语句中开发者除了使用系统组件外,还可以使用渲染控制语句来辅助UI的构建,这些渲染控制语句包括控制组件是否显示的条件渲染语句,基于数组数据快速生成组件的循环渲染语句,针对大数据量场景的数据懒加载语句,针对混合模式开发的组件渲染语句。

渲染控制

条件渲染(if/else)

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

@Entry
@Component
struct Index {@State counter: number = 0;build() {Column({space: 10}){Text(`counter=${this.counter}`)Row(){if(this.counter===0){Text(`counter===0,不展示归零按钮`);}else{Button('归零').onClick(()=>{this.counter=0})}}Row(){Button('counter++').onClick(()=>{this.counter++})}}}
}

上文我们实现了一个例子、初始化counter为0,提供一个counter++的按钮,点击时counter+1。
当counter=0时,显示文字:counter=0,不展示归零按钮
在这里插入图片描述
否则,展示一个归零按钮
在这里插入图片描述
点击归零按钮后,counter赋值0,页面回归初始状态
在这里插入图片描述
通过这个例子,就简单掌握了条件渲染的用法。

循环渲染

ForEach接口基于数组类型数据来进行循环渲染,需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如,ListItem组件要求ForEach的父容器组件必须为List组件。

用法:

// Index.ets
import text from '@ohos.graphics.text';interface newItem{title: string,subTitle: string,time: string
}@Entry
@Component
struct Index {@State news: newItem[] = [{title: '新闻标题1',subTitle: '这是一个副标题1',time: '2024/7/22'},{title: '新闻标题2',subTitle: '这是一个副标题2',time: '2024/7/22'},{title: '新闻标题3',subTitle: '这是一个副标题3',time: '2024/7/22'}];build() {Scroll(){Column({space:1}){ForEach(this.news,(item:newItem)=>{Column(){Row(){Text(item.title).fontSize(22)}.width('100%')Row(){Text(item.subTitle).fontColor('#aaa')}.width('100%')Row(){Text(item.time).fontColor('#aaa')}.width('100%').justifyContent(FlexAlign.End)}.padding(10).border({width: {bottom: 1},color: '#ccc',style: BorderStyle.Dashed,}).backgroundColor('rgba(25, 159, 126, 0.1)')},(item:newItem,index:number)=>index+'')}.width('100%').backgroundColor('#eee')}}
}

在这里插入图片描述

样式&结构重用

@Extend:扩展组件(样式、事件)

继承一个组件并且为其添加扩展方法,通过自定义扩展方法就可以添加可复用的样式和事件。

// Index.ets
import text from '@ohos.graphics.text';
@Extend(Text)
function textExtend(backgroundColor: ResourceColor,text: string){.textAlign(TextAlign.Center).backgroundColor(backgroundColor).fontColor(Color.Red).fontSize(22).width('100%').onClick(() => {AlertDialog.show({message: text})})
}
@Entry
@Component
struct Index {build() {Column(){Text('1111').textExtend(Color.Blue,'1111')Text('2222').textExtend(Color.Green,'2222')}}
}

可以看到我们布局时的代码简练了很多
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/56c54cc368704ec7b19409557a6320da.png在这里插入图片描述

在这里插入图片描述
!!!会影响整个页面的该组件,需要注意!!!

@Styles: 抽取通用属性、事件

// Index.ets
//'CommonAttribute' 类型
@Styles function textStyle() {.backgroundColor('#eee').width('100%').onClick(() => {AlertDialog.show({message: '点击触发'})})
}
@Entry
@Component
struct Index {build() {Column(){Text('1111').textStyle().textAlign(TextAlign.Center)Text('2222').textStyle().textAlign(TextAlign.Center)}}
}

在这里插入图片描述
在这里插入图片描述
特点:

  • 只能设置CommonAttribute类型的属性,也就是通用属性
    像是,TextFont这种只能给Text组件设置的属性无法通过这种方式提取。
  • 无法接收参数
  • 有组件作用域和全局作用域

@Builder:自定义构建函数(结构、样式、事件)

通过@Builder我们可以自定义构建函数,将需要复用的结构、样式、事件通通封装起来。

// Index.ets
import text from '@ohos.graphics.text'@Builder function TextItem(text: string){Text(text).fontSize(18).fontColor(Color.Red).backgroundColor('#ccc').lineHeight(30).width('100%').textAlign(TextAlign.Center).onClick(()=>{AlertDialog.show({message: text})})
}
@Entry
@Component
struct Index {build() {Column(){TextItem('111')TextItem('222')TextItem('333')}}
}

在这里插入图片描述
点击后可以触发事件
在这里插入图片描述

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

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

相关文章

RabbitMQ的学习和模拟实现|GTest测试框架的介绍和简单使用

GTest 项目仓库:https://github.com/ffengc/HareMQ GTest GTest是什么我们需要学习的GTest功能宏断言事件机制 全局测试套件独立测试套件 GTest是什么 GTest是一个跨平台的 C单元测试框架,由google公司发布。gtest是为了在不同平台上为编写C单元测…

JAVA JUC学习笔记

基础知识 1、进程和线程的对比 进程基本上相互独立的,而线程存在于进程内,是进程的一个子集进程拥有共享的资源,如内存空间等,供其内部的线程共享进程间通信较为复杂 同一台计算机的进程通信称为 IPC(Inter-process …

.Net 8 控制台程序部署(Linux篇)

在无流量Linux环境下部署.NET8开发的控制台程序 写在前面准备远程访问安装环境程序部署1.下载并导入2.解压并配置3.发布程序4.创建Systemd服务单元文件5.启用并启动服务 写在结尾 写在前面 好久没更新文章了,今天给大家带来的是在在无流量的Linux工控机上部署.Net8…

理想化相机模型的相机内参

文章目录 理想化相机模型的相机内参计算1. 相机内参定义2. 根据视角和图像分辨率计算相机内参2.1 计算焦距 fx 和 fy2.2 计算主点 cx 和 cy3. 示例计算3.1 计算 fx3.2 假设 fy = fx(因为没有垂直视场角的信息)3.3 计算主点4. 相机内参矩阵理想化相机模型的相机内参计算 在理…

MSP430M03507最小系统板的keil环境搭配,用keil编辑ti单片机

转载自嘉立创MSP430M03507开发手册 这篇文章只是因为我的keil版本与嘉立创的不一样,所以添加了我自己遇到的问题解析 先说说为什么要用keil编辑,因为ti单片机自己的ccs编译环境需要对应仿真器,那个加芯片都240了,哪有那么多钱买…

FastDFS分布式存储

一:FastDFS原理 FastDFS是一个开源的轻量级分布式文件系统,功能包括:文件存储,文件同步,文件访问(文件上传、文件下载)等,解决了大容量存储和负载均衡的问题。 1:FastD…

56 网络层

本节重点 理解网络层的作用,深入理解IP协议的基本原理 对整个TCP/IP协议有系统的理解 对TCP/IP协议体系下的其他重要协议和技术有一定的了解 目录 前置认识ip协议基本概念协议头格式网段划分特殊的ip地址ip地址的数量限制私有ip和公有ip路由路由表生成算法 在复杂…

Wi-SUN无线通信技术 — 大规模分散式物联网应用首选

引言 在数字化浪潮的推动下,物联网(IoT)正逐渐渗透到我们生活的方方面面。Wi-SUN技术以其卓越的性能和广泛的应用前景,成为了大规模分散式物联网应用的首选。本文将深入探讨Wi-SUN技术的市场现状、核心优势、实际应用中的案例以及…

使用html2pdf实现前端页面打印,批量打印导出为PDF

// 使用注意&#xff1a; // 如果页面中有图片会因为跨域问题导致图片下载不下来 // 所以在图片标签中需要加入一些属性&#xff1a;crossOrigin 和 url后加一个随机后缀 // <Image crossOrigin"anonymous" src{${faceInfo.user_face_url}?v${new Date()}} width…

一些和颜色相关网站

1.中国传统色 2.网页颜色选择器 3.渐变色网站 4.多风格色卡生成 5.波浪生成 6.半透明磨砂框

第123天:内网安全-域防火墙入站出站规则不出网隧道上线组策略对象同步

目录 案例一&#xff1a; 单机-防火墙-限制端口\协议出入站 案例二&#xff1a;不出网的解决思路 入站连接 隧道技术 案例三&#xff1a;域控-防火墙-组策略对象同步 案例四&#xff1a;域控-防火墙-组策略不出网上线 msf cs 案例一&#xff1a; 单机-防火墙-限制端口\…

PHP MySQL Update

PHP MySQL Update 在PHP开发中&#xff0c;与MySQL数据库的交互是至关重要的。其中&#xff0c;更新数据库中的数据是一项基本且常见的操作。本文将详细介绍如何使用PHP来更新MySQL数据库中的数据。 1. 环境准备 在开始之前&#xff0c;请确保您的开发环境满足以下条件&…

RabbitMQ的学习和模拟实现|sqlite轻量级数据库的介绍和简单使用

SQLite3 项目仓库&#xff1a;https://github.com/ffengc/HareMQ SQLite3 什么是SQLite为什么需要用SQLite官方文档封装Helper进行一些实验 什么是SQLite SQLite是一个进程内的轻量级数据库&#xff0c;它实现了自给自足的、无服务器的、零配置的、事务性的 SQL数据库引擎…

CTFSHOW game-gyctf web2

【2020年新春战“疫”】game-gyctf web2 参考https://www.cnblogs.com/aninock/p/15408090.html 说明&#xff1a;看见网上好像没多少人写&#xff0c;刚好玩到这道题了&#xff0c;就写一下吧。 一、利用入口 常规套路发现www.zip然后进行代码审计 index可以包含update&…

汽车技术智能化程度不断提升,线束可靠性如何设计?

随着汽车技术的高速发展&#xff0c;汽车自动化、智能化程度的逐步提高&#xff0c;人们对汽车的安全性、舒适性、娱乐性等要求也不断提高&#xff0c;加上汽车节能减排法规的不断严峻&#xff0c;整车电气设备不断增加&#xff0c;作为连接汽车各种电器设备“神经网络”的整车…

【Ubuntu】Ubuntu20修改MAC地址

文章目录 一、临时修改MAC地址&#xff08;重启后复原&#xff09;二、永久修改MAC地址 场景&#xff1a;在做虚拟机复制时&#xff0c;复制完的两台虚拟机存在相同MAC&#xff0c;导致无法分别分配IP。 解决&#xff1a;修改一台虚拟机的MAC地址。 一、临时修改MAC地址&#…

谷粒商城实战笔记-跨域问题

一&#xff0c;When allowCredentials is true, allowedOrigins cannot contain the special value “*” since that cannot be set on the “Access-Control-Allow-Origin” response header. To allow credentials to a set of origins, list them explicitly or consider u…

余弦退火示例pytorch

余弦退火学习率调度器是一种用于动态调整学习率的方法&#xff0c;能够在训练过程中逐渐降低学习率&#xff0c;从而有助于模型更好地收敛。我们可以通过PyTorch中的torch.optim.lr_scheduler.CosineAnnealingLR来实现这种调度器。 下面是一个包含3层Conv2d模型的示例&#xf…

数据清洗系统设计

设计一个高效的数据清洗系统旨在确保数据的质量&#xff0c;以便后续分析和决策过程可以基于准确、一致和完整的信息。以下是设计实时数据清洗系统时需要考虑的关键要素&#xff0c;结合之前提到的设计目标和原则&#xff1a; 1. 高效的数据处理 技术选型&#xff1a;采用并行…

Linux基于CentOS7【yum】【vim】的基础学习,【普通用户提权】

目录 yum生态 什么是yum yum是如何得知目标服务器的地址和下载链接 vim vim模式 命名模式 光标移动 插入模式 i键插 a键插 o键插 底行模式 批量化注释 批量化去注释 创建vim配置文件 例子 高亮功能&#xff1a; 缩进功能&#xff1a; 符号位自动补齐功能…