HarmonyOS NEXT 实战系列08-案例微博导航设置

实现步骤：

首页 Tab 栏
导航设置页，实现切换
使用 PersistentStorage + AppStorage 实现全局UI状态且持久化
代码：

Index.ets 文件
import { router } from '@kit.ArkUI'

PersistentStorage.persistProp('isVideo', true)

@Entry
@Component
struct Index {
@StorageProp('isVideo') isVideo: boolean = true

build() {
Column() {
Tabs({ barPosition: BarPosition.End }) {
TabContent() {
Text('首页')
}
.tabBar({
text: '首页'
})

    if (this.isVideo) {
      TabContent() {
        Text('视频')
      }
      .tabBar({
        text: '视频'
      })
    } else {
      TabContent() {
        Text('超话')
      }
      .tabBar({
        text: '超话'
      })
    }


    TabContent() {
      Text('发现')
    }
    .tabBar({
      text: '发现'
    })

    TabContent() {
      Text('消息')
    }
    .tabBar({
      text: '消息'
    })

    TabContent() {
      Column({ space: 24 }) {
        Button('导航栏设置')
          .onClick(() => {
            router.pushUrl({ url: 'pages/NavSetting' })
          })
        Text('我')
      }
    }
    .tabBar({
      text: '我'
    })
  }
}
.height('100%')
.width('100%')

}
}

NavSetting.ets 文件
import { router } from '@kit.ArkUI'

@Entry
@Component
struct NavSetting {
@StorageLink('isVideo') isVideo: boolean = true

build() {
Column() {
Row({ space: 2 }) {
Image($r('sys.media.ohos_ic_back'))
.width(24)
.aspectRatio(1)
Text('返回')
}
.alignSelf(ItemAlign.Start)

  .onClick(() => {
    router.back()
  })

  Row() {
    Text('超话')
    Blank()
    if (!this.isVideo) {
      Image($r('sys.media.ohos_ic_public_ok'))
        .width(24)
        .aspectRatio(1)
        .fillColor('#00ff00')
    }
  }
  .height(60)
  .width('100%')
  .onClick(() => {
    this.isVideo = false
  })

  Row() {
    Text('视频')
    Blank()
    if (this.isVideo) {
      Image($r('sys.media.ohos_ic_public_ok'))
        .width(24)
        .aspectRatio(1)
        .fillColor('#00ff00')
    }
  }
  .height(60)
  .width('100%')
  .onClick(() => {
    this.isVideo = true
  })
}
.height('100%')
.width('100%')
.padding(15)

}
}

梳理：

Tabs 组件基础用法
alignSelf(ItemAlign.Start) 单独设置对齐方式
————————————————

                        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/zsgzsgzsgzsgzsg/article/details/146198958