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

简介

通过学习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'))

      }
    }

工程目录,请看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):开启构建模块化项目架构奇幻之旅 —— 构建公共能力层》

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

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

  • gitee:https://gitee.com/jiaojiaoone/explore-harmony-next.git
  • github:https://github.com/JasonYinH/ExploreHarmonyNext.git

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/906256.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LinkedList 分析

LinkedList 简介 LinkedList 是一个基于双向链表实现的集合类&#xff0c;经常被拿来和 ArrayList 做比较。关于 LinkedList 和ArrayList的详细对比&#xff0c;我们 Java 集合常见面试题总结(上)有详细介绍到。 双向链表 不过&#xff0c;我们在项目中一般是不会使用到 Link…

MybatisPlus入门(六)MybatisPlus-null值处理

一、MybatisPlus-null值处理 1.1&#xff09;问题引入&#xff1a; 在查询中遇到如下情况&#xff0c;有部分筛选条件没有值&#xff0c;如商品价格有最大值和最小值&#xff0c;商品价格部分时候没有值。 1.2&#xff09;解决办法&#xff1a; 步骤一&#xff1a;新建查询实…

基于树莓派的安保巡逻机器人--(一、快速人脸录入与精准人脸识别)

目录 零、前言 一、人脸检测 二、人脸识别 1、采集人脸 2、训练人脸识别模型 3、人脸识别应用 零、前言 随着智能安防需求的增长&#xff0c;基于人工智能和物联网的安保系统逐渐成为趋势。树莓派因其低成本、高扩展性等特点&#xff0c;成为很多AI项目的理想平台。本文将为大…

网络编程项目之UDP聊天室

项目要求 利用UDP协议&#xff0c;实现一套聊天室软件。服务器端记录客户端的地址&#xff0c;客户端发送消息后&#xff0c;服务器群发给各个客户端软件。 问题思考 客户端会不会知道其它客户端地址&#xff1f; UDP客户端不会直接互连&#xff0c;所以不会获知其它客户端地址…

Java-String类

字符串这个词我想同学们并不陌生&#xff0c;但Java语言中的字符串和我们之前所学习的C语言字符串&#xff0c;差别可谓是非常之大&#xff0c;因为在C语言当中&#xff0c;想要表示一个字符串&#xff0c;就只能使用字符数组或字符指针&#xff0c;但是这种" 对数据进行细…

大学生网上面试注意事项,试试白瓜面试

在数字化时代&#xff0c;大学生网上面试已成为求职过程中的一个关键环节。为了在这个虚拟舞台上留下深刻印象&#xff0c;以下是一些针对大学生网上面试的注意事项&#xff0c;同时&#xff0c;我们将探讨如何利用“白瓜面试”这一AI面试助手来提升你的面试表现。 大学生网上…

SpringBoot【实用篇】- 热部署

文章目录 目标:1.手动启动热部署2.自动启动热部署4.禁用热部署 目标: 手动启动热部署自动启动热部署热部署范围配置关闭热部署 1.手动启动热部署 当我们没有热部署的时候&#xff0c;我们必须在代码修改完后再重启程序&#xff0c;程序才会同步你修改的信息。如果我们想快速查…

【源码+文档】基于SpringBoot+Vue旅游网站系统【提供源码+答辩PPT+参考文档+项目部署】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

ES(2)(仅供自己参考)

Java代码的索引库&#xff1a; package cn.itcast.hotel;import lombok.AccessLevel; import org.apache.http.HttpHost; import org.elasticsearch.action.admin.indices.delete.DeleteIndexRequest; import org.elasticsearch.client.RequestOptions; import org.elasticsea…

《ToDesk云电脑vs青椒云性能测试,谁更能实现游戏自由?》

ToDesk云电脑vs青椒云性能测试 【前言】【使用云电脑的意义】【实测软件】【性能参数对比】1. 硬件配置2.游戏兼容性3. 延迟、流畅度与画面清晰度4. 用户体验5. 价格对比6. 附加功能 【游戏性能测试】《游戏一 黑悟空》《游戏二 赛博朋克 2077》《游戏三 CS反恐精英》 【本文小…

