论坛 › 鸿蒙 › HarmonyOS实战开发：Tabs（组件导航）

天空闲话 发表于 2024-11-13 14:30:14

HarmonyOS实战开发：Tabs（组件导航）

当页面信息较多时，为了让用户可以或许聚焦于当前表现的内容，必要对页面内容进行分类，进步页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提拔查找信息的效率，另一方面精简用户单次获取到的信息量。
根本布局

Tabs组件的页面构成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面布局如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。 图1 Tabs组件布局表示图

https://i-blog.csdnimg.cn/blog_migrate/f26616fc8d233635904da4adcb134668.png
   阐明：


[*] TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
[*] TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
Tabs使用花括号包裹TabContent，如图2，其中TabContent表现相应的内容页。
图2 Tabs与TabContent使用  

https://i-blog.csdnimg.cn/blog_migrate/fe0ba3739233e96c26e3f133dfcc4dd6.png
每一个TabContent对应的内容必要有一个页签，可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置tabBar属性，可以设置其对应页签中的内容，tabBar作为内容的页签。
TabContent() {
   Text('首页的内容').fontSize(30)
}
.tabBar('首页') 设置多个内容时，需在Tabs内按照顺序放置。
Tabs() {
TabContent() {
    Text('首页的内容').fontSize(30)
}
.tabBar('首页')

TabContent() {
    Text('推荐的内容').fontSize(30)
}
.tabBar('推荐')

TabContent() {
    Text('发现的内容').fontSize(30)
}
.tabBar('发现')

TabContent() {
    Text('我的内容').fontSize(30)
}
.tabBar("我的")
} 底部导航

底部导航是应用中最常见的一种导航方式。底部导航位于应用一级页面的底部，用户打开应用，可以或许分清整个应用的功能分类，以及页签对应的内容，而且其位于底部更加方便用户单手操作。底部导航一般作为应用的主导航形式存在，其作用是将用户关心的内容按照功能进行分类，迎适用户使用习惯，方便在不同模块间的内容切换。
图3 底部导航栏  

https://i-blog.csdnimg.cn/blog_migrate/b346cb9513cd1c103715faba416b2385.gif
导航栏位置使用Tabs的barPosition参数进行设置。默认情况下，导航栏位于顶部，此时，barPosition为BarPosition.Start。设置为底部导航时，必要将barPosition设置为BarPosition.End。
Tabs({ barPosition: BarPosition.End }) {
// TabContent的内容：首页、发现、推荐、我的
...
} 顶部导航

当内容分类较多，用户对不同内容的欣赏概率相差不大，必要常常快速切换时，一般采用顶部导航模式进行设计，作为对底部导航内容的进一步划分，常见一些资讯类应用对内容的分类为关注、视频、数码，大概主题应用中对主题进行进一步划分为图片、视频、字体等。
图4 顶部导航栏  

https://i-blog.csdnimg.cn/blog_migrate/686ed26257257b7638b39423f830e631.gif
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容:关注、视频、游戏、数码、科技、体育、影视
...
} 侧边导航

侧边导航是应用较为少见的一种导航模式，更多适用于横屏界面，用于对应用进行导航操作，由于用户的视觉习惯是从左到右，侧边导航栏默以为左侧侧边栏。
图5 侧边导航栏  

https://i-blog.csdnimg.cn/blog_migrate/bcd92e563b8ddc4c1661b2f7dead8be3.png
实现侧边导航栏必要将Tabs的vertical属性设置为true，vertical默认值为false，表明内容页和导航栏垂直方向排列。
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容:首页、发现、推荐、我的
...
}
.vertical(true)
.barWidth(100)
.barHeight(200)   阐明：


[*] vertical为false时，tabbar宽度会默认撑满屏幕的宽度，必要设置barWidth为合适值。
[*] vertical为true时，tabbar的高度会默认实际内容高度，必要设置barHeight为合适值。
限定导航栏的滑动切换

默认情况下，导航栏都支持滑动切换，在一些内容信息量必要进行多级分类的页面，如支持底部导航+顶部导航组合的情况下，底部导航栏的滑动效果与顶部导航出现辩说，此时必要限定底部导航的滑动，避免引起不好的用户体验。 图6 限定底部导航栏滑动  

