小白挑战一周上架元服务——ArkUI04

---

前言

我们前面进行了了解元服务、IDE、ArkTS，目前前期准备工作已经差不了。我们可以进行学习UI阶段了。距离实现元服务上架，又是一个里程碑式的进展。奥利给~

---

一、ArkUI是何方神圣？

ArkUI即方舟UI框架，提供了一套完整的基础设施，包括简洁的UI语法、丰富的UI功能（丰富的组件、布局、动画以及交互事件），以及实时界面预览工具（双向预览），支持开发者进行丰富页面的开发。

ArkUI基于关键的应用UI开发底座，深度融合语言/编辑器/图形。

二、声明式UI

通过声明UI结构和状态，自动驱动界面渲染。开发者只需描述“界面应该是什么样”，无需手动管理UI更新。适用于复杂度较高、团队协作的应用开发，具有高开发效率、良好性能和易维护等优势。

• 通过数据驱动UI发生变化，UI与业务逻辑分离，更直观、更高效。
  

---

三、组件

组件是构成UI界面的最小单位，如列表、网格、按钮、单选框、按钮、文本等。
组件有无参数组件和有参数组件，有特有的属性和事件以及子组件。

• 组件类型：分为无参数组件和有参数组件。

      /// 有参数组件Text('Hello！')/// 无参数组件Blank()

• 属性，例如Text的fontColor属性

     Text(this.message).fontColor(Color.Orange)

• 事件

   Button('Click').onClick(() => {console.log('点击了我');})

• 子组件

    Column() {Text(this.message)Blank()}

1.基础组件

基础组件用于展示页面的基础元素，有文本Text、按钮Button、图片Image。

2.布局容器组件

布局容器组件用于组织组件的排列，有行Row、列Column、列表List、网格列表Grid、轮播图swiper。

3.导航组件

导航组件实现页面的跳转和切换，有Navigation、Tabs。

4.自定义组件

通过多种组件的组合，封装为可复用的UI单元。自定义组件基于struct实现，struct + 自定义组件名 + {…}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。

@Entry
@Component
struct CustomCompent {build() {Column() {Text('Hello,ArkUI!')Blank().height(100)Text('Hello wold!')}.justifyContent(FlexAlign.Center).width('100%')}
}

5.组件生命周期

• 组件即将出现：aboutToAppear()，在创建自定义组件的新实例后调用。
  可以对状态变量进行修改，修改后再build函数中生效。
• 组件构建：buld()
• 组件构建完成：onDidBuild()
• 页面即将出现：onPageShow()
  页面每次显示时，都会回调这个函数，比如跳转到这个页面，从后台进入前台返回这个页面。仅在@Entry修饰的组件中适用。
• 点击按钮或者侧滑返回时：onBackPress()。仅在@Entry修饰的组件中适用。
• 页面即将隐藏进入后台时：onPageHide()。仅在@Entry修饰的组件中适用。
• 组件销毁之前调用：aboutToDisappear()。

---

四、状态管理

状态变更引起了UI渲染。在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时状态作为参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化导致的UI重新渲染，在ArkUI中统称为状态管理机制。

ArkUI有多维度的状态管理机制，在UI开发框架中与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如组件内（@State）、父子组件之间（@Prop/@Link）、爷孙组件之间（@Provide/@Consume）、应用全局范围内专递或跨设备传递。

从数据的传递形式看，可分为只读的单向传递（@Prop）和可变更的双向传递（@Link）。

1.@State装饰器: 状态变量

@State装饰的变量称为状态变量，使普通变量具备状态属性。当状态变量改变时，会触发其直接绑定的UI组件渲染更新。

2.@Prop装饰器：父子单向同步

对父组件状态变量值的修改，将同步给子组件@Prop装饰的变量，子组件@Prop装饰的变量的修改不会同步到父组件的状态变量上。

3.@Link装饰器：父子双向同步

双向同步。父组件状态变量与子组件@Link建立双向同步，当其中一方改变时，另一方也会同步更新。

4.@Provide/@Consume装饰器：跨层级传递

@Provide和@Consume，应用于与后代组件的双向数据同步、状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。

5.@Observed/@ObjectLink装饰器：嵌套类对象属性变化

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步。

---

五、路由/导航

组件导航（Navigation）和页面路由（@ohos.router）均提供了应用内的页面跳转能力。

1.组件导航

在组件导航（Navigation）框架下，“页面”通过NavDestination组件承载，特指一个NavDestination组件包含的内容。
Navigation是路由导航的根视图容器，一般作为页面（@Entry）的根容器，包括单栏（Stack）、分栏（Split）和自适应（Auto）三种显示模式。Navigation组件适用于模块内和跨模块的路由切换，通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。一次开发，多端部署场景下，Navigation组件能够自动适配窗口显示大小，在窗口较大的场景下自动切换分栏展示效果。

Navigation组件主要包含​导航页和子页。导航页由标题栏（包含菜单栏）、内容区和工具栏组成，可以通过hideNavBar属性进行隐藏，导航页不存在路由栈中，与子页，以及子页之间可以通过路由操作进行切换。

// push page
this.pathStack.pushPath({ name: 'pageOne' });// pop page
this.pathStack.pop();
this.pathStack.popToIndex(1);
this.pathStack.popToName('pageOne');// replace page
this.pathStack.replacePath({ name: 'pageOne' });// clear all page
this.pathStack.clear();

2.Router页面路由

Router路由的页面是一个@Entry修饰的Component，每一个页面都需要在main_page.json中声明。
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。Router模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。

// push page
router.pushUrl({ url:"pages/pageOne", params: null });// pop page
this.getUIContext().getRouter().back({ url: "pages/pageOne" });// replace page
router.replaceUrl({ url: "pages/pageOne" });

---

参考

• 文档——学习ArkUI
• 视频——ArkUI框架介绍-哔哩哔哩