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) 单独设置对齐方式

Mar 20, 2025 - 04:38

实现步骤：

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

Index.ets 文件

import { router } from '@kit.ArkUI'

PersistentStorage.persistProp<boolean>('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) 单独设置对齐方式