《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— Tabs底部导航栏》

已于 2024-11-15 10:57:47 修改
阅读量3.4k 收藏 14
点赞数 22
分类专栏： HarmonyOS NEXT 文章标签： harmonyos 华为
于 2024-11-01 15:43:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40533422/article/details/143433625
版权

简介

通过学习HarmonyOS Next，实战项目WanAndroid 鸿蒙版，API接口均来自WanAndroid 开源接口，我们一起来做个App吧。

玩Android 开放API：https://www.wanandroid.com/blog/show/2

效果图

创建每个模块下的各个目录

1、features基础特性层下面的模块对应的目录


    features                                       # 基础特性层，包含独立的业务模块，如启动页、登录模块等              
    |---home                                       // 首页
    |   |---bean                                   // 数据模型
    |   |---components                             // 自定义组件
    |   |---constants                              // 常量
    |   |---model                                  // 业务模型
    |   |---service                                // 业务服务/接口
    |   |---views                                  // 视图层
    |   |---utils                                  // 此模块工具类 需要再加    
    |---login                                      // 登录
    |---question                                   // 问答
    |---scheme                                     // 体系
    |---mine                                       // 我的
    |---login                                      // 登录

2、products产品定制层下面的模块对应的目录

    products                                       # 产品定制层，作为不同设备或场景应用入口，例如phone、tv等
    |---phone                                      // 手机
    |   |---app                                    // 全局初始化配置
    |   |---bean                                   // 数据模型
    |   |---components                             // 自定义组件 
    |   |---constants                              // 常量
    |   |---model                                  // 业务模型
    |   |---pages                                  // 页面 
    |   |---service                                // 业务服务/接口
    |   |---test                                   // 测试某个效果的例子

创建后就可以搭建了。

使用Tabs搭建底部导航栏

  • 详细使用步骤还得去官方(选项卡 (Tabs))去学习，再来看就一目了然了.

1、通过上面图一底部导航栏分为上面图片，下面是文字，选中都变颜色，定义一个对象的结构，命名为TabModel，因为后期可能为公共的，所以位置放在uicomponents模块model目录。

    export interface TabModel {
      index: number; // 下标
      title: string; // 标题
      selectImage: Resource; // 选中图片
      // unSelectImage: Resource; // 未选中图片
    }

2、组装数据，定义一个首页底部Tab数据，图片资源都在源码里。


/**
 * 首页底部Tab显示数据
 */
 
export const tabBarModel: Array<TabModel> = [
  {
    index: 0,
    title: '首页',
    selectImage: $r('app.media.ic_bottom_bar_home'),
  },
  {
    index: 1,
    title: '问答',
    selectImage: $r('app.media.ic_bottom_bar_ques'),
  },
  {
    index: 2,
    title: '体系',
    selectImage: $r("app.media.ic_bottom_bar_scheme"),
  },
  {
    index: 3,
    title: '我的',
    selectImage: $r('app.media.ic_bottom_bar_mine'),
  }

]

