HarmonyOS应用开发-声明式UI描述和自定义组件的介绍和用法

AI权益加码!Claude Code、Cursor等20+工具免费用! 购周边限时加赠Coding Plan Lite,畅享主流AI工具!学习进阶更高效! 阅读详情

前言

上一篇文章我们玩了下入门并且介绍了 ArkTs 的语法和玩法,还有基本的构建组成、装饰器、UI 描述(build)等本篇文章我们详细的介绍 声明式UI描述自定义组件

声明式UI描述

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

创建组件

根据组件构造方法的不同,创建组件包含有参数和无参数两种方式 和其他语言都差不多,它 创建组件时不需要new运算符

无参数

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

例如: Divider组件不包含构造参数,Button 组件重载了无参构造器等

img

img

按钮组件的无参构造器和有参构造器

img

有参构造器

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

比如: Image 组件它没有无参构造器

img

  • Image组件的构造器定义了必须属性为 src 的参数传递
  • Button 组件的非必选参数content。

img

配置属性

这玩意就相当于 Java 当中的 lambda 链式编

鸿蒙4.0开发笔记之ArkTS语法基础的UI描述、基础组件的使用与如何查看组件是否有参数(八) HarmonyOSArkTS语法中,万物皆组件ArkTS声明方式组合扩展组件描述应用程序的UI,同时还提供了基本的属性、事件组件配置方法,帮助开发者实现应用交互逻辑。根据组件构造方法的不同,创建组件包含有参数无参数两种方式。 阅读详情

相关推荐

Jetpack Compose:探索声明式UI开发的未来

在传统的命令式UI开发中,开发人员需要编写大量的代码来描述界面的外观行为。这些代码通常包括繁琐的布局设置、手动管理UI组件的状态事件处理逻辑。这种方式容易引发bug,而且代码复杂,不易维护。与之相反,声明式UI开发采用一种更直观的方式来构建用户界面。在声明式UI中,开发人员只需描述期望的界面外观,而不必关心如何实现。这种方式更加接近人类思维,类似于描述你想要的界面样式,而由框架自动处理底层细节。优势:声明式UI代码更加简洁、易于理解,让开发人员专注于界面的外观交互。

虎哥LoveDroid 2035

鸿蒙(HarmonyOS)--声明式UI自定义组件

说明自定义变量不能与基础通用属性/事件名重复。装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如上述示例中@Entry、@Component@State都是装饰器@Component表示自定义组件@Entry表示该自定义组件为入口组件@State表示组件中的状态变量状态变量变化会触发UI刷新。UI描述:以声明式的方式来描述UI的结构,例如build()方法中的代码块。自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。

hqy1989的博客 5462

鸿蒙实战开发-如何使用声明式UI编程框架的基础组件

在本教程中,我们将通过一个简单的样例,学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画,实现效果如图所示

m0_70749039的博客 1225

快速入门Jetpack Compose声明式UI框架,谷歌架构师内部开源

随着 Jetpack compose 逐渐走向稳定,并且绝大多数使用View能完成的效果,现在使用Jetpack Compose同样能够完成,直接导致越来越多的企业将要求使用Jetpack compose开发页面,我们可以假设未来几年它将为 Android 带来一系列新模式,因为声明式 UI 将会改变我们开发应用程序的方式。

老皮的博客 660

鸿蒙(HarmonyOS)应用开发指南

鸿蒙应用开发框架是鸿蒙系统提供的一套开发工具框架,用于帮助开发者快速构建鸿蒙应用。它提供了一系列的 API 组件,使开发者可以方便地进行应用的开发、测试发布。鸿蒙应用开发框架支持多种开发语言,包括 Java、C++、JavaScript、ArkTS 等,开发者可以根据自己的需求选择合适的开发语言进行开发。ArkTSHarmonyOS 优选的主力应用开发语言,在 TS 基础上发展而来。

m0_70749039的博客 1万+

华为鸿蒙系统全景解读:从内核设计到生态落地的技术革命

分布式思维:理解设备虚拟化、服务原子化等概念多范式开发能力:掌握声明式UI、响应式编程等新范式性能调优经验:熟悉跨设备资源调度策略学习路径建议阶段1:掌握ArkTS语言基础(2周)阶段2:理解分布式能力(3周)阶段3:实战复杂项目开发(6周)

我是 二川兄,对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈!你可以在我的文章末尾找到我~ 7963

HarmonyOS声明式UI描述

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

2401_82546228的博客 1412

HarmonyOS应用开发-自定义组件的结构、函数、变量、参数规定

本文讲解具体的组件结构

初一十五的博客 3730

【粉丝福利社】鸿蒙HarmonyOS NEXT开发之路 卷1:ArkTS语言篇