https://i-blog.csdnimg.cn/blog_migrate/37dcb422cf6f4cb1bea233b035d60bb7.gif
控制滑动切换的属性为scrollable，默认值为true，表示可以滑动，若要限定滑动切换页签则必要设置为false。
Tabs({ barPosition: BarPosition.End }) {
TabContent(){
    Column(){
      Tabs(){
      // 顶部导航栏内容
      ...
      }
    }
    .backgroundColor('#ff08a8f1')
    .width('100%')
}
.tabBar('首页')

// 其他TabContent内容：发现、推荐、我的
...
}
.scrollable(false) 固定导航栏

当内容分类较为固定且不具有拓展性时，比方底部导航内容分类一般固定，分类数目一般在3-5个，此时使用固定导航栏。固定导航栏不可滚动，无法被拖拽滚动，内容均分tabBar的宽度。
图7 固定导航栏 

https://i-blog.csdnimg.cn/blog_migrate/cfef22a54b1370111e17eba8f51f6a00.gif
Tabs的barMode属性用于控制导航栏是否可以滚动，默认值为BarMode.Fixed。
Tabs({ barPosition: BarPosition.End }) {
// TabContent的内容：首页、发现、推荐、我的
...
}.barMode(BarMode.Fixed) 滚动导航栏

滚动导航栏可以用于顶部导航栏大概侧边导航栏的设置，内容分类较多，屏幕宽度无法容纳所有分类页签的情况下，必要使用可滚动的导航栏，支持用户点击和滑动来加载隐藏的页签内容。
图8 可滚动导航栏  

https://i-blog.csdnimg.cn/blog_migrate/d547568603a4c16acd3d19fae9248115.gif
滚动导航栏必要设置Tabs组件的barMode属性，默认值为BarMode.Fixed表示为固定导航栏，BarMode.Scrollable表示可滚动导航栏。
Tabs({ barPosition: BarPosition.Start }) {
// TabContent的内容：关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事
...
}
.barMode(BarMode.Scrollable) 自界说导航栏

对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，必要自界说导航页签的样式。
图9 自界说导航栏  

https://i-blog.csdnimg.cn/blog_migrate/5d67e2a63b128c6560c5908856269489.png
体系默认情况下采用了下划线标志当前活跃的页签，而自界说导航栏必要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。
设置自界说导航栏必要使用tabBar的参数，以其支持的CustomBuilder的方式传入自界说的函数组件样式。比方这里声明TabBuilder的自界说函数组件，传入参数包括页签文字title，对应位置index，以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否，决定UI表现的样式。
@Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
Column() {
    Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
      .size({ width: 25, height: 25 })
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
}
.width('100%')
.height(50)
.justifyContent(FlexAlign.Center)
} 在TabContent对应tabBar属性中传入自界说函数组件，并通报相应的参数。
TabContent() {
Column(){
    Text('我的内容')
}
.width('100%')
.height('100%')
.backgroundColor('#007DFF')
}
.tabBar(this.TabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal'))) 切换至指定页签

在不使用自界说导航栏时，体系默认的Tabs会实现切换逻辑。在使用了自界说导航栏后，切换页签的逻辑必要手动实现。即用户点击对应页签时，屏幕必要表现相应的内容页。
图10 使用自界说导航栏实现切换指定页签  

https://i-blog.csdnimg.cn/blog_migrate/33afe13b65c5d4f26c05a7461f9f0ba0.gif
切换指定页签必要使用TabsController，TabsController是Tabs组件的控制器，用于控制Tabs组件进行页签切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。
class Tmp{
currentIndex:number = 0;
tabsController : TabsController = new TabsController()
foo(val:number){
    this.currentIndex = val;
}
tabfoo(){
    this.tabsController.changeIndex(this.currentIndex);
}
}
private tabsController : object = new TabsController()
@State currentIndex:number = 0;

@Builder TabBuilder(title: string, targetIndex: number) {
Column() {
    Text(title)
      .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
}
...
.onClick(() => {
    let Cur:Tmp = new Tmp()
    Cur.foo(targetIndex)
    Cur.tabfoo()
})
} 使用自界说导航栏时，在tabBar属性中传入对应的@Builder，并传入相应的参数。
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent(){
    ...
}.tabBar(this.TabBuilder('首页',0))

TabContent(){
    ...
}.tabBar(this.TabBuilder('发现',1))

TabContent(){
    ...
}.tabBar(this.TabBuilder('推荐',2))

TabContent(){
    ...
}
.tabBar(this.TabBuilder('我的',3))
} 滑动切换导航栏

