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

举报
yd_234838830 发表于 2025/03/26 14:26:05 2025/03/26
【摘要】 实现步骤:首页 Tab 栏导航设置页,实现切换使用 PersistentStorage + AppStorage 实现全局UI状态且持久化代码:Index.ets 文件import { router } from ‘@kit.ArkUI’PersistentStorage.persistProp<boolean>(‘isVideo’, true)@Entry@Componentstruct ...

image.png

实现步骤:

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

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。