HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

声明式 UI

ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。

如果组件的接口定义没有包含必选构造参数,则组件后面的“()”不需要配置任何内容。例如,Divider组件不包含构造参数(下划线组件

$r`形式引入应用资源,可应用于多语言场景

struct 内部无需用 let 声明,外部需要用 let 声明

使用 Stage 模型的应用,需要在module.json5配置文件中声明权限。
例如加载网络图片,语法:

Image(src: string | Resource | media.PixelMap)

加载本地资源

Image("images/view.jpg").width(200);

加载网络图片需要申请权限
在这里插入图片描述

Image("https://profile-avatar.csdnimg.cn/63cdb1329d9e45b49ccbc25c10e23baf_nanchen_j.jpg!1"
); // 实际使用时请替换为真实地址
@Entry
@Component
struct DeclarativeUi {@State message: string = 'Hello World'build() {Row() {Column() {Text('声明式UI')Divider()Image('https://profile-avatar.csdnimg.cn/63cdb1329d9e45b49ccbc25c10e23baf_nanchen_j.jpg!1').width(100).height(100)}.width('100%')}.height('100%')}
}

实际效果:
在这里插入图片描述

Resource 资源
使用资源格式可以跨包/跨模块引入图片,resources 文件夹下的图片都可以通过$r 资源接口读取到并转换到 Resource 格式。

Image($r("app.media.icon"));

也可以将图片放在rawfile文件夹下
其中:$r代表的是资源类型,app.media为应用程序下的媒体资源

链式编程

一条一条编写,类似于JQuery

Text("声明式UI").fontSize(40).fontColor(Color.Green);

事件方法

动态监听值的变化,例:

@Entry
@Component
struct DeclarativeUi {@State num:number = 3build() {Row() {Column() {Text('声明式UI'+this.num).fontSize(40).fontColor(Color.Green)Divider()Button('click++').onClick(()=>{this.num++})}.width('100%')}.height('100%')}
}
@Entry
@Component
struct DeclarativeUi {num:number = 3 // 不会具有响应式
}

注意:在struct中声明变量动态绑定需要用到@Struct,否则不会是响应式

private

定义私有变量,写法:

private content:string = 'Southern Wind'

自定义组件

当我们需要写多个文本不同但样式相同的效果,需要使用自定义组件来实现,下面是需要注意的几点

  1. @Component:@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰。
  2. @Entry 放在哪个组件前面,哪个就在页面上显示
  3. Entry组件中,build()中必须有且只有一个更组件
  4. 自定义组件必须定义build()函数

定义一个itemComponent的组件

@Component
struct itemComponent{//  private私有变量private content:string = 'Southern Wind'build(){// @ts-ignoreRow(){Image($r('app.media.gray')).width(30).height(30).margin(15)Text(this.content).fontSize(30).fontColor(Color.White)}.backgroundColor(Color.Gray).borderRadius(20).padding({right:20}).margin({top:15})}
}

在主组件中渲染


@Entry
@Component
struct Index {build() {Row() {Column() {Divider()itemComponent()itemComponent({content:'我是第二个文本'})itemComponent()itemComponent()}.width('100%')}.height('100%')}
}

效果:

请添加图片描述

这里可以看到,自定义组件定义的变量在渲染第二次的时候可以被赋值替换

自定义组件具有以下特点

可组合:允许开发者使用系统组件、及其属性和方法

可复用:自定义组件可以被其他组件复用,并作为不同的实例在不同的父组件或容器中使用。

数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

@Component
struct itemComponent{//  private私有变量private content:string = 'Southern Wind'@State isStatus:boolean = falsebuild(){// @ts-ignoreRow(){Image(this.isStatus ?$r('app.media.gray'):$r('app.media.gou')).width(30).height(30).margin(15)Text(this.content).fontSize(30).fontColor(Color.White)}.backgroundColor(Color.Gray).borderRadius(20).padding({right:20}).margin({top:15}).onClick(()=>{this.isStatus = !this.isStatus})}
}

图片交互时渲染可以采用三元表达式的写法进行书写

效果:

请添加图片描述

添加下滑线:TextDecorationType文本枚举类型

  .decoration({type:TextDecorationType.None})

请添加图片描述

完整代码及效果:


@Entry
@Component
struct Index {build() {Row() {Column() {Divider()itemComponent()itemComponent({content:'我是第二个文本'})itemComponent()itemComponent()}.width('100%')}.height('100%')}
}@Component
struct itemComponent{//  private私有变量private content:string = 'Southern Wind'@State isStatus:boolean = truebuild(){// @ts-ignoreRow(){Image(this.isStatus ?$r('app.media.gray'):$r('app.media.gou')).width(30).height(30).margin(15)Text(this.content).fontSize(30).fontColor(Color.White).decoration({type:this.isStatus ?TextDecorationType.LineThrough :TextDecorationType.None,color:Color.Black})}.backgroundColor(Color.Gray).borderRadius(20).padding({right:20}).margin({top:15}).onClick(()=>{this.isStatus = !this.isStatus})}
}

请添加图片描述
图标:请添加图片描述
请添加图片描述

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

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

相关文章

Dockerfile脚本编写流程及示例

学习dockerfile指令 Dockerfile 指令 说明 FROM 指定基础镜像 MAINTAINER 声明镜像的维护者 LABEL 添加元数据标签 RUN 在容器中执行命令 CMD 容器启动后默认执行的命令 EXPOSE 暴露容器的端口 ENV 设置环境变量 ADD 将文件、目录或远程文件添加到容器中 COP…

第五天 用Python批量处理Excel文件,实现自动化办公

用Python批量处理Excel文件,实现自动化办公 一、具体需求 有以下N个表,每个表的结构一样,如下: 需要把所有表数据汇总,把每个人的得分、积分分别加起来,然后按总积分排名,总积分一致时&#xff…

微信小程序nodejs+vue+uniapp视力保养眼镜店连锁预约系统

作为一个视力保养连锁预约的网络系统,数据流量是非常大的,所以系统的设计必须满足使用方便,操作灵活的要求。所以在设计视力保养连锁预约系统应达到以下目标: (1)界面要美观友好,检索要快捷简易…

java设计模式 开闭原则

开闭原则(Open-Closed Principle,OCP)是面向对象设计中的一个重要原则,它指导着我们如何设计和组织代码,以便使系统在扩展性和可维护性方面更加优秀。 开闭原则的定义是:软件实体(类、模块、函数…

嘉里大荣物流与极智嘉再度携手,合作助力物流服务高效升级

近日,全球仓储机器人引领者极智嘉(Geek)与3PL知名企业嘉里大荣物流联合宣布,双方再度携手,6周内共建全新自动化订单履行中心,赋能国际时尚运动品牌New Balance加速B2B和B2C订单交付,为其客户提供更高效便捷的物流服务。…

Java参数验证@Validated

就以登录接口为例&#xff0c;如果用户传参的时候没有传递帐号或者密码&#xff0c;会报错&#xff0c;但是报错的信息不够全面&#xff0c;前端人员不好判断是什么问题&#xff0c;这个时候就需要对参数进行一个校验 引入依赖 <dependency><groupId>org.hibernat…

cleer耳机怎么样?cleer和索尼哪个好?热门开放式耳机推荐!

不讲废话&#xff0c;如果你在南卡、Cleer和索尼之间犹豫不决&#xff0c;不知道该选哪个开放式耳机&#xff0c;直接进&#xff0c;跟你保证看完这篇绝对能够帮助你做出最佳决策。 玩开放式耳机也接近5年了&#xff0c;用过的耳机不下十几款&#xff0c;这次花了几千块入手了…

爬虫学习(一)

文章目录 文件目录结构打开文件操作 爬取网页的理解尝试 文件目录结构 打开文件操作 爬取网页的理解尝试 这个放回值为请求正常

接口压测指南

接口压测指南 一、 为什么需要进行接口压测二 、接口压测的目标是什么三、 用什么工具进行接口压测四、 接口压测核心指标4.1 JMeter的报告模板4.2 ApiPost报告模板 五、 接口慢如何排查5.1 大体排查思路5.2 排查工具5.3 压测经验 一、 为什么需要进行接口压测 突然有一天领导…

用友NC FileUploadServlet 反序列化RCE漏洞复现

0x01 产品简介 用友 NC 是用友网络科技股份有限公司开发的一款大型企业数字化平台。 0x02 漏洞概述 用友 NC nc.file.pub.imple.FileUploadServlet 反序列化漏洞,攻击者可通过该漏洞在服务器端任意执行代码,写入后门,获取服务器权限,进而控制整个web服务器。 0x03 复现环…

python爬虫进阶篇(异步)

学习完前面的基础知识后&#xff0c;我们会发现这些爬虫的效率实在是太低了。那么我们需要学习一些新的爬虫方式来进行信息的获取。 异步 使用python3.7后的版本中的异步进行爬取&#xff0c;多线程虽然快&#xff0c;但是异步才是爬虫真爱。 基本概念讲解 1.什么是异步&…

辛普森距离(SD,Sampson Distance)

定义 Sampson误差是复杂性介于代数误差和几何误差之间&#xff0c;但非常近似于几何误差的一种误差。 应用 SLAM对极几何中使用到SD来筛选内点&#xff1a; 1.随机采样8对匹配点 2.8点法求解基础矩阵 ​&#xff1b; 3.奇异值约束获取基础矩阵F&#xff1b; 4.计算误差&…

5.【自动驾驶与机器人中的SLAM技术】2D点云的scan matching算法 和 检测退化场景的思路

目录 1. 基于优化的点到点/线的配准2. 对似然场图像进行插值&#xff0c;提高匹配精度3. 对二维激光点云中会对SLAM功能产生退化场景的检测4. 在诸如扫地机器人等这样基于2D激光雷达导航的机器人&#xff0c;如何处理悬空/低矮物体5. 也欢迎大家来我的读书号--过千帆&#xff0…

Python Opencv实践 - Yolov3目标检测

本文使用CPU来做运算&#xff0c;未使用GPU。练习项目&#xff0c;参考了网上部分资料。 如果要用TensorFlow做检测&#xff0c;可以参考这里 使用GPU运行基于pytorch的yolov3代码的准备工作_little han的博客-CSDN博客文章浏览阅读943次。记录一下自己刚拿到带独显的电脑&a…

JVM简单了解内存溢出

JVM oracle官网文档&#xff1a;https://docs.oracle.com/en/java/javase/index.html 什么是JVM JVM(Java Virtual Machine)原名Java虚拟机&#xff0c;是一个可以执行Java字节码的虚拟计算机。它的作用是在不同平台上实现Java程序的跨平台运行&#xff0c;即使在不同的硬件…

Linux Makefile的认识及CMake的使用

1 Makefile的作用 Makefile 指的是一个叫 Makefile 的文件,里面提前写了一些指令。每次要自动化的完成一个比较复杂项目的自动编译用的时候,就在命令行输入“make”命令Makefile使用。使用Makefile可以 “智能” 的知道: 1 哪些文件需要先进行编译。 2 当某一文件在某次mak…

Linux进程间通信——共享内存

Linux进程间通信——共享内存 1、创建/打开共享内存1.1 shmget1.2 ftok 2、关联和接触关联2.1 shmat2.2 shmdt 3、删除共享内存3.1 shmctl 3.2 相关shell命令3.3 共享内存状态4、进程间通信5、shm和mmap的区别 原文链接 共享内存不同于内存映射区&#xff0c;它不属于任何进程…

Android,JNI开发和NDK之间的联系

Android&#xff0c;JNI开发和NDK。 1.jni和ndk jni是在jdk中就有出现的 在我们jdk路径中 D:\java\jdk11\include 这就是jdk中的jni Android开发环境中的ndk也有jni&#xff0c; D:\Android\sdk\ndk\20.0.5594570\toolchains\llvm\prebuilt\windows-x86_64\sysroot\usr\in…

实体、协议、服务和服务访问点

目录 一、概念 二、相邻两层之间的关系 三、面向连接服务的特点 四、无连接服务的特点 五、著名的协议举例 一、概念 实体&#xff08;entity&#xff09;表示任何可发送或接收信息的硬件或软件进程。同机器上同一层的实体叫做对等实体&#xff08;peer entity&#xff0…

学嵌入式,已经会用stm32做各种小东西了,下一步是什么

学嵌入式&#xff0c;已经会用stm32做各种小东西了&#xff0c;下一步是什么&#xff0c;研究stm32的内部吗&#xff1f; 针对题主这种类型的&#xff0c;首先我想提出几个技术问题。 1&#xff0c;除了那几个常用的外设&#xff0c;stm32上集成的众多外设是否都有实际的使用经…