HarmonyOS 应用内页面间共享变量的管理

问题

接上回实现了自定义的tabs页面后，每个tab页签有不同的展示内容。

在“我的”页签中显示我和联系人的消息列表。从“我的”页签中的消息列表点击任意一条消息，进入聊天界面。从聊天界面返回时，tabs的激活页签保持在“我的”

在“设置”页签显示一些应用的设置选项。从“设置”页签中点击一个设置项，进入设置子项的页面，当返回时，tabs的激活页签保持在“设置”

​

分析

从子页面返回时，需要通知tabs这个父页面，当前激活的页签id。由于涉及了不同的页面跳转，因此需要有一个变量来控制。我们可以使用两种方法来实现这个功能

方法1：使用应用级变量AppStorage

应用级变量可以在这个应用的所有页面中使用，包含StorageLink和StorageProp两个装饰器。

StorageLink是双向绑定，声明的变量初始化的值可以在UI组件中使用；UI组件也可以改变AppStorage中变量的值

StorageProp是单向绑定，声明的变量初始化的值可以在UI组件中使用；UI组件无法改变AppStorage中变量的值

由于不同的子页面返回时激活的页签不一样，因此在子页面中需要改变激活页签的变量值，因此我们使用StorageLink

FA模型下，在app.ets中定义整个应用共享的变量

//app.ets
onCreate() {
//...
AppStorage.SetOrCreate('currentIndex',0)
}

​在tabs页签的页面把State装饰器修改为StorageLink，注意括号中引用的key和app.ets中定义的变量名称保持一致​

//@State currentIndex: number = 0
@StorageLink('currentIndex') currentIndex: number = 0

注意在之前实现tabs时，设置了一个index参数，这个参数指定了当前激活页签的id​

Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex })

以“设置”子页面为例，在页面中定义变量，用StorageLink装饰，设置currentIndex =2，改变了AppStorage中对应的currentIndex 的值。​

//settings.ets
@StorageLink('currentIndex') currentIndex: number = 2

在返回index页面时，关联的currentIndex 也同时改变，从而保持了激活页签停留在“设置”

​

方法2：使用router的params传递参数

这种方法在主页index.ets中仍然使用State装饰器。在onPageShow的声明周期函数中通过router.getParams()接收子页面传递的参数

import router from '@ohos.router';

@State currentIndex:number=0

onPageShow(){
    this.currentIndex=router.getParams()['activeIndex']
    this.controller.changeIndex(this.currentIndex)
  }

​在子页面settings.ets中，返回按钮图片的onClick方法中通过router.push返回index.ets页面时，在params属性中设置传递的参数​

Image($r('app.media.left_arrow')).size({ width: 30, height: 30 })
          .onClick((e) => {
            router.push({
              url: 'pages/index',
              params: {
                activeIndex: 2
              }
            })
 })

最终效果