ArkTS 基础语法:声明式 UI 描述与自定义组件

ops/2025/1/25 8:55:15/

1. ArkTS 简介

ArkTS 是 HarmonyOS 应用开发中的一种编程语言,它结合了 TypeScript 的类型检查和声明式 UI 描述方式,帮助开发者更高效地构建用户界面。

2. 声明式 UI 描述

ArkTS 使用声明式语法来定义 UI 结构,通过组件、属性和事件配置实现用户界面开发。

2.1 创建组件

ArkTS 提供了丰富的内置组件,如 TextButtonImage 等,使用这些组件可以快速构建界面。

@Entry
@Component
struct SimpleUI {build() {Text("欢迎使用 ArkUI").fontSize(24).textAlign(TextAlign.Center);}
}
2.2 配置属性

通过链式方法为组件配置属性,使 UI 元素具有特定的样式或行为。

Text("设置字体大小与颜色").fontSize(20).textColor(Color.Red).italic(true);
2.3 配置事件

为组件绑定事件处理器以响应用户交互。

 @State myTest: uiltin">string = "world";Text(`hello ${this.myTest}`).fontSize(50);Button('点我啊').onClick(()=>{this.myTest = 'ArkTS'})
2.4 配置子组件

使用容器组件如 ColumnRow 将多个子组件组合在一起。

Column() {Text("标题 1").fontSize(18);Text("标题 2").fontSize(16);
}

3. 自定义组件

在 ArkTS 中,可以通过定义自定义组件来实现代码的复用与模块化。

/** 封装组件,并调用* */
@Entry
@Component
struct Page{build() {Column(){// 调用组件,显示内容Header()}}
}// 创建自定义组件
@Component
export struct Header{build() {Column(){Text('Header').width('100%')  // 宽度.height(60) // 高度.backgroundColor(Color.Red) // 背景色.textAlign(TextAlign.Center)  // 对齐方式居中}}
}

使用其他文件中已经封装好的组件

/*调用其他 文件中 export 的组件*/
import { Header} from './Page'@Entry
@Component
struct Page1 {build() {Column(){Header()}}
}

4. 通用属性

ArkTS 提供了大量通用属性,用于设置组件的样式和布局。

属性描述示例
fontSize()设置字体大小Text().fontSize(16)
textColor()设置文字颜色Text().textColor(Color.Red)
width()设置宽度Button().width(200)
height()设置高度Button().height(50)
padding()设置内边距Column().padding(10)
margin()设置外边距Row().margin(15)

华为官方文档

5. 尺寸设置:px 与 vp 的区别

单位描述应用场景
px物理像素单位,表示屏幕上的真实像素大小。精细调整组件尺寸时使用
vp虚拟像素单位,适应不同分辨率的屏幕。适用于跨设备 UI 设计

6. 开发示例:计数器组件

代码示例
@Entry
@Component
struct CounterComponent {@State count: uiltin">number = 0;build() {Column() {Text(`当前计数:${this.count}`).fontSize(24).textAlign(TextAlign.Center);Button("点击增加计数").onClick(() => {this.count++;}).width(200).height(50);}}
}
代码解析
语法/方法描述
@State定义组件状态,状态变化时自动刷新 UI
this.count++按钮点击时增加计数器数值
.fontSize()设置文字的字体大小
.onClick()设置按钮点击事件

凡是过去,皆为序章;凡是未来,皆有可期。

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

相关文章

【Rust自学】11.8. 忽略测试

喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 11.8.1. 忽略某些测试,执行剩余测试 某些测试执行起来非常耗时,所以在大部分情况下会想在运行cargo test时忽略它…

openEuler22.03系统使用Kolla-ansible搭建OpenStack

Kolla-ansible 是一个利用 Ansible 自动化工具来搭建 OpenStack 云平台的开源项目,它通过容器化的方式部署 OpenStack 服务,能够简化安装过程、提高部署效率并增强系统的可维护性。 前置环境准备: 系统:openEuler-22.03-LTS-SP4 配置&…

EFCore HasDefaultValueSql (续1 ValueGeneratedOnAdd)

前情:EFCore HasDefaultValueSql 小伙伴在使用 HasDefaultValueSql 时,对相关的 ValueGeneratedOnAdd 也有了疑问: ValueGeneratedOnAdd 和 HasDefaultValueSql 是 Entity Framework Core 中用于管理字段默认值的两种不同配置方式&#xff0…

项目实战--网页五子棋(登录注册界面)(2)

上期我们实现了用户模块的后端代码&#xff0c;这期我们来实现登录界面的前端代码&#xff0c;这里主要讲解前后端交互的代码。这里我事先已经写好了一个简单的登录界面. 1. 登录页面 1. 页面实现 login.html: <!DOCTYPE html> <html lang"ch"> <…

策略模式详解与应用

策略模式&#xff08;Strategy Pattern&#xff09;&#xff0c;是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;并将每个算法封装起来&#xff0c;使它们可以互相替换&#xff0c;而应用程序可以在运行时选择使用哪一个算法。策略模式使得算法的变化独立于使…

【OpenCV】第二章 图像处理基础

2.1 图像的读取与显示 图像的读取与显示是进行任何图像处理工作的第一步。在Python中&#xff0c;使用OpenCV库可以轻松实现这一功能。OpenCV&#xff08;Open Source Computer Vision Library&#xff09;提供了丰富的接口和函数&#xff0c;使得图像的操作变得直观和高效。本…

《探索 PC 端的开源神经网络多模态模型宝藏》

《探索 PC 端的开源神经网络多模态模型宝藏》 一、多模态模型&#xff1a;开启智能交互新纪元二、主流 PC 端开源多模态模型大赏1. Obsidian&#xff1a;轻量级多模态先锋2. GLM-Edge 系列&#xff1a;移动端与 PC 端的全能选手3. Minicpm-llama3-v2.6&#xff1a;紧凑高效的多…

C#语言的数据库编程

C#语言的数据库编程 在现代软件开发中&#xff0c;数据库是不可或缺的一部分。无论是企业级应用还是个人项目&#xff0c;数据的存储与管理都是程序的核心功能之一。C#作为一种强类型、面向对象的编程语言&#xff0c;广泛应用于Windows平台的开发&#xff0c;尤其是在构建与数…