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

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

news 来源：原创 2025/6/18 1:01:49

1. ArkTS 简介

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

2. 声明式 UI 描述

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

2.1 创建组件

ArkTS 提供了丰富的内置组件，如 Text、Button、Image 等，使用这些组件可以快速构建界面。

@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: string = "world";Text(`hello ${this.myTest}`).fontSize(50);Button('点我啊').onClick(()=>{this.myTest = 'ArkTS'})

2.4 配置子组件

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

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: 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()`	设置按钮点击事件

凡是过去，皆为序章；凡是未来，皆有可期。

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

1. ArkTS 简介 ArkTS 是 HarmonyOS 应用开发中的一种编程语言，它结合了 TypeScript 的类型检查和声明式 UI 描述方式，帮助开发者更高效地构建用户界面。 2. 声明式 UI 描述 ArkTS 使用声明式语法来定义 UI 结构，通过组件、属性和事件配置实…...

编程日记 2025/6/3 22:58:10

文章目录 list的模拟实现list的迭代器begin()和end() list的模拟实现 #pragma once #include<iostream> #include<list>using namespace std;namespace wbc {// 类模版template<class T>struct list_node // 链表的节点{T _data;list_node<T>* _next;…...

编程日记 2025/6/2 5:36:46

图解Git——分支的新建与合并《Pro Git》

⭐分支的新建与合并先引入一个实际开发的工作流： 开发某个网站。为实现某个新的需求，创建一个分支。在这个分支上开展工作。正在此时，你突然接到一个电话说有个很严重的问题需要紧急修补。你将按照如下方式来处理： 切换到你…...

编程日记 2025/6/2 6:08:12

SQLite 语法快速入门

SQLite 是一个软件库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。提供一个免费的在线SQLite编辑器 （0）常用命令 # 格式化 .header on .mode column .timer on# 查看表格 .tables# 查看表结构(建表语句) .schema …...

编程日记 2025/5/29 16:55:49

高速光电探测器设计 PIN APD铟镓砷TIA放大脉冲误码测试800-1700nm

高速光电探测器PIN APD铟镓砷TIA放大脉冲误码测试800-1700nm （对标:索雷博APD431A） （对标:索雷博APD431A） （对标:索雷博APD431A） 规格参数: 波长范围:800-1700nm 输出带宽:DC-400MHz（-3dB&…...

编程日记 2025/5/31 16:21:09

【Linux】【内存】Buddy内存分配基础 NUMA架构

【Linux】【内存】Buddy内存分配基础 NUMA架构 NUMA架构在 NUMA 架构中，计算机的多个 CPU 被划分为不同的处理单元，每个处理单元有一个本地内存。这些内存被称为内存节点（memory node）。处理器尽量访问自己的本地内存 node_da…...

编程日记 2025/5/25 21:17:39

【机器学习：十九、反向传播】

1. 计算图和导数计算图的概念计算图（Computation Graph）是一种有向无环图，用于表示数学表达式中的计算过程。每个节点表示一个操作或变量，每条边表示操作的依赖关系。通过计算图，可以轻松理解和实现反向传播。计算…...

编程日记 2025/6/4 4:15:14

使用中间件自动化部署java应用

为了实现你在 IntelliJ IDEA 中打包项目并通过工具推送到两个 Docker 服务器（172.168.0.1 和 172.168.0.12），并在推送后自动或手动重启容器，我们可以按照以下步骤进行操作： 在 IntelliJ IDEA 中配置 Maven 或 Gradle 打…...

编程日记 2025/6/4 17:25:45

Vue.js开发入门：从零开始搭建你的第一个项目

前言嘿，小伙伴们！今天咱们来聊聊 Vue.js，一个超火的前端框架。如果你是编程小白，别怕，跟着我一步步来，保证你能轻松上手，搭建起属于自己的第一个 Vue 项目。Vue.js 可能听起来有点高大上&#…...

编程日记 2025/5/31 12:59:22

基于大语言模型的组合优化

摘要：组合优化（Combinatorial Optimization, CO）对于提高工程应用的效率和性能至关重要。随着问题规模的增大和依赖关系的复杂化，找到最优解变得极具挑战性。在处理现实世界的工程问题时，基于纯数学推理的算法存在局限…...

编程日记 2025/5/31 0:30:28

mySQL安装（LINUX)

一、1. 下载并安装MySQL官方的 Yum Repository 1、连接云服务器，进入opt 2、下载安装包 wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm 3、解压 rpm -ivh mysql-community-release-el7-5.noarch.rpm 4、安装 yum install mysql-commu…...

编程日记 2025/6/1 0:44:41

【机器学习】农业 4.0 背后的智慧引擎：机器学习助力精准农事决策

我的个人主页我的领域：人工智能篇，希望能帮助到大家！！！👍点赞收藏❤ 在当今数字化浪潮汹涌澎湃之际，农业领域正经历着一场前所未有的深刻变革，大踏步迈向农业 4.0时代。这一时代…...

编程日记 2025/5/30 9:03:31

在 Azure 100 学生订阅中新建一台 Ubuntu VPS，并通过 Docker 部署 Nginx 服务器

今天来和大家分享一下如何在 Azure 100 学生订阅中创建一台 Ubuntu VPS，并在其上通过 Docker 部署 Nginx 服务器。在这个过程中，我们将一步步走过每一个细节，希望能帮助到大家。 Docker 和 Nginx 简介 Docker 是一个开源的容器化平台&#…...

编程日记 2025/6/3 1:31:01

快速、可靠且高性价比的定制IP模式提升芯片设计公司竞争力

作者：Karthik Gopal，SmartDV Technologies亚洲区总经理智权半导体科技（厦门）有限公司总经理无论是在出货量巨大的消费电子市场，还是针对特定应用的细分芯片市场，差异化芯片设计带来的定制化需求也在芯片…...

编程日记 2025/6/1 11:22:43

Linux常用命令大全

mv详解目录 Linux 常用命令大全 1. ls 指令 2. touch 指令 3. pwd 指令 4. mkdir 指令 5. cd 指令 6. rmdir 和 rm 指令 7. man 指令 8. cp 指令 9. mv 指令 10. cat 指令 11. more 指令 12. less 指令 13. head 指令 14. tail 指令 15. find 指令 16. grep 指…...

编程日记 2025/6/4 14:28:28

K-均值聚类算法

K-均值聚类算法是一种常用的无监督学习算法，用于将数据集划分为K个不同的簇。它的基本思想是通过迭代将样本点划分到最相邻的簇中，以最小化各个簇内的平均距离。下面我们来详细讲解K-均值聚类算法的步骤及其优缺点。步骤： 1. 随机选择K个质…...

编程日记 2025/6/3 16:19:04

Windows 环境下安装和启动 Redis 服务

在 Windows 环境下安装和启动 Redis 服务可以通过多种方式实现，下面将详细介绍几种常见的方法。我们将重点介绍通过 Chocolatey 包管理器、Docker 容器以及 MSOpenTech 提供的官方移植版来安装 Redis。方法一：使用 Chocolatey 安装 Redis Chocolatey …...

编程日记 2025/6/4 11:24:48

关于在windows系统中编译ffmpeg并导入到自己项目中这件事

关于在windows系统中编译ffmpeg并导入到自己项目中这件事前因（可跳过不看） 前阵子由于秋招需求，写了一个简易的安卓播放器，最终因为时间问题还有一些功能没有实现着实可惜，如：倍速播放，快进操…...

编程日记 2025/5/30 5:07:44

实战开发：基于用户反馈筛选与分析系统的实现

引言在当今的数字化社会中，用户反馈是企业决策的重要依据。无论是电商平台、社交网络，还是产品服务，收集用户反馈并加以分析，有助于提升用户体验，改善服务质量。然而，面对海量的用户反馈，如何有…...

编程日记 2025/6/3 4:13:07

Android SystemUI——服务启动流程（二）

在 Andorid 系统源码中，package/apps下放的是系统内置的一些 APP，例如 Settings、Camera、Phone、Message 等等。而在 framework/base/package 下，它们也是系统的 APP，SystemUI 就在此目录下。它控制着整个 Android 系统的界面&am…...

编程日记 2025/6/2 4:27:23

拷贝构造函数

文章目录一、4. 拷贝构造函数今天我们来学习拷贝构造函数。一、4. 拷贝构造函数如果⼀个构造函数的第⼀个参数是自身类型的引用，且任何额外的参数都有默认值，则此叫做拷贝构造函数，也就是说拷贝构造是⼀个特殊的构造函数。它的形式是这…...

编程日记 2025/6/1 10:35:21

解析OVN架构及其在OpenStack中的集成

引言随着云计算技术的发展，虚拟化网络成为云平台不可或缺的一部分。为了更好地管理和控制虚拟网络，Open Virtual Network (OVN) 应运而生。作为Open vSwitch (OVS) 的扩展，OVN 提供了对虚拟网络抽象的支持，使得大规模部署和管理…...

编程日记 2025/6/2 18:38:25

面试加分项：Android Framework PMS 全面概述和知识要点

在Android面试时，懂得越多越深android framework的知识，越为自己加分。目录第一章：PMS 基础知识 1.1 PMS 定义与工作原理 1.2 PMS 的主要任务 1.3 PMS 与相关组件的交互第二章：PMS 的核心功能 2.1 应用安装与卸载机制 2.2 应用更新与版本管理 2.3 组件管理第…...

编程日记 2025/6/3 17:37:55

征服Windows版nginx（2）

1.配置Nginx 编辑Nginx的配置文件（通常是nginx.conf），找到安装Nginx位置，如下路径： D:\nginx-1.26.2\conf 双击打开nginx.CONF编辑，在http块中添加一个新的server块，用于指定Vue项目的静态文件…...

编程日记 2025/6/2 12:56:26

QML states和transitions的使用

一、介绍 1、states Qml states是指在Qml中定义的一组状态（States），用于管理UI元素的状态转换和属性变化。每个状态都包含一组属性值的集合，并且可以在不同的状态间进行切换。通过定义不同的状态，可以在不同的应用场…...

编程日记 2025/6/4 3:36:20

flask_sqlalchemy relationship 子表排序

背景： 使用flask_sqlalchemy 的orm 时总不可避免的遇到子表排序问题材料： 省略制作： 直接看下面2段代码片段（一对多关系组合），自行理解： 1、多的一方实体 from .exts import db from f…...

编程日记 2025/6/2 6:47:18

python+pymysql

python操作mysql 一、python操作数据库 1、下载pymysql 库， 方法一：pip3 install pymysql 或pip install pymysql 方法二：在pycharm中setting下载pymysql 2、打开虚拟机上的数据库 3、pymysql连接 dbpymysql.Connection(host&qu…...

编程日记 2025/6/4 3:54:08

HAL库中断相关函数

目录中断相关函数函数：HAL_SuspendTick()和HAL_ResumeTick() 涉及手册： 涉及寄存器： 涉及位： 函数：HAL_UART_IRQHandler(&huart3) 存在位置： 拓展： 函数：HAL_UARTEx…...

编程日记 2025/5/30 5:13:32

薪资协商注意事项

根据从AI（豆包kimi）中查询的内容，以及实际面试中的经验，进行整理，供大家参考： 薪资构成：了解薪水的固定工资、绩效、补贴、奖金及其他福利等具体构成。进行沟通时需要确认清楚是税前还是税后沟…...

编程日记 2025/6/1 18:06:02

【机器学习】Kaggle实战Rossmann商店销售预测（项目背景、数据介绍/加载/合并、特征工程、构建模型、模型预测）

文章目录 1、项目背景2、数据介绍3、数据加载3.1 查看数据3.2 空数据处理3.2.1 训练数据3.2.2 测试数据3.3.3 商店数据处理3.3.4 销售时间关系 4、合并数据5、特征工程6、构建训练数据和测试数据7、数据属性间相关性系数8、提取模型训练的数据集9、构建模型9.1 定义评价函数9.2…...

编程日记 2025/6/3 1:58:48

简化计算步骤以减少误差

简化计算步骤以减少误差同样一个计算问题，若能减少运算次数，既可以节省计算机的计算时间，还可以减小舍人误差。例计算 x 255 x^{255} x255的值. 如果逐个相乘要用 254 次乘法，但若写成 x 255 x ⋅ x 2 ⋅ x 4 ⋅ x 8 ⋅…...

编程日记 2025/5/28 7:49:57

利用AI大模型和Mermaid生成流程图

核心点1：利用大模型生成流程图的语句（Code） 确定业务流程： 用户需要明确要绘制的业务流程，包括主要步骤、决策点以及各步骤之间的关系。将确定的业务流程以文字形式描述出来。生成Mermaid代码： 将描述好的…...

编程日记 2025/6/3 15:34:09

SqlServer 杂项知识整理

目录一. decimal字段类型二. 查询时加锁一. decimal字段类型 ⏹decimal(8,3): 整数5位，小数3位。一共8位。如果输入 20，会自动格式化为 20.000如果输入 20.1，会自动格式化为 20.100 -- 给数据库新增一个字段,类型要求是decimal类型 ALT…...

编程日记 2025/5/31 19:47:41

【Uniapp-Vue3】@import导入css样式及scss变量用法与static目录

一、import导入css样式在项目文件中创建一个common文件夹，下面创建一个css文件夹，里面放上style.css文件，编写的是公共样式，我们现在要在App.vue中引入该样式。在App.vue中引入该样式，这样就会使样式全局生效&#…...

编程日记 2025/6/2 15:26:28

Maven 中 scope=provided 和 optional=true 的区别

先说效果，maven依赖声明中加了<scope>provided</scope>，或者加了<optional>true</optional>，从效果上看是一样的，都会中断依赖传递，观察下图： 图中，项目B分别依赖了C和…...

编程日记 2025/6/3 9:53:19

自动化测试与智能化测试的区别和关系

自动化测试与智能化测试的区别和关系在现代软件开发过程中，测试环节是保证软件质量的重要组成部分。随着技术的不断进步，传统的手工测试方法逐渐无法满足高效、精确的需求，自动化测试（Automated Testing）应运而生。近…...

编程日记 2025/6/2 7:15:55

django在线考试系统

Django在线考试系统是一种基于Django框架开发的在线考试平台，它提供了完整的在线考试解决方案。一、系统概述 Django在线考试系统旨在为用户提供便捷、高效的在线考试环境，满足教育机构、企业、个人等不同场景下的考试需求。通过该系统，用…...

编程日记 2025/6/2 14:58:47

centos9设置静态ip

CentOS 9 默认使用 NetworkManager 管理网络，而nmcli是 NetworkManager 命令行接口的缩写，是一个用来进行网络配置、管理网络连接的命令工具，可以简化网络设置，尤其是在无头（没有图形界面）环境下。 1、 cd…...

编程日记 2025/5/31 22:26:05

使用postMessage解决iframe与父页面传参

接收传递的消息时，可以将 window.addEventListener(message, function(e) { console.log(e.data) }) 写法，更换为 window.onmessage async function(e) {} 可以避免消息发送后，多次接收该参数父页面js IframeEvent(){const send …...

编程日记 2025/6/2 23:05:36

浅谈云计算05 | 云存储等级及其接口工作原理

一、云存储设备在当今数字化飞速发展的时代，数据已然成为个人、企业乃至整个社会的核心资产。从日常生活中的珍贵照片、视频，到企业运营里的关键业务文档、客户资料，数据量呈爆炸式增长。面对海量的数据，如何安全、高效且便捷地存…...

编程日记 2025/5/30 16:38:14

DolphinScheduler自身容错导致的服务器持续崩溃重大问题的排查与解决

01 问题复现在DolphinScheduler中有如下一个Shell任务： current_timestamp() { date "%Y-%m-%d %H:%M:%S" }TIMESTAMP$(current_timestamp) echo $TIMESTAMP sleep 60 在DolphinScheduler将工作流执行策略设置为并行： 定时周期调度设置…...

编程日记 2025/6/4 14:12:08

Linux 容器漏洞

定义：Linux 容器漏洞是指在容器技术（如 Docker、LXC 等）运行环境中存在的安全弱点。这些漏洞可能存在于容器镜像本身、容器运行时（如 runc）、容器编排工具（如 Kubernetes）或者容器与主机之间的交…...

编程日记 2025/5/29 16:46:00

前端依赖安装指南

前端依赖安装指南一、NVM管理工具安装 1.在 Windows 上安装下载 NVM for Windows 的安装程序：(最新版本可以在 nvm-windows Releases 页面找到)运行下载的安装程序并按步骤操作。 2.配置 NVM exe安装自动配置环境变量 3. 验证 NVM 安装验证 NVM 是否成功…...

编程日记 2025/5/31 0:36:14

滑动窗口限流算法：基于Redis有序集合的实现与优化

滑动窗口限流算法是一种基于时间窗口的流量控制策略，它将时间划分为固定大小的窗口，并在每个窗口内记录请求次数。通过动态滑动窗口，算法能够灵活调整限流速率，以应对流量的波动。算法核心步骤统计窗口内的请求数量&#xff1…...

编程日记 2025/5/30 17:25:00

JavaRestClient 客户端初始化+索引库操作

1. 介绍 ES官方提供了各种不同语言的客户端，用来操作ES。这些客户端的本质就是组装DSL语句，通过http请求发送给ES。 Elasticsearch目前最新版本是8.0，其java客户端有很大变化。不过大多数企业使用的还是8以下版本 2. 客户端初始化在elastic…...

编程日记 2025/6/2 9:11:56

理解Spark中运行程序时数据被分区的过程

在Spark中，数据分区是指将数据集分割成多个小的子集，即分区，以便在集群的多个节点上并行处理，从而提高处理效率。以下通过一个具体例子来理解： 例子背景假设要分析一个包含100万条销售记录的数据集，每条…...

编程日记 2025/6/3 8:35:15

【微服务】面试 7、幂等性

幂等性概念及场景概念：多次调用方法或接口不改变业务状态，重复调用结果与单次调用一致。例如在京东下单，多次点击提交订单只能成功一次。场景：包括用户重复点击、网络波动导致多次请求、mq 消息重复消费、代码中设置失败或超时重…...

编程日记 2025/6/4 13:25:06

10步打造完美ASP.NET、Web API和控制台应用程序文件夹结构

一、前言在大型项目中，合理的文件夹结构是项目成功的关键之一。一个好的文件夹结构就像是一座井然有序的图书馆，每一本书（代码文件）都有其固定的位置，让人能迅速找到所需。它可以让团队成员更容易理解和维护代码&…...

编程日记 2025/6/3 22:41:03

30_Redis哨兵模式

在Redis主从复制模式中，因为系统不具备自动恢复的功能，所以当主服务器（master）宕机后，需要手动把一台从服务器（slave）切换为主服务器。在这个过程中，不仅需要人为干预，而且还会造成一段时间内服务器处于不可用状态，同时数据安全性也得不到保障，因此主从模式的可用性…...

编程日记 2025/6/3 5:09:28

双模充电桩发展前景：解锁新能源汽车未来的金钥匙，市场潜力无限

随着全球能源转型的浪潮席卷而来，新能源汽车行业正以前所未有的速度蓬勃发展，而作为其坚实后盾的充电基础设施，特别是双模充电桩，正逐渐成为推动这一变革的关键力量。本文将从多维度深入剖析双模充电桩的市场现状、显著优势、驱动…...

编程日记 2025/6/3 6:32:58