1、说在前面的话
在前五个章节中,我们构建的页面基本都是静态的页面,如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念,以便随着用户的交互,界面随着发生变化,例如如下的动图:
上面的示例中,用户与应用程序的交互触发了文本状态变更,状态变更引起了UI渲染,UI从“Hello World”变更为“Hello ArkUI”。
在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染,在ArkUI中统称为状态管理机制。
自定义组件拥有变量,变量必须被装饰器装饰才可以成为状态变量,状态变量的改变会引起UI的渲染刷新。如果不使用状态变量,UI只能在初始化时渲染,后续将不会再刷新。下图展示了State和View(UI)之间的关系。
-
View(UI):UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。
-
State:状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。
1.1、一些基本概念
-
状态变量
被状态装饰器(@State)装饰的变量,状态变量值的改变会引起UI的渲染更新。示例如下,其中@State是状态装饰器,num是状态变量。
@Component
struct MyComponent {
@State num: number = 1;
build() {
// ...
}
}
-
常规变量
没有被状态装饰器装饰的变量,通常应用于辅助计算。它的改变不会引起UI的刷新。以下示例中increaseBy变量为常规变量。
-
数据源/同步源
状态变量的原始来源,可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。示例代码如下,以下示例中数据源为count: 1。
@Component
struct MyComponent {
@State count: number = 0;
build() {
}
}
@Component
struct Parent {
build() {
Column() {
// 从父组件初始化,覆盖本地定义的默认值
MyComponent({ count: 1})
}
}
}<