跳转其他页面返回时，如何设置Tabs的默认显示页面
=========================

#### 问题现象

使用Tabs组件，如何实现当前显示页签为1的页面内容，点击某个页签使用router跳转到其他页面再返回时，显示的依然是页签为1的页面内容？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a8/v3/t_ZPRtzNTc2mnvZiXrAOIQ/zh-cn_image_0000002658966205.gif?HW-CC-KV=V1&HW-CC-Date=20260709T134032Z&HW-CC-Expire=86400&HW-CC-Sign=4A8ABE20585C336AE367476D8DCBA747EC092809B9CCF79CD894BB4C593EFBA7 "点击放大")

#### 背景知识

*   [onPageShow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-custom-component-lifecycle#onpageshow)：页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅[@Entry](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components#entry)装饰的自定义组件作为页面时生效。
*   [Tabs](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabs)：通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
*   [getRouter().pushUrl()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-router#pushurl)：跳转到应用内的指定页面，通过Promise获取跳转异常的返回结果。

#### 解决方案

@Entry修饰的页面在显示时会触发onPageShow生命周期回调，可以在此回调中设置页面显示的初始状态，Tabs组件显示具体哪个页面由Tabs内的currentIndex参数决定的，当页面返回时在onPageShow()方法内重设currentIndex的值使其显示对应页面。运行下述示例需要自行创建一个简单的PageA页面。

class TabBar {
  title: string;
  index: number;

  constructor(title: string, index: number) {
    this.title \= title;
    this.index \= index;
  }
}

@Entry
@Component
struct TabsTestPage {
  uiContext \= this.getUIContext();
 _ // 当前选中Tabs的索引_
  @State currentIndex: number \= 1;
  _// 判断Tabs是否选中（用于自定义Tabs列表的选中状态）_

  @State selectedIndex: number \= 0;
  private tabsController: TabsController \= new TabsController();
  private tabBars: TabBar\[\] \= \[
    new TabBar('翻译机', 0),
    new TabBar('首页', 1),
    new TabBar('推荐', 2),
  \];

  _// 页面显示时初始化状态_
  onPageShow(): void {
    this.currentIndex \= 1;
  }

 _ // 自定义Tabs组件构建函数_
  @Builder
  TabBuilder() {
    List() {
      ForEach(this.tabBars, (item: TabBar, index: number) \=\> {
        ListItem() {
          Column() {
            Text(item.title) _//_ _根据选中状态改变文字颜色_
              .fontColor(this.currentIndex \=== item.index ? '#0A59F7' : Color.Black)
              .fontSize(20)
              .align(Alignment.Center);
          }
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Start)
          .margin({ left: 10 })
          .onClick(() \=\> {
          _  // 更新Tabs组件的选中状态_
            this.currentIndex \= index;
          });
        }.height(100);
      });
    }.height(100)
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off);
  }

  build() {
    Column() {
      Flex({ alignItems: ItemAlign.Center }) {
        this.TabBuilder();
      }.width('100%').height(100);

      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.tabsController }) {
        TabContent() {
          Text('翻译机的内容')
            .fontSize(30)
            .onClick(() \=\> {
              let promptShow \= this.uiContext.getPromptAction();
              promptShow.showToast({
                message: '翻译机跳转'
              });
           _   // 需要自行创建一个PageA的@Entry页面_
              this.uiContext.getRouter().pushUrl({ url: 'pages/PageA' });
            });
        };

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

        TabContent() {
          Text('推荐的内容')
            .fontSize(30);
        };
      }.barHeight(0)
      .onAnimationStart((targetIndex: number) \=\> {
        this.currentIndex \= targetIndex;
      })
      .onChange((index: number) \=\> {
    _    // currentIndex控制TabContent显示页签_
        this.currentIndex \= index;
        this.selectedIndex \= index;
      });

    }.height('100%').width('100%');
  }
}

#### 总结

单例模式跳转时，由于也是复用路由栈内已有的页面实例，也可在本方案所述的页面生命周期内实现。