当前位置: 首页 > news >正文

HarmonyOS应用开发学习-ArkTs声明式UI描述

ArkTs声明式UI描述

1 创建组件

声明式UI描述

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

创建组件

根据组件构造方法的不同,创建组件包含有参数和无参数两种方式,

无参数

如果组件的接口定义没有包含必选构造参数,则组件后面的"0"不需要配置任何内容。例如,Divider组件不包含构造参数:

Column() {//文字组件  无参数Text()//分割线组件  无参数Divider()
}

有参数

如果组件的接口定义包含构造参数,则在组件后面的“()“配置相应参数。

  • Image组件的必选参数src。
 //图片组件,必须要参数,否则报错
Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')
  • Text组件的非必选参数content。
//文字组件  有参数
Text('HELLO') 
  • 变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。

例如,设置变量或表达式来构造lmage和Text组件的参数。

@Entry
@Component
struct Index { @State title:string ="你好!";img_src:string= 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';public p:string ='p'; //公共的private n:number=10; //私有的protected flag:boolean = true; //受保护的//UI描述build() {Row() {//容器组件:水平方向布局容器Column() {//容器组件:垂直方向布局容器Text(`${this.title}${this.n}`);Image(this.img_src);}.width('100%')}.height('100%')}
}

2 配置属性

属性方法以".“链式调用的方式配置系统组件的样式和其他属性,建议每个属性方法单独写一行

  • 配置Text组件的字体大小。
Text('text').fontSize(30) 
  • 配置组件的多个属性
Image(this.img_src).width(300).height(100)
  • 除了直接传递常量参数外,还可以传递变量或表达式
Text('he11o')
.fontSize(this.size)
Image('test.jpg')
.width(this.count%2===0?100:200)//表达式定义宽度
.height(this.offset + 100)
  • 对于系统组件,ArkUl还为其属性预定义了一些枚举类型供开发者调用,枚举类型可以作为参数传递,但必须满足参数类型要求。

例如,可以按以下方式配置Text组件的颜色和字体样式

Text('he11o')
.fontsize(20)
.fontcolor(color.Red)//枚举类型定义颜色
.fontweight(fontweight.Bo1d)//枚举类型加粗

3 配置事件

事件方法以”.“链式调用的方式配置系统组件支持的事件,建议每个事件方法单独写一行。

  • 使用箭头函数配置组件的事件方法。
Button('click me')//箭头函数配置事件,点击按钮改变title变量的值.onClick(()=>{this.title = '按钮点击了'})
  • 使用匿名函数表达式配置组件的事件方法,要求使用bind,以确保函数体中的this指向当前组件
Button('click me')// 普通函数配置事件,this指向不对会直接写报错,所以需要设置bind属性.onClick(function(){this.title = "标题点击"}.bind(this))

使用组件的成员函数配置组件的事件方法。

普通函数

//函数的定义myHandler():void{this.title = "myHandler"}
...
.onClick(this.myHandler.bind(this))

箭头函数

//函数的定义
myHandler2 = ():void=>{this.title = "myHandler2"}
...
.onClick(this.myHandler2)

相关文章:

HarmonyOS应用开发学习-ArkTs声明式UI描述

ArkTs声明式UI描述 1 创建组件 声明式UI描述 ArKTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑 创建组件 根据组件构造方法的不同,创建组件包含有参数和无参…...

Redis20-通信协议

目录 RESP协议 概述 数据类型 模拟Redis客户端 RESP协议 概述 Redis是一个CS架构的软件,通信一般分两步(不包括pipeline和PubSub): 客户端(client)向服务端(server)发送一条命…...

Unity Shader变体优化与故障排除技巧

在 Unity 中编写着色器时,我们可以方便地在一个源文件中包含多个特性、通道和分支逻辑。在构建时,着色器源文件会被编译成着色器程序,这些程序包含一个或多个变体。变体是该着色器在满足一组条件后生成的版本,这通常会导致线性执行…...

数据结构——时间复杂度和空间复杂度

目录 时间复杂度 什么是时间复杂度 常见时间复杂度类型 如何计算时间复杂度 空间复杂度 什么是空间复杂度 常见的空间复杂度类型 如何计算空间复杂度 时间复杂度和空间复杂度是评估算法性能的两个重要指标。 时间复杂度 什么是时间复杂度 时间复杂度描述了算法执行所需…...

(echarts) 饼图设置滚动图例

