实现微博自定义导航栏功能
实现步骤：
- 首页 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) 单独设置对齐方式
