学习鸿蒙基础(4)

1.条件渲染
ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,使用if、else和else if渲染对应状态下的UI内容。
当if、else if后跟随的状态判断中使用的状态变量值变化时,条件渲染语句会进行更新。。

@Entry
@Component
struct PageIfElse {@State list: Object [] = []build() {Row() {Column() {Button("onClick").onClick(()=>{this.list=[{ id: 1, name: "房子",type:1 },{ id: 2, name: "车子",type:2 },{ id: 3, name: "票子",type:3} ,{ id: 1, name: "理想",type:1 },{ id: 2, name: "现实",type:2 },{ id: 3, name: "梦想",type:3}]})if(this.list.length){List(){ForEach(this.list,(item:Object)=>{ListItem(){getOrder(item)}.margin(10)},item=>JSON.stringify(item))}.height(200)}else{Text("三无青年")}}.width('100%')}.height('100%')}
}@Builder
function  getOrder(item){Row(){Text(item["name"]).fontSize(18).fontColor("#333333")if(item["type"]==1){Text("一座").fontSize(19).fontColor(Color.Red)}else if(item["type"]==2){Text("二辆").fontSize(19).fontColor(Color.Red)}else if(item["type"]==3){Text("三捆").fontSize(19).fontColor(Color.Red)}}.justifyContent(FlexAlign.SpaceBetween).width("100%")
}

 2.自定义组件

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行Ul界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
自定义组件具有以下特点:
1、可组合:允许开发者组合使用系统组件、及其属性和方法。
2、可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。
3、数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。


struct:自定义组件基于struct实现,struct +自定义组件名+..}的组合构成自定义组件,不能有继承关系。对于struct的实例化,可以省略new。
@Component: @Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰。
@Entry: @Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中,最多可以使用@Entry装饰一个自定义组件。
build()函数中需注意: build()函数用于定义自定义组件的声明式UI描述,自定义组件必须定义build()函数。
build()函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点。build()函数下:
1、不允许声明本地变量。
2、不允许在UI描述里直接使用console.info(),但允许在方法或者函数里使用。
3、不允许调用没有用@Builder装饰的方法。
4、不允许switch语法,如果需要使用条件判断,请使用if。
5、不允许使用表达式,比如三目运算。

 代码示例:

自定义组件需要新建一个components的文件夹。将自定义组件拷贝在里面。


import Item from '../model/Item';
//自定义组件  组件与组件之间是隔离的
@Component
struct myList {private item: Item;private index: number;private list: Item [];@State isChecked:boolean =falsebuild() {Row() {Checkbox().onChange(v=>{console.log(v.toString())this.isChecked=v})Text(this.item.text).fontSize(20).decoration({type:this.isChecked?TextDecorationType.Underline:TextDecorationType.None,color:Color.Blue})Button("删除").backgroundColor(Color.Red).onClick(() => {this.list.splice(this.index, 1)})}.justifyContent(FlexAlign.SpaceBetween).width("100%")}
}export default myList

自己新建的对象需要新建一个model文件夹。对象是普通的ts文件。


class Item {id: number;text: string;constructor(id: number, text: string) {this.id = idthis.text = text}
}export  default Item

DEMO运行效果如下

 自定义组件demo如下:

import myList from '../components/myList'
import Item from '../model/Item'
@Entry
@Component
struct PageIfElse {@State text: string = ''@State list: Item [] = [new Item(Date.now(), "房子"),new Item(Date.now(), "车子")]build() {Row() {Column() {Row() {TextInput({ text: this.text }).width(250).onChange((value) => {this.text = value})Button("增加").onClick(() => {this.list.push(new Item(Date.now(), this.text))this.text = ""}).margin(10)}.width("100%").justifyContent(FlexAlign.SpaceBetween).margin(10)List() {ForEach(this.list, (item, index) => {ListItem() {myList({ item, index, list: this.list })}.margin(10)})}.layoutWeight(1).divider({strokeWidth: 1,color: Color.Blue,startMargin: 10,endMargin: 10}).width('100%')}}.height('100%')}
}

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

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

相关文章

【C++杂货铺】模板

🌈前言🌈 欢迎观看本期【C杂货铺】,本期内容将讲解模板的初阶,即了解模板,熟练掌握模板的使用方法,了解模板的工作原理等内容。 📁 函数模板 📂 概念 函数模板代表了一个函数家族&am…

typescript 对象的属性定义