3、搭建Tabs

  • 定义一个选中的index
  • 设置为底部导航时，需要将barPosition设置为BarPosition.End。
  • 鼠标放到Tabs上，可以查看对应的API，很方便

  • 自定义导航栏，通过TabContent的tabBar

    Column() {
      Divider().color($r('app.color.color_F0F0F0'))
      Badge({
        count: index != 1 ? 0 : this.msgCount,
        position: BadgePosition.RightTop,
        style: {
          fontSize: 8,
          badgeSize: 13
        }
      }) {
        Image(item.selectImage /*this.selectedIndex == index ? item.selectImage : item.unSelectImage*/)
          .colorBlend(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
          .height(24)
          .margin(4)
      }.margin({ top: 4 })

      Text(item.title)
        .width(CommonConst.FULL_PARENT)
        .fontSize(14)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
        .fontColor(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
        .margin({ bottom: 4 })
    }
    .width(CommonConst.FULL_PARENT)
    .height(CommonConst.FULL_PARENT)
    .backgroundColor($r('app.color.white'))
  • ！！！选中的图片如果只是变了颜色，其实不用再单独设置一个选中的图片，可以通过Image的colorBlend来设置选中图片

4、效果为

  • 把中间内容区域换成每个模块对应的页面，分别是

@Builder
tabContentBuilder(item: TabModel) {
  if (item.index == 0) {
    // 首页
    HomeView()
  } else if (item.index == 1) {
    // 问答
    QuestionView()
  } else if (item.index == 2) {
    // 体系
    SchemeView()
  } else if (item.index == 3) {
    // 我的
    MineView()
  }

}

切换导致的问题

  • 每次切换都重新加载，这肯定对用户的体验是不好的，那我们通过存储每个页面的状态来实现，就初始化一次。

  • 定义一个数组，存储状态
    //存储页面状态
    @Local tabContentArr: boolean[] = [true, false, false, false]
  • 切换的时候状态设置为true
    .onChange((index: number) => {
      this.selectedIndex = index;
      this.tabContentArr[index] = true;
    })
  • 加载视图判断

    if (this.selectedIndex === index || this.tabContentArr[index]) {
      this.tabContentBuilder(item)
    }
  • 最终效果为

完整代码

    @Preview
    @ComponentV2
    export struct MainPage {
      @Local selectedIndex: number = 0 // 当前选中的tab下标
      @Local msgCount: number = 9 // 消息数量
      //存储页面状态
      @Local tabContentArr: boolean[] = [true, false, false, false]

      build() {
        Stack() {
          Tabs({ index: this.selectedIndex, barPosition: BarPosition.End }) {
            ForEach(tabBarModel, (item: TabModel, index: number) => {
              TabContent() {
                if (this.selectedIndex === index || this.tabContentArr[index]) {
                  this.tabContentBuilder(item)
                }
              }.tabBar(this.tabBottom(tabBarModel[item.index], item.index))
            }, (item: string) => item)

          }.barWidth(CommonConst.FULL_PARENT)
          .barHeight(56) //设置导航栏高度
          .scrollable(false) // 禁止左右滑动
          .onChange((index: number) => {
            this.selectedIndex = index;
            this.tabContentArr[index] = true;
          })
        }.width(CommonConst.FULL_PARENT)
        .height(CommonConst.FULL_PARENT)

      }

      @Builder
      tabContentBuilder(item: TabModel) {
        if (item.index == 0) {
          // 首页
          HomeView()
        } else if (item.index == 1) {
          // 问答
          QuestionView()
        } else if (item.index == 2) {
          // 体系
          SchemeView()
        } else if (item.index == 3) {
          // 我的
          MineView()
        }

      }

      @Builder
      tabBottom(item: TabModel, index: number) {
        Column() {
          Divider().color($r('app.color.color_F0F0F0'))
          Badge({
            count: index != 1 ? 0 : this.msgCount,
            position: BadgePosition.RightTop,
            style: {
              fontSize: 8,
              badgeSize: 13
            }
          }) {
            Image(item.selectImage /*this.selectedIndex == index ? item.selectImage : item.unSelectImage*/)
              .colorBlend(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
              .height(24)
              .margin(4)
          }.margin({ top: 4 })

          Text(item.title)
            .width(CommonConst.FULL_PARENT)
            .fontSize(14)
            .fontWeight(500)
            .textAlign(TextAlign.Center)
            .fontColor(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
            .margin({ bottom: 4 })
        }
        .width(CommonConst.FULL_PARENT)
        .height(CommonConst.FULL_PARENT)
        .backgroundColor($r('app.color.white'))

      }
    }

短时间内连续点击两次才能退出应用

  • 定义一个状态变量来记录上次点击返回键的时间
let lastBackPressedTime = 0
  • 在onBackPressed里处理
 .onBackPressed(() => {
      const currentTime = new Date().getTime()
      const timeDifference = currentTime - lastBackPressedTime
      if (timeDifference < 2000) { // 2秒内再次点击
        //退出应用
        AppUtil.exit()  // 此方法来自于大佬的 harmony-utils
      } else {
        // 提示用户
        ToastUtil.showToast('再按一次退出应用')
        lastBackPressedTime = currentTime
      }

      return true
    })

工程目录,请看README.md

https://gitee.com/jiaojiaoone/explore-harmony-next/blob/master/README.md

  • 以往系列文章
  1. 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 模块化基础篇》
  2. 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建基础特性层》
  3. 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建公共能力层》

若本文对您稍有帮助，诚望您不吝点赞，多谢。

有兴趣的同学可以点击查看源码

欢迎加我微信一起交流：+V：yinshiyuba

JasonYin~
关注
专栏目录
鸿蒙 ETS 方式实现移动端底部导航栏（Tabs+TabContent）
QwwyEmacs_Lisp的博客
09-24 744
首先，我们需要创建一个鸿蒙应用程序，并定义底部导航栏的布局。Tabs 是一个水平导航栏，用于显示不同的标签页，而 TabContent 是用于显示当前选中标签页内容的容器。移动应用程序中的底部导航栏是一种常见的用户界面元素，它通常用于在不同的页面之间导航。本文将介绍如何使用鸿蒙 ETS（分屏多任务）方式，在移动端开发中实现底部导航栏，并提供相应的源代码。通过以上代码，我们可以实现一个基本的底部导航栏，用户可以点击不同的标签页来切换页面内容。属性，分别用于设置当前活动的标签页索引和处理标签页切换事件。
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 6483
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
鸿蒙开发—黑马云音乐之首页导航栏
Smooth的博客
07-28 439
当点击某一TabContent时，将index赋值currentIndex，image设置三元判断表达式，判断背景颜色是否该变色。设置参数currentIndex类型为number，初始为0，设置属性.onChange((index:number)=>{与List内只能使用ListItem类似，Tabs内只能使用TabContent。自定义tabBuilder，使用Tabs组件实现，属性自行调整。之后才能在TabContent内调用页面。
鸿蒙应用开发之Ability底部导航栏
gulixiong的专栏
11-13 2598
先说一下功能需求: 点击底部导航的图片所在的区域，上方显示不同的内容，例如：点击第一个图标，中间显示 文本内容“home”,点击第二个图标显示"list',点击第三个图标显示"me'， 点击home的时候，home所在区域显示高亮，其他两个导航图标和文字显示灰色 1 布局如下: ability_main.xml <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http:/.
鸿蒙开发之导航栏
zzz777qqq的博客
05-02 1076
鸿蒙开发正当时，现在入手正是好时机。还在犹豫不决的朋友们，小编在这里建议大家早点入手！在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！1、UI开发（ArkTS声明式开发范式）概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概述使用异步并发能力进行开发使用多线程并发能力容器类库。
鸿蒙开发中 Navigation组件 自定义导航栏
flikeu的博客
09-20 494
使用@Builder装饰器 自定义构建函数，自定义导航栏
HarmonyOS 鸿蒙应用开发( 五、快速实现ArkUI页面底部导航Tabs)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-25 5423
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。图9自定义导航栏图系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
iview tabs 顶部导航栏和模块切换栏的示例代码
10-17
在现代Web开发中，使用组件化UI框架可以极大提升开发效率和用户体验，iView是一个流行的Vue组件库，它提供了许多预构建的UI组件，可以帮助开发者快速构建页面。在本篇中，我们将关注于iView组件库中的Tabs组件，学习...
vue elementUI使用tabs与导航栏联动
10-16
在前端开发中，常常需要通过导航栏进行页面的快速跳转，同时，在多标签页（tabs）场景下，又需要能够打开并管理多个视图组件。本文将探讨如何使用Vue.js结合Element UI来实现一个导航栏与tabs组件的联动。 首先，...
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
10-21
在构建Ionic应用时，我们经常遇到需要在特定页面或多级目录中隐藏底部导航栏（tabs）的需求。这是因为底部导航栏通常用于展示主要的页面，而在深入的子页面中，这些导航元素可能不再适用或者会干扰用户体验。本文将...
HarmonyOS应用开发者基础题库
12-29
这些知识点构成了HarmonyOS应用开发的基础，涵盖了从项目创建、页面布局到组件交互和应用框架的各个方面，对开发者理解和构建HarmonyOS应用至关重要。学习和掌握这些内容将有助于开发者高效地开发出功能丰富、用户...
flutter鸿蒙版本通过底部导航栏的实现熟悉架构及语法
最新发布
小淼淼的博客
10-08 1万+
在这篇博客中，我们将深入分析一个 Flutter 应用的完整代码，该应用实现了一个底部导航栏，允许用户在不同页面之间切换。我们将逐行讲解代码，帮助大家理解 Flutter 的结构、状态管理以及组件之间的交互。通过这段代码，我们构建了一个基本的 Flutter 应用，包含了底部导航栏，可以在不同页面之间进行切换。该示例展示了 Flutter 的状态管理机制、组件结构以及如何使用 Material Design 组件构建用户界面。希望本文能够帮助您更好地理解 Flutter 开发！
HarmonyOS入门开发(一) 实现底部导航栏
qq_32136827的博客
11-17 1901
Tabs相当于Android中的BottomNavigationView。TabContent相当于Android中的fragment。TabBuilder内相当于每个Item。
OpenHarmony实战开发-使用一次开发多端部署实现一多导航栏
m0_70749039的博客
04-03 1006
本示例展示了导航组件在不同设备形态下的样式。
04鸿蒙APP开发之创建一个底部菜单栏及首页列表
James-Tom的博客
12-18 2789
构建一个带有底部四个菜单的导航栏，首页显示一个列表，并添加测试数据，及点击事件。
HarmonyOS NEXT 底部选项卡功能
威哥爱编程，CSDN 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
09-09 442
事件，我们可以监听选项卡的变化并执行相应的逻辑。学习鸿蒙 NEXT 开发，国产应用开发，全靠你我他，加油。我们创建了一个底部选项卡，每个选项卡都有对应的内容和图标。等属性来自定义导航栏的样式和行为，例如设置为固定宽度或滚动显示。属性来配置每个选项卡的标题和图标。子组件，这些子组件将包含每个选项卡页面的内容。来构建每个选项卡的样式，包括图标和文本。装饰器来定义当前选中的选项卡索引，并使用。事件来监听选项卡的切换，并更新当前状态。函数会更新当前选中的选项卡索引，并且。组件来创建底部导航栏，并通过。
鸿蒙开发-UI-组件导航-Tabs
中年程序员
02-06 3261
上文学习了鸿蒙UI开发组件导航Navigation，学习了组件导航navigation的使用，页面的显示模式以及页面的组成，菜单栏和工具栏的使用设置，本文将要学习另外一种组件导航组件Tabs对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。代码示例。
鸿蒙项目实战-月木学途：2.自定义底部导航
m0_63040701的博客
06-30 2426
1.标明底部导航属性2.自定义导航项tabBar/*** 自定义导航项TabBar* @param title 标题* @param targetIndex 目标索引* @param selectedImg 选中图片* @param normalImg 未选中图片*/Column() {3.导航绑定切换事件//这里的index对应的是tabBar组件的索引，从0依次增加})4.把每个页面封装成组件，引入到中TabContent。
HarmonyOS ArkTS实战：新闻数据加载与交互解析
本文主要解析HarmonyOS官网提供的 ArkTS 实现的新闻数据加载案例，讲解如何使用声明式开发范式来实现数据请求和触控事件处理，包括下拉刷新和上拉加载功能。 在 HarmonyOS 应用开发中， ArkTS 是一种支持 ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值