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

zhousg1007

已于 2025-03-12 10:48:32 修改

于 2025-03-12 10:45:49 首次发布

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

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

实现步骤：

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

本文使用 文章同步助手 同步