(echarts) 饼图设置滚动图例 效果: 代码: // 图例 legend: {type: scroll,orient: vertical,right: 10,top: 20,bottom: 20,data: data.legendData},参考:官网-可滚动的图例 https://echarts.apache.org/examples/zh/editor.html?cpie-leg…...

Java spring SSM框架--mybatis

一、介绍 Spring 框架是一个资源整合的框架,可以整合一切可以整合的资源(Spring 自身和第三方),是一个庞大的生态,包含很多子框架:Spring Framework、Spring Boot、Spring Data、Spring Cloud…… 其中Spr…...

Python知识点:如何使用Arduino与Python进行物联网项目

Arduino和Python是物联网(IoT)项目中常用的两种技术。Arduino是一个开源的硬件平台,而Python是一种高级编程语言,它们可以结合使用来创建各种智能设备和系统。以下是使用Arduino和Python进行物联网项目的一般步骤: 确定项目需求: …...

论文复现_从 CONAN 中收集 TPL 数据集

1. 概述 CONAN:Conan是一个用于C项目的开源包管理工具。 它的主要目标是简化C项目的依赖关系管理过程,使开发人员能够更轻松地集成、构建和分享C库。 其中有一些比较独特的功能,例如:版本管理、第三方库管理等。 TPL 数据集&…...

使用Docker将Java项目打包并部署到CentOS服务器的详细教程。

当然,让我们将上述步骤进一步细化,以便更好地理解整个过程。 前提条件 一个Java项目CentOS服务器,并且已安装DockerJava项目可以正常在本地运行具有服务器访问权限 ———————————————————————————————————…...

嘉立创eda布线宽度

https://prodocs.lceda.cn/cn/pcb/route-routing-width/#%E5%B8%83%E7%BA%BF%E5%AE%BD%E5%BA%A6...

硬件面试经典 100 题(31~50 题)

31、多级放大电路的级间耦合方式有哪几种?哪种耦合方式的电路零点偏移最严重?哪种耦合方式可以实现阻抗变换? 有三种耦合方式:直接耦合、阻容耦合、变压器耦合。直接耦合的电路零点漂移最严重,变压器耦合的电路可以实现…...

5G:下一代无线通信技术的全面解析

随着科技的不断进步,移动通信技术也在飞速发展。从2G到4G,我们见证了无线网络的巨大变革,而现在,5G已经悄然来临。作为下一代无线通信技术,5G不仅将带来更快的速度和更低的延迟,还将开启全新的应用场景和商…...

关于refresh_token