const ENUM_MAP_LIST: IMapListType {jf: {iconname: iconfont icon-wodejifen,color: #F3A31E,name: mypoint,number: 123,text: "我的积分",url: /integral/rtre,},px: {iconname: iconfont icon-wodeRdeIun,name: mytrain,color: #4285F4,number: 223,text: &qu…

如何在Windows系统中检测和结束运行中的程序(任务管理器显示运行程序可能有bug)

如何在Windows系统中检测和结束运行中的程序 在Windows系统的日常使用和管理过程中,我们经常需要检测某个程序是否正在运行,并在必要时结束它。本文将详细介绍如何在Windows系统中检测运行中的程序,并提供多种方法来结束这些程序。 检测运行…

通俗易懂的双亲委派机制

当你超过别人一点点,别人会嫉妒你;当你超过别人一大截,别人就会羡慕你 据说给我点关注的都成了大佬,点关注的我都会私发一份好东西 ​​​​你得先知道 在介绍双亲委派机制的时候,不得不提ClassLoader(类…

Java字符串转整数的超简单方法!

推荐阅读 智能化校园:深入探讨云端管理系统设计与实现(一) 智能化校园:深入探讨云端管理系统设计与实现(二) 问题描述 当你把一个字符串值和一个整数加在一起而不进行任何形式的转换时会发生什么呢&#…

聚合支付,聚合系统,聚合程序或将成为主流

支付市场的变化对用户、代理商和运营商产生了重大影响。 随着政策监管的日益严格,支付行业逐渐朝着标准化和合理化的方向发展,日益增强其安全性。在这个背景下,聚合平台已经成为未来支付行业发展的重要趋势。特别是在“一机一码”政策实施后&…

前端进度条组件NProgress

nprogress 安装 npm install --save nprogress使用 import NProgress from nprogress // 引入nprogress插件 import nprogress/nprogress.css // 这个nprogress样式必须引入// axios请求拦截器 axios.interceptors.request.use(config > {NProgress.start() // 设置加载进…

【学习心得】编程小白该如何学好C语言(✨新手推荐阅读)

前言 对于刚刚踏入编程领域的小白来说,C语言可能是一个既神秘又充满挑战的领域。但只要你掌握了正确的学习方法,C语言的学习之旅也可以是充满乐趣和成就感的。 一、明确学习目标 对于初学者来说,明确学习目标是学好C语言的第一步。一个清晰…

BIG DATA —— 大数据时代

大数据时代 [英] 维克托 迈尔 — 舍恩伯格 肯尼斯 库克耶 ◎ 著 盛杨燕 周涛◎译 《大数据时代》是国外大数据研究的先河之作,本书作者维克托迈尔舍恩伯格被誉为“大数据商业应用第一人”,他在书中前瞻性地指出,大数据带来的信息…

扩散模型+轨迹预测

目录 1. 基础知识2. 轨迹预测相关2.1 Leapfrog Diffusion Model2.2 MID2.3 中科院2.4 DICE2.5 MotionDiffuser2.6 DiffTraj 3. 练手时可参考4. 扩展:扩散模型RL 1. 基础知识 Stable diffusion扩散模型相关 Diffusion相关二 Diffusers是hugging face发起的用于专门…

springsecurity框架笔记

<center>springsecurity框架笔记</center> springsecurity优点&#xff1a; 1、易于理解的java Security Api 2、简单的身份认证&#xff08;登录&#xff09;&#xff0c;支持多种数据源&#xff08;LDAP,JDBC,KERBEROS) 3、对角色的简单授权&#xff08;访问…

Vue3引用第三方模块报错Could not find a declaration file for module ***.

在引用第三方的组件时候报错如下 原因是&#xff1a;该组件可能不是.ts文件而是.js文件 解决方案&#xff1a; 1.在Src的目录下面新建一个文件为shims-vue.d.ts的文件 2.文件内容为 declare module xxx&#xff0c;xxx就是你报错的模块 例如我这样 declare module vue3-pu…

Vue常用指令+用法举例 详解

vue的常用指令有&#xff1a;vue常用指令有&#xff1a;v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。 1.v-on v-on 事件绑定指令&#xff0c;用来辅助程序员为DOM 元素绑定事件…

数据结构好文集合

1.哈希表 https://blog.csdn.net/weixin_46195957/article/details/125298629 2.红黑树 https://www.cnblogs.com/crazymakercircle/p/16320430.html#autoid-h2-5-2-0

2189. 有源汇上下界最大流(最大流上,下界可行流,模板题)

活动 - AcWing 给定一个包含 n 个点 m 条边的有向图&#xff0c;每条边都有一个流量下界和流量上界。 给定源点 S 和汇点 T&#xff0c;求源点到汇点的最大流。 输入格式 第一行包含四个整数 n,m,S,T。 接下来 m 行&#xff0c;每行包含四个整数 a,b,c,d 表示点 a 和 b 之…

单片机03--按键--寄存器版

GPIO端口相关寄存器&#xff08;STM32F40x芯片&#xff09; 目标&#xff1a; 开关KEY1控制开灯。 分析&#xff1a; KEY1---PA0--->输入---->浮空输入/下拉输入 KEY1不导通时&#xff0c;PA0输入为低电平&#xff0c;KEY1导通时&#xff0c;PA0输入为高电平。 实现…

【Unity】双击txt文件以记事本形式(文本文档)打开

在Unity工程任意Editor文件夹下创建C#脚本&#xff1a;CustomAssetHandler using UnityEngine; using UnityEditor; using UnityEditor.Callbacks;public class CustomAssetHandler {[OnOpenAssetAttribute(1)]public static bool step1(int instanceID, int line){string pat…

Vue中 Runtime-Only和Runtime + Compiler的区别

在 Vue 项目中&#xff0c;Runtime-Only 和 Runtime Compiler 是两种不同的构建方式。 Runtime-Only&#xff08;仅运行时&#xff09;&#xff1a;在 Runtime-Only 构建中&#xff0c;Vue 库只包含运行时的代码&#xff0c;不包含模板编译器。。Runtime Compiler&#xff08…

SpringBoot异步任务获取HttpServletRequest

前言 在使用框架日常开发中需要在controller中进行一些异步操作减少请求时间&#xff0c;但是发现在使用Anysc注解后会出现Request对象无法获取的情况&#xff0c;本文就此情况给出完整的解决方案 原因分析 Anysc注解会开启一个新的线程&#xff0c;主线程的Request和子线程…

SpringBoot的约定优于配置,你的理解是什么?

我从4个点方面来回答。 首先&#xff0c;约定优于配置是一种软件设计的范式&#xff0c;它的核心思想是减少软件开发人员对于配置项的维护&#xff0c;从而让开发人员更加聚焦在业务逻辑上。 SpringBoot就是约定优于配置这一理念下的产物&#xff0c;它类似于Spring框架下的一…