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
              }
            })
 })

最终效果

HarmonyOS 应用内页面间共享变量的管理_第1张图片

你可能感兴趣的:(HarmonyOS,应用开发实战,harmonyos,javascript)