在数字化浪潮的推动下,全球科技领域正经历着前所未有的变革。我国作为这一变革的积极参与者,不仅在多个科技前沿领域取得了显著成就,更在计算机操作系统这一核心技术领域孕育出了具有自主知识产权的创新成果—鸿蒙系统HarmonyOS)。这一系统开发成功不仅是国人的骄傲,更是全球技术竞争中的一股新兴力量。鸿蒙系统的诞生,标志着我国在全球操作系统领域迈出了坚实的一步。凭借其独特的分布式架构、跨平台能力以及对开发者友好的设计理念,它为智能设备带来了全新的使用体验。

愚公智库 10万+

鸿蒙开发之声明式UI描述

鸿蒙开发正当时,现在入手正是好时机。还在犹豫不决的朋友们,小编在这里建议大家早点入手!在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友,另外一些鸿蒙开发的资料文档也顺便分享给大家,扫下方二维码就能免费送呢!1、UI开发(ArkTS声明式开发范式)概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概述使用异步并发能力进行开发使用多线程并发能力容器类库。

m0_61170978的博客 2029

HarmonyOS NEXT应用开发UI基本语法-自定义组件(创建自定义组件

ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件

ZPYQAQ的博客 1147

【OpenHarmony】ArkTS 语法基础 ⑦ ( 声明式 UI 的特征 | 声明式描述 | 状态驱动视图更新 | 创建并使用自定义组件 | 设置组件属性 | 自定义组件配置 | 容器组件设置 )

一、声明式 UI 的特征 1、声明式 UI 的特征 2、声明式描述 3、状态驱动视图更新 4、完整代码 二、创建并使用自定义组件 1、自定义组件定义 2、自定义组件声明 三、设置组件属性 1、自定义组件配置 2、容器组件设置

让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 2407

鸿蒙HarmonyOS应用开发教程】

本文系统介绍鸿蒙应用开发全流程,涵盖开发工具链、项目实战、UI设计、数据管理、测试优化及上架运营等关键环节。重点解析了待办事项应用的开发过程,包括需求分析、架构设计、数据存储实现及UI组件开发。同时详细阐述了鸿蒙UI设计规范、本地存储方案选择、网络请求实现及性能优化技巧,并提供了应用打包签名与上架市场的完整指南。通过分层架构设计、代码质量控制持续性能优化等最佳实践,帮助开发者掌握鸿蒙应用开发的核心技术,构建高质量应用。

abcdlwt的博客 1766

HarmonyOS NEXT 声明式UI语法学习笔记-创建自定义组件

ArkUI中,UI显示的内容均为组件,由框架直接提供的组件称为系统组件,由开发者定义的称为自定义组件。在进行UI界面开发时,通常不是把简单的系统组件进行组合使用,可是要考虑代码的复用性、业务逻辑UI分离,后续版本演进等因素。因此,将UI部分业务逻辑封装成自定义组件是不可或缺的能力。@Componentbuild() {// HelloComponent自定义组件组合系统组件RowTextRow() {// 状态变量message的改变驱动UI刷新,UI从'Hello, World!

m0_64671979的博客 1031

HarmonyOS鸿蒙开发技术】鸿蒙系统HarmonyOS鸿蒙开发入门篇

本文系统介绍鸿蒙操作系统(HarmonyOS)开发技术体系。鸿蒙作为面向全场景的分布式操作系统,其核心技术包括分布式计算、声明式UI、跨设备协同等。文章从五个层次详细解析了鸿蒙开发技术:内核与系统服务层、应用框架层、开发语言层、开发工具链生态能力层。重点阐述了应用开发核心技术(Ability组件、状态管理、UI开发等)、系统能力调用(服务访问、设备能力调用)以及开发工具链(DevEcoStudio等)。文章还提供了从入门到精通的技术学习路径规划,帮助开发者建立完整的鸿蒙开发技术体系认知,为开发全场景智能

2501_93196106的博客 2673

HarmonyOS鸿蒙学习基础篇 - 自定义组件(一)

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

2303_76218115的博客 6075

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

当我们需要写多个文本不同但样式相同的效果,需要使用自定义组件来实现,下面是需要注意的几点@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰。@Entry放在哪个组件前面,哪个就在页面上显示在Entry组件中,build()中必须有且只有一个更组件自定义组件必须定义build()函数定义一个的组件@Component。

NanChen的博客 1896

鸿蒙Harmony应用开发ArkTS声明式开发(基础手势:LoadingProgress)

ArkTS声明式开发(基础手势:LoadingProgress)

m0_64420071的博客 1636

HarmonyOS声明式UI语法

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

ChinaDragon10的博客 1635
上一篇: HarmonyOS应用开发-ArkTS应用入门实操
下一篇: HarmonyOS应用开发-自定义组件的结构、函数、变量、参数规定
初一十五啊
博客等级 码龄6年 4614粉丝 350原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值