HarmonyOS鸿蒙Next中Tabs组件如何通知TabContent登录状态变更

HarmonyOS鸿蒙Next中Tabs组件如何通知TabContent登录状态变更 应用中Tabs组件点击登录后，TabContent的内容如何通知更新UI？

3 回复

模拟了登录页登录后更新个人信息，切换tab后更新个人信息。

import { UserInfo } from './UserInfo'
import { router } from '@kit.ArkUI';

//写在ability更合适
AppStorage.setOrCreate('userInfo', new UserInfo("name1"));

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  @State userInfo: SubscribedAbstractProperty<UserInfo> = AppStorage.link('userInfo');

  onPageShow(): void {
    this.userInfo = AppStorage.link('userInfo')
  }

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }.tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.tabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.tabBuilder(2, 'yellow'))

        TabContent() {
          Info({ userInfo: this.userInfo.get() })
            .onClick(() => {
              router.pushUrl({
                url: 'pages/login'
              })
            })
        }.tabBar(this.tabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
        // //到了个人信息页面，刷新name
        // if (index == 3) {
        // this.userInfo.set(new UserInfo("name2222"))
        // }
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

@Component
struct Info {
  @Prop userInfo: UserInfo

  build() {
    Text(this.userInfo.name)
  }
}

import { UserInfo } from './UserInfo';

AppStorage.setOrCreate('name', "nameundefined");

@Entry
@Component
struct Login {
  @State
  userInfo: SubscribedAbstractProperty<UserInfo> = AppStorage.link('userInfo');

  build() {
    Column() {
      Text(this.userInfo.get().name)
      Button("点击按钮登录").onClick(() => {
        this.userInfo.set(new UserInfo("nameY"))
      })
    }.width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Tabs组件如何通知TabContent登录状态变更的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Tabs组件与TabContent之间的通信可以通过事件机制实现。要通知TabContent登录状态变更，可以使用EventHub或Emitter来发布和订阅事件。

  1. EventHub方式：

    • 在Tabs组件中，使用EventHub发布一个自定义事件，携带登录状态变更的信息。
    • 在TabContent中，通过EventHub订阅该事件，并在事件回调中处理登录状态变更的逻辑。
    // Tabs组件中发布事件
EventHub.emit('loginStatusChanged', { isLoggedIn: true });

// TabContent中订阅事件
EventHub.on('loginStatusChanged', (data) => {
    // 处理登录状态变更
});

  2. Emitter方式：

    • 在Tabs组件中，使用Emitter发布一个自定义事件，携带登录状态变更的信息。
    • 在TabContent中，通过Emitter订阅该事件，并在事件回调中处理登录状态变更的逻辑。
    // Tabs组件中发布事件
Emitter.emit('loginStatusChanged', { isLoggedIn: true });

// TabContent中订阅事件
Emitter.on('loginStatusChanged', (data) => {
    // 处理登录状态变更
});

这两种方式都可以实现Tabs组件与TabContent之间的通信，具体选择取决于项目需求和架构设计。

在HarmonyOS鸿蒙Next中，可以通过Tabs和TabContent组件之间的通信机制来通知登录状态变更。具体步骤如下：

  1. 定义状态变量：在父组件中定义一个状态变量（如isLoggedIn）来存储登录状态。

  2. 状态更新：当登录状态变更时，更新isLoggedIn的值。

  3. 传递状态：将isLoggedIn作为属性传递给TabContent组件。

  4. 监听状态：在TabContent组件中监听isLoggedIn的变化，并根据新状态更新UI或执行相应逻辑。

通过这种方式，TabContent可以实时响应登录状态的变更。

回到顶部