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

​

实现微博自定义导航栏功能

​

编辑

实现步骤：

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

​