前文介绍过jwt的一般使用场景,用户登录成功后获得jwt,其中包含用户相关信息,主要是在前端要用到的属性(比如姓名、应用角色[这个前端后都用得着]等)、在后端要用到的属性(比如登录IP、终端唯一标识&#xf…...

Linux网络:基于OS的网络架构

Linux网络:OS视角下的网络架构 网络分层模型OSI 七层模型TCP/IP 五层模型 协议操作系统与网络网络相关命令ifconfigpingnetstat 本博客将基于操作系统,讲解计算机网络的设计理念,帮助大家理解操作系统与网络之间的关系。 网络分层模型 网络…...

UEC++学习(十六)变量添加中文注释、ui设置中文文本

(一)变量添加中文注释 在C 项目中创建变量,并在蓝图中显示变量的英文名同时附带中文注释,可以使用UPROPERTY 的 ToolTip 元数据属性来实现 UPROPERTY(EditAnywhere, meta (ToolTip "弹夹最大容量"))int32 MagCapacit…...

Redis延迟双删

1、何为延时双删 Redis延迟双删是一种在数据更新操作中确保缓存与数据库数据一致性的策略,通过两次缓存删除操作间隔一段延时来减少数据不一致的问题。 在并发环境下,多个请求同时对同一数据进行读写时,如果没有妥善处理,很容易…...

WO Mic 手机变身免费麦克风

目录 一、主要特点 1.支持多种连接方式 2.应用广泛 3.低延迟 4.简易配置 5.自动连接 6.音频格式 二、软件下载 三、软件安装 四、系统连接 五、测试 直播的时候,上课的时候,会议的时候……突然发现没有麦克风或者电脑麦克风有故障,这可怎么办呢?今天给大家介绍一…...

MQ死信对列

面试题:你们是如何保证消息不丢失的? 1、什么是死信 死信就是消息在特定场景下的一种表现形式,这些场景包括: 1. 消息被拒绝访问,即消费者返回 basicNack 的信号时 或者拒绝basicReject 2. 消费者发生异常&#xff0…...

springboot乡镇小区管理系统-计算机毕业设计源码73685

摘 要 过去使用手工的管理方式对乡镇小区进行管理,造成了管理繁琐、难以维护等问题,如今使用计算机对停车场停车的各项基本信息进行管理,比起手工管理来说既方便又简单,而且具有易于管理、搜索速度快、存储量大等多个优点。将其使…...

基于vue框架的4S店汽车维修保养管理系统28a7y(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。

系统程序文件列表 项目功能:客户,技师,车辆信息,财务,客户维修,维修分配,维修订单,保养预约,保养分配,保养订单,维修费用,保养费用 开题报告内容 基于Vue框架的4S店汽车维修保养管理系统 开题报告 一、项目背景与意义 随着汽车产业的迅猛发展,4S店作…...

小米开放式耳机值得买吗?南卡、小米、漫步者一周横评

​大家好,最近对开放式耳机比较感兴趣,作为一名数码博主以及多年的耳机发烧友,今天想给大家测评一下开放式耳机,这类耳机目前在数码圈非常火热!很多喜欢运动的小伙伴都选择了这款耳机,搭配运动场景听歌&…...

解决oracel锁表问题;SQL 错误 [54] [61000]: ORA-00054: 资源正忙

问题描述; SQL 错误 [54] [61000]: ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源, 或者超时失效 select session_id from v$locked_object;查看这些 session_id 对应的会话的详细信息,包括用户名、机器名、程序等,9596等是select se…...

Jfinal与hibernate-validator实现后台表单

一. pom.xml配置 jfianl maven项目基础上增加 <dependency><groupId>org.hibernate</groupId><artifactId>hibernate-validator</artifactId><version>${hibernate-validator.version}</version></dependency><dependency…...

ansible playbook使用jinja2语法渲染inventory下的主机名和IP到/etc/hosts

1. ansible inventory 下面的 hosts内容如下&#xff1a; [all_host] app1 ansible_host10.2.162.147 app2 ansible_host10.2.162.148 app3 ansible_host10.2.162.149 app4 ansible_host10.2.162.150 app5 ansible_host10.2.162.151[nginx] app12. hosts.j2内容如下 127.0.0…...

张飞硬件1~9电阻篇笔记

电阻有标定值和实际值&#xff0c;关于误差的问题&#xff1a; 精密的电流、电压采样可能会用到1%的精度。如果只是做限流用途的话&#xff0c;用5%就足够。 电阻功率&#xff1a;标定值、额定值、瞬态值&#xff1a; 标定值由封装所决定&#xff0c;例如5W额定值由电路中平…...

探索Golang的微观世界:用net/trace包追踪网络操作

标题&#xff1a;探索Golang的微观世界&#xff1a;用net/trace包追踪网络操作 在Go语言的丰富生态系统中&#xff0c;net/trace包是一个强大的工具&#xff0c;它允许开发者深入网络请求的微观世界&#xff0c;洞察每一次数据的流动和操作的执行。本文将详细探讨如何使用net/…...

Unity开发抖音小游戏广告部分接入

Unity开发抖音小游戏广告部分接入 介绍环境确保开通流量主获取广告位广告部分代码测试如下总结 介绍 最近在使用Unity做抖音小游戏这块的内容&#xff0c;因为要接入广告&#xff0c;所以这里我把我接入广告的部分代码和经验分享一下。 环境确保 根据抖音官方的文档我们是先…...

World of Warcraft [CLASSIC] 80 WLK [Gundrak] BUG

World of Warcraft [CLASSIC] 80 WLK [Gundrak] BUG 魔兽世界怀旧版&#xff0c;80级&#xff0c;5人副本古达克&#xff0c;科技队伍&#xff08;BUG队伍&#xff09; 副本有两个门口 这样看&#xff0c;是不是觉得很怪。是的&#xff0c;和图1刚好相反的。 因此应该翻转180…...

极狐GitLab 密钥推送保护如何保护密钥信息被泄露?

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门面向中国程序员和企业提供企业级一体化 DevOps 平台&#xff0c;用来帮助用户实现需求管理、源代码托管、CI/CD、安全合规&#xff0c;而且所有的操作都是在一个平台上进行&#xff0c;省事省心省钱。可以一键安装极狐GitL…...

Qt+TSC打印机调试

前言 最近被TSC打印机整的死去活来&#xff0c;记录一下使用方法。 一、环境 Qt5.15.2 mingw tsc TE244 二、使用步骤 1.引入库 从官网下载windows C SDK&#xff0c;引入库&#xff0c;以下是.pro文件 QT core gui printsupportgreaterThan(QT_MAJOR_VERSION, 4)…...