HarmonyOS5 便捷生活类——Tabs索引持久化储存的问题（系列见主页）-优快云博客

加入下方官方优快云班级，得鸿蒙礼盒

一起拿鸿蒙礼盒，戳我戳我！！

本期活动时间：2025年8月1日-12月31日

问题现象

使用Tabs组件，点击页签导航栏可以展示对应的TabContent页面，需要实现下次登录时，自动打开退出时最后点击的TabContent页面。

效果预览

背景知识

Tabs组件不支持自定义组件作为子组件，仅可包含子组件TabContent，以及渲染控制类型if/else和ForEach，并且if/else和ForEach下也仅支持TabContent，不支持自定义组件。参数TabsOptions类型包含四个元素，其中index参数可以根据页签的索引位置，设置创建Tabs组件时显示的页签，默认为0。
首选项模块（Preferences）可以提供Key-Value键值型数据的处理接口，实现对轻量级数据的查询、修改和持久化功能。

解决方案

创建用户首选项对象。用户首选项实现指南详见通过用户首选项实现数据持久化。

import { preferences } from '@kit.ArkData';

export class PreferencesUtil {
preference?: preferences.Preferences;

getIndex(context: Context) {
this.preference = preferences.getPreferencesSync(context, { name: 'TabsIndex' });
}

saveIndex(currentIndex: number) {
this.preference?.putSync('currentIndex', currentIndex);
this.preference?.flush();
}

getChangeIndex() {
let currentIndex: number = 0;
currentIndex = this.preference?.getSync('currentIndex', 0) as number;
return currentIndex;
}
}

let preferenceUtilsObject: PreferencesUtil = new PreferencesUtil();

export default preferenceUtilsObject;

应用启动时获取储存的用户首选项。

import preferenceUtilsObject from '../pages/Preferences';

export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
// ...
preferenceUtilsObject.getIndex(this.context);
}
// ...
}

通过onChange方法获取点击页签的实时索引位置，并储存。通过aboutToAppear方法，在页面显示前获取上一次退出Tabs页面的索引位置。

import preferenceUtilsObject from '../pages/Preferences';

@Entry
@Component
struct Demo {
@State
private currentIndex: number = 0
private controller: TabsController = new TabsController()

aboutToAppear(): void {
this.currentIndex = preferenceUtilsObject.getChangeIndex()
}

@Builder
tabBuilder(index: number, name: string) {
RelativeContainer() {
Text(name)
.fontColor(this.currentIndex === index ? '#007DFF' : '#182431')
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.height('auto')
.padding({
left: 8,
right: 8,
top: 6,
bottom: 6
})
.id('textTitle')
.alignRules({
middle: { anchor: '__container__', align: HorizontalAlign.Center },
center: { anchor: '__container__', align: VerticalAlign.Center }
})
Divider()
.strokeWidth(1)
.color('#C3C3C3')
.width(100)
.alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom } })
Divider()
.strokeWidth(2)
.color('#007DFF')
.opacity(this.currentIndex === index ? 1 : 0)
.width(100)
.alignRules({ bottom: { anchor: '__container__', align: VerticalAlign.Bottom } })
}
.width(100)
.backgroundColor('#F0F1F3')
}

build() {
RelativeContainer() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
TabContent() {
Text('页面一')
}.tabBar(this.tabBuilder(0, '页面一'))
.backgroundColor('#ff808188')

TabContent() {
Text('页面二')
}
.tabBar(this.tabBuilder(1, '页面二'))
.backgroundColor('#ff817001')

TabContent() {
Text('页面三')
}
.tabBar(this.tabBuilder(2, '页面三'))
.backgroundColor('#ff007c6e')
}
.barMode(BarMode.Scrollable)
.backgroundColor('#fff3f3f3')
.onChange((index) => {
this.currentIndex = index
preferenceUtilsObject.saveIndex(this.currentIndex)
})
.animationDuration(400)
.scrollable(true)
.vertical(false)
.width('100%')
.fadingEdge(false)
}
}
}