鸿蒙UI(ArkUI-方舟UI框架)

发布于:2025-02-10 ⋅ 阅读:(76) ⋅ 点赞:(0)


参考: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-layout-development-overview-V13

ArkUI简介

ArkUI(方舟UI框架)为应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。

两种开发范式

  • 声明式开发范式
    采用基于TypeScript声明式UI语法扩展而来的ArkTS语言,从组件、动画和状态管理三个维度提供UI绘制能力
  • 类Web开发范式
    采用经典的HML、CSS、JavaScript三段式开发方式,即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯,便于快速将已有的Web应用改造成方舟UI框架应用

UI开发(ArkTS声明式开发范式)

1、概述

基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供了构建应用UI所必需的能力,主要包括:

  • ArkTS
  • 布局
  • 组件
  • 页面路由和组件导航
  • 图形
  • 动画
  • 交互事件
  • 自定义能力

2、开发流程

学习ArkTS > 开发布局 > 添加组件 > 设置组件导航和页面路由 > 使用文本 > 使用弹窗 > 显示图形 > 使用动画 > 绑定事件 > 使用自定义能力 > 使用镜像能力 > 支持适老化 > 主题设置 > 使用UI上下文接口操作界面 > 使用NDK接口构建UI

3、通用规则

  • 默认单位
    表示长度的入参单位默认为vp,即入参为number类型、以及Length和Dimension类型中的number单位为vp。

  • 异常值处理
    输入的参数为异常(undefined,null或无效值)时,处理规则如下:

    (1)对应参数有默认值,按默认值处理;

    (2)对应参数无默认值,该参数对应的属性或接口不生效。

开发布局

添加组件

设置组件导航和页面路由

使用文本

使用弹框

显示图形

使用动画

支持交互事件

使用自定义能力

使用镜像能力

支持适老化

主题设置

使用UI上下文接口操作界面(UIContext)

使用NDK接口构建UI