管理组件状态
一、概述
在应用中,界面通常都是动态的。下图所示,在子目标列表中,当用户点击目标一,目标一会呈现展开状态,再次点击目标一,目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。
ArkUI
作为一种声明式UI
,具有状态驱动UI
更新的特点。当用户进行界面交互或有外部事件引起状态改变时,状态的变化会触发组件自动更新。所以在ArkUI
中,我们只需要通过一个变量来记录状态。当改变状态的时候,ArkUI
就会自动更新界面中受影响的部分。
ArkUI
框架提供了多种管理状态的装饰器来修饰变量,使用这些装饰器修饰的变量即称为状态变量。
在组件范围传递的状态管理常见的场景如下:
场景 | 装饰器 |
---|---|
组件内的状态管理 | @State |
从父组件单向同步状态 | @Prop |
与父组件双向同步状态 | @Link |
跨组件层级双向同步状态 | @Provide和@Consume |
在组件内使用@State
装饰器来修饰变量,可以使组件根据不同的状态来呈现不同的效果。若当前组件的状态需要通过其父组件传递而来,此时需要使用@Prop
装饰器;若是父子组件状态需要相互绑定进行双向同步,则需要使用@Link
装饰器。使用@Provide
和@Consume
装饰器可以实现跨组件层级双向同步状态。
在实际应用开发中,应用会根据需要封装数据模型。如果需要观察嵌套类对象属性变化,需要使用@Observed
和@ObjectLink
装饰器,因为上述表格中的装饰器只能观察到对象的第一层属性变化。@Observed
和@ObjectLink
装饰器的具体使用方法可参考@Observed
装饰器和@ObjectLink
装饰器:嵌套类对象属性变化。
另外,当状态改变,需要对状态变化进行监听做一些相应的操作时,可以使用@Watch
装饰器来修饰状态。
二、组件内的状态管理:@State
实际开发中由于交互,组件的内容呈现可能产生变化。当需要在组件内使用状态来控制UI
的不同呈现方式时,可以使用@State
装饰器。以任务管理应用为例,当点击子目标列表的其中一项,列表项会展开。当再次点击同一项,列表项会收起。所以,对于某一个列表项来说,它的呈现方式会受列表项是否展开这个状态影响。
展开/收起目标项
将是否展开这个状态定义为isExpanded
变量,当其值为false
表示目标项收起,值为true
时表示目标项展开。
此时,需要使用@State
装饰器修饰isExpanded
,使其成为目标项内部的状态变量。通过@State
装饰后,框架内部会建立数据与视图间的绑定,当isExpanded
状态变化时,目标项会随之展开或收起。
其具体实现只要用@State
修饰isExpanded
变量,定义是否展开状态。然后通过条件渲染,实现是否显示进度调整面板和列表项的高度变化。最后,监听列表项的点击事件,在onClick
回调中改变isExpanded
状态。
这样就实现了对相同列表项点击时,列表项的展开和收起功能。当用户反复点击同一个列表项时,组件内的isExpanded
状态变化,列表项会自动更新。
js
@Component
export default struct TargetListItem {
@State isExpanded: boolean = false;
...
build() {
...
Column() {
...
if (this.isExpanded) {
Blank()
ProgressEditPanel(...)
}
}
.height(this.isExpanded ? $r('app.float.expanded_item_height')
: $r('app.float.list_item_height'))
.onClick(() => {
...
this.isExpanded = !this.isExpanded;
...
})
...
}
}
三、从父组件单向同步状态:@Prop
当子组件中的状态依赖从父组件传递而来时,需要使用@Prop
装饰器,@Prop
修饰的变量可以和其父组件中的状态建立单向同步关系。当父组件中状态变化时,该状态值也会更新至@Prop
修饰的变量;对@Prop
修饰的变量的修改不会影响其父组件中的状态。
在目标管理应用中,当用户点击子目标列表的"编辑"文本,列表进入编辑模式,点击取消,列表退出编辑模式。
整个列表是自定义组件TargetList
,顶部是文本显示区域,主要是Text组件,底部是一个Button
组件。
中间区域则是用来显示每个目标项,目标项是自定义组件TargetListItem
。
从图中可以看出,TargetListItem
是TargetList的子组件。TargetList
是TargetListItem
父组件。
对于父组件TargetList
,其顶部显示的文本和底部按钮会随编辑模式的变化而变化,因此父组件拥有编辑模式状态。
对于子组件TargetListItem
,其最右侧是否预留位置和显示勾选框也会随编辑模式变化,因此子组件也拥有编辑模式状态。
但是是否进入编辑模式,其触发点是在用户点击列表的"编辑"或取消按钮,状态变化的源头仅在于父组件TargetList
。当父组件TargetList
中的编辑模式变化时,子组件TargetListItem
的编辑模式状态需要随之变化。
在父组件TargetList
中可以定义一个是否进入编辑模式的状态,即用@State
修饰isEditMode
。@State
修饰的变量不仅是组件内部的状态,也可以作为子组件单向或双向同步的数据源。ArkUI
提供了@Prop
装饰器,@Prop
修饰的变量可以和其父组件中的状态建立单向同步关系,所以用@Prop
修饰子组件TargetListItem
中的isEditMode
变量。
在父组件TargetList
中,用@State
修饰isEditMode
,定义编辑模式状态。然后利用条件渲染实现根据是否进入编辑模式,显示不同的文本和按钮。同时,在父组件中需要在用户点击时改变状态,触发界面更新。
当点击"编辑"事件发生时,进入编辑模式,显示取消、全选文本和勾选框,同时显示删除按钮;当点击"取消"事件发生时,退出编辑模式,显示"编辑"文本和"添加子目标"按钮。
js
@Component
export default struct TargetList {
@State isEditMode: boolean = false;
...
build() {
Column() {
Row() {
...
if (this.isEditMode) {
Text($r('app.string.cancel_button'))
.onClick(() => {
this.isEditMode = false;
...
})
...
Text($r('app.string.select_all_button'))...
Checkbox()...
} else {
Text($r('app.string.edit_button'))
.onClick(() => {
this.isEditMode = true;
})
...
}
...
}
...
List({ space: CommonConstants.LIST_SPACE }) {
ForEach(this.targetData, (item: TaskItemBean, index: number) => {
ListItem() {
TargetListItem({
isEditMode: this.isEditMode,
...
})
}
}, (item, index) => JSON.stringify(item) + index)
}
...
if (this.isEditMode) {
Button($r('app.string.delete_button'))
} else {
Button($r('app.string.add_task'))
}
}
...
}
}
在子组件TargetListItem
中,使用@Prop
修饰子组件的isEditMode
变量,定义子组件的编辑模式状态。然后同样根据是否进入编辑模式,控制目标项最右侧是否预留位置和显示勾选框。
js
@Component
export default struct TargetListItem {
@Prop isEditMode: boolean;
...
Column() {
...
}
.padding({
...
right: this.isEditMode ? $r('app.float.list_edit_padding')
: $r('app.float.list_padding')
})
...
if (this.isEditMode) {
Row() {
Checkbox()...
}
}
...
}
最后,最关键的一步就是要在父组件中使用子组件时,将父组件的编辑模式状态this.isEditMode
传递给子组件的编辑模式状态isEditMode
。
js
@Component
export default struct TargetList {
@State isEditMode: boolean = false;
...
build() {
Column() {
...
List({ space: CommonConstants.LIST_SPACE }) {
ForEach(this.targetData, (item: TaskItemBean, index: number) => {
ListItem() {
TargetListItem({
isEditMode: this.isEditMode,
...
})
}
}, (item, index) => JSON.stringify(item) + index)
}
...
}
...
}
}
四、与父组件双向同步状态:@Link
若是父子组件状态需要相互绑定进行双向同步时,可以使用@Link装饰器。父组件中用于初始化子组件@Link变量的必须是在父组件中定义的状态变量。
在目标管理应用中,当用户点击同一个目标,目标项会展开或者收起。当用户点击不同的目标项时,除了被点击的目标项展开,同时前一次被点击的目标项会收起。
如上图所示,当目标一展开时,点击目标三,目标三会展开,同时目标一会收起。再点击目标一时,目标一展开,同时目标三会收起。
从目标一切换到目标三的流程中,关键在于最后目标一的收起,当点击目标三时,目标一需要知道点击了目标三,目标一才会收起。
在子目标列表中,每个列表项都有其位置索引值index
属性,表示目标项在列表中的位置。index
从0开始,即第一个目标项的索引值为0,第二个目标项的索引值为1,以此类推。此外,clickIndex
用来记录被点击的目标项索引。当点击目标一时,clickIndex
为0,点击目标三时,clickIndex
为2。
在父组件子目标列表和每个子组件目标项中都拥有clickIndex
状态。当目标一展开时,clickIndex
为0。此时点击目标三,目标三的clickIndex
变为2,只要其父组件子目标列表感知到clickIndex
状态变化,同时将此变化传递给目标一。目标一的clickIndex
即可同步改变为2,即目标一感知到此时点击了目标三。
将列表和目标项对应到列表组件TargetList
和列表项TargetListItem
。首先,需要在父组件TargetList
中定义clickIndex
状态。
若此时子组件中的clickIndex
用@Prop
装饰器修饰,当子组件中clickIndex
变化时,父组件无法感知,因为@Prop
装饰器建立的是从父组件到子组件的单向同步关系。
ArkUI
提供了@Link
装饰器,用于与父组件双向同步状态。当子组件TargetListItem
中的clickIndex
用@Link
修饰,可与父组件TargetList
中的clickIndex
建立双向同步关系。
js
@Component
export default struct TargetList {
@State clickIndex: number = CommonConstants.DEFAULT_CLICK_INDEX;
...
TargetListItem({
clickIndex: $clickIndex,
...
})
...
}
首先,在父组件TargetList
中用@State
装饰器定义点击的目标项索引状态。然后,在子组件TargetListItem
中用@Link
装饰器定义clickIndex
,当点击目标项时,clickIndex
更新为当前目标索引值。
完成在父子组件中定义状态后,最关键的就是要建立父子组件的双向关联关系。在父组件中使用子组件时,将父组件的clickIndex
传递给子组件的clickIndex
。其中父组件的clickIndex
加上$
表示传递的是引用。
js
@Component
export default struct TargetListItem {
@Link @Watch('onClickIndexChanged') clickIndex: number;
@State isExpanded: boolean = false
...
onClickIndexChanged() {
if (this.clickIndex != this.index) {
this.isExpanded = false;
}
}
build() {
...
Column() {
...
}
.onClick(() => {
...
this.clickIndex = this.index;
...
})
...
}
}
当目标一感知到点击了目标三时,还需要将目标一收起,切换列表项的功能才是完整的。此时,目标一感知到clickIndex
变为2,需要判断与目标一本身的位置索引值0不相等,从而将目标一收起。此时,就需要用到ArkUI
中监听状态变化@Watch
的能力。用@Watch
修饰的状态,当状态发生变化时,会触发声明时定义的回调。
我们给TargetListItem
的中的clickIndex
状态加上@Watch("onClickIndexChanged")
。这表示需要监听clickIndex
状态的变化。当clickIndex
状态变化时,将触发onClickIndexChanged
回调:如果点击的列表项索引不等于当前列表项索引,则将isExpanded
状态置为false
,从而收起该目标项。
五、跨组件层级双向同步状态:@Provide和@Consume
跨组件层级双向同步状态是指@Provide
修饰的状态变量自动对提供者组件的所有后代组件可用,后代组件通过使用@Consume
装饰的变量来获得对提供的状态变量的访问。@Provide
作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。@Consume
在感知到@Provide
数据的更新后,会触发当前自定义组件的重新渲染。
示例源码下载
https://download.csdn.net/download/Mr_Roki/88797964
由于内容过长,在同一篇博文中,会显得难于阅读。
-
第一大点( Video组件的使用)
-
第二大点(给您的应用添加弹窗)
在下一篇系列里继续接上,请有兴趣的童鞋持续关注更新。