鸿蒙NEXT开发声明式UI是咋回事?

简介: 【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。

鸿蒙 NEXT 开发声明式 UI 是一种基于 ArkTS 的 UI 开发方式23。以下是关于它的详细介绍:


  1. 基本概念2
  • 语言基础:ArkTS 是鸿蒙生态的优选主力应用开发语言,在 TypeScript(简称 TS)生态基础上进行了扩展。它围绕应用开发,提供了声明式 UI 描述、自定义组件、动态扩展 UI 元素、状态管理和渲染控制等扩展能力。
  • 框架支持:ArkUI 是鸿蒙的声明式 UI 开发框架,为开发者提供了应用 UI 开发所必需的能力,比如多种组件、布局计算、动画能力、UI 交互、绘制等。
  1. 主要特点2
  • 开发效率高
  • 代码简洁:开发者通过接近自然语义的方式描述 UI,不必关心框架如何实现 UI 绘制和渲染,降低了开发的复杂性,提高了开发效率。
  • 数据驱动 UI 变化:开发者只需关注数据的变化,当数据发生改变时,UI 会自动根据数据的变化进行更新,无需手动编写大量的 UI 切换代码,让开发者更专注于自身业务逻辑的处理。
  • 开发体验好:界面也是代码的一部分,开发者可以在代码中直观地看到和修改 UI 的结构和样式,编程体验得到提升。
  • 性能优越
  • 声明式 UI 前端和后端分层:UI 后端采用 C++ 语言构建,提供了基础组件、布局、动效、交互事件、组件状态管理和渲染管线等功能,保证了底层的高效运行。
  • 语言编译器和运行时的优化:通过统一字节码、高效 FFI(Foreign Function Interface)、AOT(Ahead Of Time)、引擎极小化、类型优化等技术,提高了代码的执行效率和性能。
  • 生态易推进:能够借助主流语言生态快速推进,语言相对中立友好,有相应的标准组织可以逐步演进,有利于吸引更多开发者参与,促进生态的发展。
  1. 开发方式3
  • 组件创建与配置:通过装饰器@component@entry装饰struct关键字声明的数据结构,构成一个自定义组件。在自定义组件中,必须定义build函数,用于以链式调用的方式进行基本的 UI 描述。例如,可以通过链式调用配置组件的属性(如字体大小、颜色等)、事件(如点击事件等)以及子组件。
  • 状态管理:包括 UI 组件状态和应用程序状态。状态变量的变化会触发 UI 的刷新,开发者可以通过管理状态变量来实现 UI 的动态更新3
  • 渲染控制:提供了条件渲染、循环渲染和数据懒加载等能力,开发者可以根据应用的不同状态,渲染对应状态下的 UI 内容3


总的来说,鸿蒙 NEXT 的声明式 UI 为开发者提供了一种高效、简洁、高性能的 UI 开发方式,有助于开发者更快速地构建出功能丰富、用户体验良好的鸿蒙应用程序。

目录
打赏
0
3
3
1
255
分享
相关文章
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
140 92
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
42 23
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
|
3天前
HarmonyOS NEXT - @Prop和@Link
本示例介绍了`@Prop`和`@Link`装饰器在父子组件间的数据同步机制。`@Prop`实现单向数据绑定,子组件可修改本地值,但不会同步回父组件;父组件数据更新时会覆盖子组件的本地更改。`@Link`实现双向绑定,子组件与父组件数据共享且相互影响。 **限制条件:** - `@Prop`变量深拷贝时可能丢失复杂类型。 - `@Link`不可用于`@Entry`组件,禁止本地初始化,类型需与数据源一致。 **支持类型:** - `@Prop`支持基础类型、对象、数组、`Date`及联合类型,不支持`any`。 - 数据源与`@Prop`类型需匹配,包括简单类型、数组项及对象属性。
58 41
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
34 14
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
27 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
HarmonyOS NEXT - RelationalStore关系型数据库
关系型数据库对应用提供通用的操作接口,底层使用SQLite作为持久化存储引擎,支持SQLite具有的数据库特性,包括但不限于事务、索引、视图、触发器、外键、参数化查询和预编译SQL语句。
55 27
|
3天前
|
HarmonyOS NEXT - @Provide和@Consume
@Provide和@Consume,应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递,@Provide和@Consume摆脱参数传递机制的束缚,实现跨层级传递。
56 21
HarmonyOS NEXT - Preferences用户首选项
- 用户首选项为应用提供Key-Value键值型的数据处理能力,支持应用持久化轻量级数据,并对其修改和查询。 - Preferences会将该数据缓存在内存中,当用户读取的时候,能够快速从内存中获取数据。Preferences会随着存放的数据量越多而导致应用占用的内存越大,因此,Preferences不适合存放过多的数据。
56 19
|
3天前
HarmonyOS NEXT - @State状态变量
ArkUI 是一种声明式 UI 框架,通过状态驱动 UI 更新。@State 装饰的变量用于管理组件内部状态,具有以下特点:私有性(仅组件内访问)、必须初始化、生命周期与组件一致。它支持单向(与 @Prop)和双向(与 @Link、@ObjectLink)数据同步。状态改变时,绑定的 UI 会自动刷新。注意:@State 不支持 Function 类型,不能在 build 中修改状态变量。代码示例中展示了通过 @State 管理按钮点击计数的状态更新机制。
54 16
|
3天前
|
HarmonyOS NEXT - AlertDialog警告弹窗
`AlertDialog` 是一个用于显示警告弹窗的组件,支持自定义文本内容与回调操作。通过 `AlertDialog.show()` 方法,传入配置参数即可展示弹窗。主要功能包括设置标题、内容、按钮、模态状态、对齐方式、过渡动画等。示例代码展示了如何创建一个包含“取消”和“删除”按钮的弹窗,并在点击按钮后执行相应业务逻辑,同时更新页面消息提示。适用于需要用户确认或交互的场景。
51 14