在不使用自界说导航栏的情况下，Tabs默认会实现tabBar与TabContent的切换联动。但在使用了自界说导航栏后，使用TabsController可以实现点击页签与页面内容的联动，但不能实现滑动页面时，页面内容对应页签的联动。即用户在滑动屏幕切换页面内容时，页签栏必要同步切换至内容对应的页签。
图11 滑动切换时页签内容不联动  

https://i-blog.csdnimg.cn/blog_migrate/3188eb5e892b40304d5dbc7847e78c89.gif
此时必要使用Tabs提供的onChange事件方法，监听索引index的变化，并将当前活跃的index值通报给currentIndex，实现页签内容的切换。
class Tmp{
currentIndex:number = 0;
foo(val:number){
    this.currentIndex = val;
}
}
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
    ...
}.tabBar(this.TabBuilder('首页', 0))

TabContent() {
    ...
}.tabBar(this.TabBuilder('发现', 1))

TabContent() {
    ...
}.tabBar(this.TabBuilder('推荐', 2))

TabContent() {
    ...
}
.tabBar(this.TabBuilder('我的', 3))
}.onChange((index:number) => {
let Cur:Tmp = new Tmp()
Cur.foo(index)
}) 图12 内容与页签联动 

https://i-blog.csdnimg.cn/blog_migrate/604fa80f586794f694684ed5a4daf197.gif
最后

有许多小同伴不知道学习哪些鸿蒙开发技术？不知道必要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，终极浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
希望这一份鸿蒙学习资料可以或许给大家带来资助，有必要的小同伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完备版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
鸿蒙（HarmonyOS NEXT）最新学习路线

https://i-blog.csdnimg.cn/blog_migrate/8fb90f03f52981850522a8d70bfe821d.png


[*]  HarmonOS基础技能
https://i-blog.csdnimg.cn/blog_migrate/d15791a8d9157b12cf470e6e20e199cd.png


[*]HarmonOS就业必备技能 https://i-blog.csdnimg.cn/blog_migrate/219a3f80b24947602f5ce80869c0f0d1.png
[*] HarmonOS多媒体技术
https://i-blog.csdnimg.cn/blog_migrate/f76470c4171a878d5f6071f6d009b828.png


[*]鸿蒙NaPi组件进阶
https://i-blog.csdnimg.cn/blog_migrate/8755cfeac3a887ec19fb168f7164234c.png


[*]HarmonOS高级技能
https://i-blog.csdnimg.cn/blog_migrate/1e210328c1ebf43f08d3b6c5f5c13b48.png


[*]初识HarmonOS内核 https://i-blog.csdnimg.cn/blog_migrate/24384aae472f78c055f7bf545467db7f.png
[*]实战就业级设备开发
https://i-blog.csdnimg.cn/blog_migrate/9b0c4eb9a30ca059d28eceb4727b593e.png
有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布条记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完备版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》

https://i-blog.csdnimg.cn/blog_migrate/9b893c2a4956d6ce72b63212f9216eab.png
《鸿蒙生态应用开发V2.0白皮书》

https://i-blog.csdnimg.cn/blog_migrate/343917b8910aff13b48316fe3db39da6.jpeg
《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建
https://i-blog.csdnimg.cn/blog_migrate/2e05bbd2cb0f05ec297905ba57f803c2.png
 《鸿蒙开发基础》



[*]ArkTS语言
[*]安装DevEco Studio
[*]运用你的第一个ArkTS应用
[*]ArkUI声明式UI开发
[*].……
https://i-blog.csdnimg.cn/blog_migrate/48e16dbee395ba8de1264149330856d4.png
 《鸿蒙开发进阶》



[*]Stage模型入门
[*]网络管理
[*]数据管理
[*]电话服务
[*]分布式应用开发
[*]通知与窗口管理
[*]多媒体技术
[*]安全技能
[*]任务管理
[*]WebGL
[*]国际化开发
[*]应用测试
[*]DFX面向将来设计
[*]鸿蒙体系移植和裁剪定制
[*]……
https://i-blog.csdnimg.cn/blog_migrate/adf72eca696abc1415cd768fceda1af7.png
《鸿蒙进阶实战》



[*]ArkTS实践
[*]UIAbility应用
[*]网络案例
[*]……
https://i-blog.csdnimg.cn/blog_migrate/c077a46bb540fc657713d99f39e9c74c.png
 获取以上完备鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑衅，也是一个机会。只有积极应对变化，不断学习和提拔自己，他们才气在这个厘革的期间中立于不败之地。

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

查看完整版本: HarmonyOS实战开发：Tabs（组件导航）