如果希望構(gòu)建一個動態(tài)的、有交互的界面，就需要引入“狀態(tài)”的概念
狀態(tài)管理機制：在聲明式UI編程框架中，UI是程序狀態(tài)的運行結(jié)果，用戶構(gòu)建了一個UI模型，其中應(yīng)用的運行時的狀態(tài)是參數(shù)。當(dāng)參數(shù)改變時，UI作為返回結(jié)果，也將進(jìn)行對應(yīng)的改變。這些運行時的狀態(tài)變化所帶來的UI的重新渲染，在ArkUI中統(tǒng)稱為狀態(tài)管理機制。
自定義組件擁有變量，變量必須被裝飾器裝飾才可以成為狀態(tài)變量，狀態(tài)變量的改變會引起UI的渲染刷新。如果不使用狀態(tài)變量，UI只能在初始化時渲染，后續(xù)將不會再刷新。
-
View(UI)：UI渲染，指將build方法內(nèi)的UI描述和@Builder裝飾的方法內(nèi)的UI描述映射到界面。
-
State：狀態(tài)，指驅(qū)動UI更新的數(shù)據(jù)。用戶通過觸發(fā)組件的事件方法，改變狀態(tài)數(shù)據(jù)。狀態(tài)數(shù)據(jù)的改變，引起UI的重新渲染。
Components級別的狀態(tài)管理
- @State：@State裝飾的變量擁有其所屬組件的狀態(tài)，可以作為其子組件單向和雙向同步的數(shù)據(jù)源。當(dāng)其數(shù)值改變時，會引起相關(guān)組件的渲染刷新。
- @Prop：@Prop裝飾的變量可以和父組件建立單向同步關(guān)系，@Prop裝飾的變量是可變的，但修改不會同步回父組件。
- @Link：@Link裝飾的變量和父組件構(gòu)建雙向同步關(guān)系的狀態(tài)變量，父組件會接受來自@Link裝飾的變量的修改的同步，父組件的更新也會同步給@Link裝飾的變量。
- @Provide/@Consume：@Provide/@Consume裝飾的變量用于跨組件層級（多層組件）同步狀態(tài)變量，可以不需要通過參數(shù)命名機制傳遞，通過alias（別名）或者屬性名綁定。
- @Observed：@Observed裝飾class，需要觀察多層嵌套場景的class需要被@Observed裝飾。單獨使用@Observed沒有任何作用，需要和@ObjectLink、@Prop連用。
- @ObjectLink：@ObjectLink裝飾的變量接收@Observed裝飾的class的實例，應(yīng)用于觀察多層嵌套場景，和父組件的數(shù)據(jù)源構(gòu)建雙向同步。
@State裝飾器
組件內(nèi)狀態(tài)
@State是最基礎(chǔ)的，使變量擁有狀態(tài)屬性的裝飾器，它也是大部分狀態(tài)變量的數(shù)據(jù)源
@State裝飾的變量，與聲明式范式中的其他被裝飾變量一樣，是私有的，只能從組件內(nèi)部訪問，在聲明時必須指定其類型和本地初始化。初始化也可選擇使用命名參數(shù)機制從父組件完成初始化。
@State裝飾的變量擁有以下特點：
- @State裝飾的變量與子組件中的@Prop裝飾變量之間建立單向數(shù)據(jù)同步，與@Link、@ObjectLink裝飾變量之間建立雙向數(shù)據(jù)同步。
- @State裝飾的變量生命周期與其所屬自定義組件的生命周期相同。
舉例1：
點擊按鈕，數(shù)字跟著變化，如沒有@state，數(shù)字始終為0
舉例2：
代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-807603.html
class Model {
public value: string;
constructor(value: string) {
this.value = value;
}
}
@Entry
@Component
struct Index {
build() {
Column() {
MyComponent1({ count: 1, increaseBy: 2 })
// 調(diào)用Model
MyComponent1({ title: new Model('測試2'), count: 5 })
}
}
}
@Component
struct MyComponent1 {
@State title: Model = new Model('測試1');
@State count: number = 0;
private increaseBy: number = 1;
build() {
Column() {
Text(`${this.title.value}`)
Button(`改變標(biāo)題`).onClick(() => {
this.title.value = this.title.value === 'aaa' ? 'bbb' : 'aaa';
})
Button(`增加=${this.count}`).onClick(() => {
this.count += this.increaseBy;
})
}
}
}
@Link裝飾器
父子雙向同步
子組件中被@Link裝飾的變量與其父組件中對應(yīng)的數(shù)據(jù)源建立雙向數(shù)據(jù)綁定
@Link裝飾的變量與其父組件中的數(shù)據(jù)源共享相同的值。
@Link裝飾器不能在@Entry裝飾的自定義組件中使用。
舉例1：
代碼：
class GreenButtonState {
width: number = 0;
constructor(width: number) {
this.width = width;
}
}
@Component
struct GreenButton {
@Link greenButtonState: GreenButtonState;
build() {
Button('Green Button')
.width(this.greenButtonState.width)
.height(40)
.backgroundColor('#64bb5c')
.fontColor('#FFFFFF，90%')
.onClick(() => {
if (this.greenButtonState.width < 700) {
// 更新class的屬性，變化可以被觀察到同步回父組件
this.greenButtonState.width += 60;
} else {
// 更新class，變化可以被觀察到同步回父組件
this.greenButtonState = new GreenButtonState(180);
}
})
}
}
@Component
struct YellowButton {
@Link yellowButtonState: number;
build() {
Button('Yellow Button')
.width(this.yellowButtonState)
.height(40)
.backgroundColor('#f7ce00')
.fontColor('#FFFFFF，90%')
.onClick(() => {
// 子組件的簡單類型可以同步回父組件
this.yellowButtonState += 40.0;
})
}
}
@Entry
@Component
struct ShufflingContainer {
@State greenButtonState: GreenButtonState = new GreenButtonState(180);
@State yellowButtonProp: number = 180;
build() {
Column() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
// 簡單類型從父組件@State向子組件@Link數(shù)據(jù)同步
Button('Parent View: Set yellowButton')
.width(312)
.height(40)
.margin(12)
.fontColor('#FFFFFF，90%')
.onClick(() => {
this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 40 : 100;
})
// class類型從父組件@State向子組件@Link數(shù)據(jù)同步
Button('Parent View: Set GreenButton')
.width(312)
.height(40)
.margin(12)
.fontColor('#FFFFFF，90%')
.onClick(() => {
this.greenButtonState.width = (this.greenButtonState.width < 700) ? this.greenButtonState.width + 100 : 100;
})
// class類型初始化@Link
GreenButton({ greenButtonState: $greenButtonState }).margin(12)
// 簡單類型初始化@Link
YellowButton({ yellowButtonState: $yellowButtonProp }).margin(12)
}
}
}
}
以上內(nèi)容參考“官方文檔”文章來源地址http://www.zghlxwxcb.cn/news/detail-807603.html
到了這里，關(guān)于鴻蒙開發(fā)系列教程（七）--ArkTS語言：狀態(tài)管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
