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

简介
通过学习HarmonyOS Next，实战项目WanAndroid 鸿蒙版，API接口均来自WanAndroid 开源接口，我们一起来做个App吧。
玩Android 开放API：https://www.wanandroid.com/blog/show/2
效果图

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

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

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

复制代码

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

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

复制代码

创建后就可以搭建了。
使用Tabs搭建底部导航栏

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

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

1.     export interface TabModel {
2.       index: number; // 下标
3.       title: string; // 标题
4.       selectImage: Resource; // 选中图片
5.       // unSelectImage: Resource; // 未选中图片
6.     }

复制代码

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

2. /**
3. * 首页底部Tab显示数据
4. */
6. export const tabBarModel: Array<TabModel> = [
7.   {
8.     index: 0,
9.     title: '首页',
10.     selectImage: $r('app.media.ic_bottom_bar_home'),
11.   },
12.   {
13.     index: 1,
14.     title: '问答',
15.     selectImage: $r('app.media.ic_bottom_bar_ques'),
16.   },
17.   {
18.     index: 2,
19.     title: '体系',
20.     selectImage: $r("app.media.ic_bottom_bar_scheme"),
21.   },
22.   {
23.     index: 3,
24.     title: '我的',
25.     selectImage: $r('app.media.ic_bottom_bar_mine'),
26.   }
28. ]

复制代码

3、搭建Tabs

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

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

2.     Column() {
3.       Divider().color($r('app.color.color_F0F0F0'))
4.       Badge({
5.         count: index != 1 ? 0 : this.msgCount,
6.         position: BadgePosition.RightTop,
7.         style: {
8.           fontSize: 8,
9.           badgeSize: 13
10.         }
11.       }) {
12.         Image(item.selectImage /*this.selectedIndex == index ? item.selectImage : item.unSelectImage*/)
13.           .colorBlend(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
14.           .height(24)
15.           .margin(4)
16.       }.margin({ top: 4 })
18.       Text(item.title)
19.         .width(CommonConst.FULL_PARENT)
20.         .fontSize(14)
21.         .fontWeight(500)
22.         .textAlign(TextAlign.Center)
23.         .fontColor(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
24.         .margin({ bottom: 4 })
25.     }
26.     .width(CommonConst.FULL_PARENT)
27.     .height(CommonConst.FULL_PARENT)
28.     .backgroundColor($r('app.color.white'))

复制代码

• ！！！选中的图片假如只是变了颜色，实在不消再单独设置一个选中的图片，可以通过Image的colorBlend来设置选中图片
  

4、效果为

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

2. @Builder
3. tabContentBuilder(item: TabModel) {
4.   if (item.index == 0) {
5.     // 首页
6.     HomeView()
7.   } else if (item.index == 1) {
8.     // 问答
9.     QuestionView()
10.   } else if (item.index == 2) {
11.     // 体系
12.     SchemeView()
13.   } else if (item.index == 3) {
14.     // 我的
15.     MineView()
16.   }
18. }

复制代码

切换导致的问题

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

• 定义一个数组，存储状态
  

1.     //存储页面状态
2.     @Local tabContentArr: boolean[] = [true, false, false, false]

复制代码

• 切换的时候状态设置为true
  

1.     .onChange((index: number) => {
2.       this.selectedIndex = index;
3.       this.tabContentArr[index] = true;
4.     })

复制代码

• 加载视图判断
  

2.     if (this.selectedIndex === index || this.tabContentArr[index]) {
3.       this.tabContentBuilder(item)
4.     }

复制代码

• 终极效果为
  

完整代码

1.     @Preview
2.     @ComponentV2
3.     export struct MainPage {
4.       @Local selectedIndex: number = 0 // 当前选中的tab下标
5.       @Local msgCount: number = 9 // 消息数量
6.       //存储页面状态
7.       @Local tabContentArr: boolean[] = [true, false, false, false]
9.       build() {
10.         Stack() {
11.           Tabs({ index: this.selectedIndex, barPosition: BarPosition.End }) {
12.             ForEach(tabBarModel, (item: TabModel, index: number) => {
13.               TabContent() {
14.                 if (this.selectedIndex === index || this.tabContentArr[index]) {
15.                   this.tabContentBuilder(item)
16.                 }
17.               }.tabBar(this.tabBottom(tabBarModel[item.index], item.index))
18.             }, (item: string) => item)
20.           }.barWidth(CommonConst.FULL_PARENT)
21.           .barHeight(56) //设置导航栏高度
22.           .scrollable(false) // 禁止左右滑动
23.           .onChange((index: number) => {
24.             this.selectedIndex = index;
25.             this.tabContentArr[index] = true;
26.           })
27.         }.width(CommonConst.FULL_PARENT)
28.         .height(CommonConst.FULL_PARENT)
30.       }
32.       @Builder
33.       tabContentBuilder(item: TabModel) {
34.         if (item.index == 0) {
35.           // 首页
36.           HomeView()
37.         } else if (item.index == 1) {
38.           // 问答
39.           QuestionView()
40.         } else if (item.index == 2) {
41.           // 体系
42.           SchemeView()
43.         } else if (item.index == 3) {
44.           // 我的
45.           MineView()
46.         }
48.       }
50.       @Builder
51.       tabBottom(item: TabModel, index: number) {
52.         Column() {
53.           Divider().color($r('app.color.color_F0F0F0'))
54.           Badge({
55.             count: index != 1 ? 0 : this.msgCount,
56.             position: BadgePosition.RightTop,
57.             style: {
58.               fontSize: 8,
59.               badgeSize: 13
60.             }
61.           }) {
62.             Image(item.selectImage /*this.selectedIndex == index ? item.selectImage : item.unSelectImage*/)
63.               .colorBlend(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
64.               .height(24)
65.               .margin(4)
66.           }.margin({ top: 4 })
68.           Text(item.title)
69.             .width(CommonConst.FULL_PARENT)
70.             .fontSize(14)
71.             .fontWeight(500)
72.             .textAlign(TextAlign.Center)
73.             .fontColor(this.selectedIndex == index ? $r('app.color.colorPrimary') : $r('app.color.color_222222'))
74.             .margin({ bottom: 4 })
75.         }
76.         .width(CommonConst.FULL_PARENT)
77.         .height(CommonConst.FULL_PARENT)
78.         .backgroundColor($r('app.color.white'))
80.       }
81.     }

复制代码

工程目录,请看README.md

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

• 以往系列文章
  

• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 模块化基础篇》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建基础特性层》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建公共能力层》
  

若本文对您稍有帮助，诚望您不吝点赞，多谢。
有兴趣的同学可以点击查看源码

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

接待加我微信一起交流：+V：yinshiyuba


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。