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

实现步骤：

首页 Tab 栏

导航设置页，实现切换

使用 PersistentStorage + AppStorage 实现全局UI状态且持久化

代码：

Index.ets 文件

import { router } from **********'

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 **********'

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

————————————————

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

原文链接：https://blog.csdn.net/zsgzsgzsgzsgzsg/article/details/146198958