【HarmonyOS NEXT】CustomTabBar({ currentIndex: $currentIndex })自定义组件为什么可以在Tabs的闭包外跟Tabs进行联动

【关键字】

CustomTabBar / Tab / 闭包 / 联动

【问题描述】

咨询一下Tab中的一些写法。

Tabs() {
TabContent() {
Text('首页的内容').fontSize(30)
}
.tabBar('首页')

TabContent() {
Text('推荐的内容').fontSize(30)
}
.tabBar('推荐')

TabContent() {
Text('发现的内容').fontSize(30)
}
.tabBar('发现')

TabContent() {
Text('我的内容').fontSize(30)
}
.tabBar("我的")
}

这种写法和下列的这种写法差别是什么？

Tabs({ index: this.currentIndex }) {
TabContent() {
DiscoverView()
}

TabContent() {
LearningView({ learnedId: $learnedId })
}

TabContent() {
MapView()
}

TabContent() {
ConferenceView()
}

TabContent() {
MineView()
}
}
.layoutWeight(1)
.barHeight(0)
.scrollable(false)
.onChange((index) => {
this.currentIndex = index;
ContinueModel.getInstance().data.mainTabIndex = index;

if (AppStorage.get('audioPlayerStatus') !== AudioPlayerStatus.IDLE) {
AudioPlayerService.getInstance().stop().then(() => {
AudioPlayerService.destroy();
});
}
})

CustomTabBar({ currentIndex: $currentIndex })
}
.width(AppConstants.FULL_PERCENT)
.height(AppConstants.FULL_PERCENT)
.backgroundColor((this.currentBreakpoint === BreakpointTypeEnum.LG && this.currentIndex === TabBarType.MINE) ?$r('app.color.clear_color') : $r('sys.color.ohos_id_color_sub_background'))

第二种代码示例来自hmosworld中MainPage。

这个 CustomTabBar({ currentIndex: $currentIndex })自定义组件为什么可以在Tabs的闭包外跟Tabs进行联动呢？

【解决方案】

CustomTabBar({ currentIndex: $currentIndex })是因为currentIndex 和CustomTabBar的属性进行了双向绑定在CustomTabBar中改变这个属性的值也会影响到MainPage的变化，而MainPage中的currentIndex又与Tabs({ index: this.currentIndex })进行了一个索引绑定操作因此带动了整个页面的刷新和跳转。