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

简介: 本示例展示了如何通过 `PersistentStorage` 和 `AppStorage` 实现全局 UI 状态的持久化,并结合 `Tabs` 组件创建动态切换的首页导航栏。用户可在“视频”与“超话”间切换,状态自动保存。同时,通过 `router` 跳转至导航设置页 (`NavSetting.ets`) 完成选项修改,支持返回操作及对齐布局调整。代码涵盖基础组件用法,适合学习跨页面状态管理与 UI 设计。

image.png

实现步骤:

首页 Tab 栏
导航设置页,实现切换
使用 PersistentStorage + AppStorage 实现全局UI状态且持久化
代码:

Index.ets 文件
import { router } from '@kit.ArkUI'

PersistentStorage.persistProp('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) 单独设置对齐方式
————————————————

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

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

相关文章
|
4天前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
ArkTS拓展了TypeScript,可以结合ArkUI进行渲染控制,是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
|
5天前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
|
1天前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战(十):ArkUI图片组件Image
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Image图片组件的使用。
|
5天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
31 0
|
5天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
47 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
5天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
26 0
|
5天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
53 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
5天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
39 0
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
2月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素