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

​