HarmonyOS开发5.0 net 启动界面设置

第一步、创建我们界面 第二步&#xff0c; 在EntryAbility中配置启动页面&#xff0c;在entry/src/main/ets/entryability/EntryAbility.ets中配置启动页面 配置如下 至此大功告成

python--函数详解二

一、作用域&#xff1a; 一个标识符的可见范围&#xff0c;这就是标识符的作用域&#xff0c;一般说的是变量的作用域 1.1、全局作用域 运行结果 在整个程序运行环境中可见。可以被多个函数重复多次使用 1.2、局部作用域 运行结果 这里调用a&#xff0c;显示未定义&#xff…

Etsy又被封号了!这次我终于搞懂了原因...

你是否真的了解在Etsy开店有哪些红线不能踩&#xff1f;你是否真的知道Etsy被封号后如何解决&#xff1f;本文我将探讨Etsy账号被封的常见原因&#xff0c;以及卖家可以采取的应对策略&#xff0c;以期减轻对跨境业务的伤害程度&#xff0c;感兴趣的商家速速码住&#xff0c;不…

大舍传媒:海外发稿的卓越选择——老挝新闻网报道及海外媒体发布服务

大舍传媒&#xff1a;海外发稿的卓越选择——老挝新闻网报道及海外媒体发布服务 在当今全球化的时代&#xff0c;信息的传播速度和范围至关重要。对于企业、组织和个人而言&#xff0c;能够在海外媒体上发布稿件&#xff0c;实现有效的宣传和推广&#xff0c;无疑是提升知名度…

如何找到网上爆款内容,快速复制扩大品牌声量

社媒内容爆款复制是现代营销中的一个重要策略&#xff0c;它对于提升品牌声量、曝光度和知名度具有显著效果。 首先什么是爆款&#xff1f; 爆款内容指的是在社交媒体或其他在线平台上迅速获得大量关注、分享和讨论的内容。 准确、及时找到这部分品牌相关的爆款内容&#xf…

在元神操作系统启动时自动执行任务脚本

1. 背景 本文主要介绍让元神操作系统启动时自动执行任务脚本的方法&#xff0c;适用于无人化任务执行目的。将任务脚本及相关的应用程序准备好之后&#xff0c;把装有元神操作系统的U盘插入目标电脑&#xff0c;然后打开电脑电源就会自动完成所设置的任务。 2. 方法 &#x…

Pandas JSON学习

1.JSON简介 JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript 对象表示法&#xff09;&#xff0c;是存储和交换文本信息的语法&#xff0c;类似 XML。JSON 比 XML 更小、更快&#xff0c;更易解析&#xff0c;Pandas 可以很方便的处理 JSON 数据。 [{"…

扫描电镜的超低温冷冻制样及传输技术(Cryo-SEM)

扫描电镜的超低温冷冻制样及传输技术(Cryo-SEM) 扫描电镜&#xff08;Scanning Electron Microscope&#xff0c;简称SEM&#xff09;是一种利用聚焦电子束扫描样品表面&#xff0c;通过检测二次电子或反射电子等信号来获取样品表面形貌信息的显微观察技术&#xff1b;然而&…

微服务设计模式 - 特性标志(Feature Flags)

微服务设计模式 - 特性标志&#xff08;Feature Flags&#xff09; 定义 特性标志&#xff08;Feature Flags&#xff09;&#xff0c;又称特性开关&#xff08;Feature Toggles&#xff09;&#xff0c;是一种常见的云计算设计模式&#xff0c;允许开发人员通过配置动态地打开…

Mac “屏幕保护程序启动或显示器关闭后需要密码“无效

屏幕保护程序启动或显示器关闭后需要密码只能选择“立即”的解决方法&#xff1a; 在 iPhone mirror中设置&#xff0c;每次询问权限。 参考&#xff1a;https://support.apple.com/en-us/120421