当前位置: 首页 > news >正文

HarmonyOS基础:选项卡组件(Tabs)

大家好!我是黑臂麒麟(起名原因:一个出生右臂自带纹身的高质量程序员😏),也是一位6+(约2个半坤年)的前端;
学习如像练武一样,理论和实践要相结合;
如需深究可前往高级ArkTS系列课程;
望对学习鸿蒙小伙伴有所帮助;

选项卡 (Tabs)

基本布局

图1 Tabs组件布局示意图
在这里插入图片描述

图2 Tabs与TabContent使用
在这里插入图片描述
设置多个内容时,需在Tabs内按照顺序放置。

Tabs() {TabContent() {Text('首页的内容').fontSize(30)}.tabBar('首页')TabContent() {Text('推荐的内容').fontSize(30)}.tabBar('推荐')TabContent() {Text('发现的内容').fontSize(30)}.tabBar('发现')TabContent() {Text('我的内容').fontSize(30)}.tabBar("我的")
}

属性方法

barPosition

barPosition(value: BarPosition)
设置Tabs的页签位置。

  • barPosition为BarPosition.Start,导航栏位于顶部
Tabs({ barPosition: BarPosition.End }) {...
}
  • barPosition为BarPosition.End,导航栏位于底部
Tabs({ barPosition: BarPosition.Start }) {...
}
  • barPosition为BarPosition.Start + vertical,侧边栏
    实现侧边导航栏需要将Tabs的vertical属性设置为true,vertical默认值为false,表明内容页和导航栏垂直方向排列。
    在这里插入图片描述
Tabs({ barPosition: BarPosition.Start }) {...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

vertical

vertical(value: boolean)
内容页和导航栏排列方向

说明

  • vertical为false时,tabbar的宽度默认为撑满屏幕的宽度,需要设置barWidth为合适值。
  • vertical为true时,tabbar的高度默认为实际内容的高度,需要设置barHeight为合适值。

scrollable

scrollable(value: boolean)
设置是否可以通过滑动页面进行页面切换。

控制滑动切换的属性为scrollable,默认值为true,表示可以滑动,若要限制滑动切换页签则需要设置为false。

Tabs({ barPosition: BarPosition.End }) {TabContent(){Column(){Tabs(){// 顶部导航栏内容...}}.backgroundColor('#ff08a8f1').width('100%')}.tabBar('首页')
}
.scrollable(false)

barMode

scrollable(value: boolean)
设置TabBar布局模式。

滚动导航栏需要设置Tabs组件的barMode属性,默认值为BarMode.Fixed表示为固定导航栏,BarMode.Scrollable表示可滚动导航栏。
在这里插入图片描述

Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容:关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事...
}
.barMode(BarMode.Fixed) 

滚动导航栏
在这里插入图片描述

Tabs({ barPosition: BarPosition.Start }) {// TabContent的内容:关注、视频、游戏、数码、科技、体育、影视、人文、艺术、自然、军事...
}
.barMode(BarMode.Scrollable) 

自定义导航栏

设置自定义导航栏需要使用tabBar的参数,以其支持的CustomBuilder的方式传入自定义的函数组件样式。

@Entry
@Component
struct TabsExample1 {@State currentIndex: number = 0private controller: TabsController = new TabsController()@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).onChange(() => {// 保存当前的最新下标this.currentIndex = targetIndex// changeIndex方法来实现跳转至指定索引值对应的TabContent内容this.controller.changeIndex(index)})}build() {Column() {Tabs({ barPosition: BarPosition.End }) {TabContent() {...}.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))TabContent() {...}.tabBar(this.tabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))TabContent() {...}.tabBar(this.tabBuilder('我的', 2, $r('app.media.mine_selected'), $r('app.media.mine_normal')))TabContent() {...}.tabBar(this.tabBuilder('我的', 3, $r('app.media.mine_selected'), $r('app.media.mine_normal')))}.animationDuration(0).backgroundColor('#F1F3F5')}.width('100%')}
}

可以通过Tabs组件的onContentWillChange接口,设置自定义拦截回调函数。拦截回调函数在下一个页面即将展示时被调用,如果回调返回true,新页面可以展示;如果回调返回false,新页面不会展示,仍显示原来页面。

Tabs({ barPosition: BarPosition.End, controller: this.controller, index: this.currentIndex }) {...}
.onContentWillChange((currentIndex, comingIndex) => {if (comingIndex == 2) {return false}return true
})

总结

今天我们学习了tab组件的使用,和前端的小程序、手机端的tabs组件工具很相似。理解起来没有难度,大家很快就能上手。

结语

本篇文章的内容结束了。文章错误/不完整的地方,望多指点;
望更多小伙伴们加入harmonyOS开发大家庭,壮大生态圈,让鸿蒙更好,让国产手机应用(物联网)系统更强大。
鸿蒙5.0已经在公测了。和小伙伴一起加油,鸿蒙不仅仅应用开发系统。也会在物联网等领域大展拳脚。鸿蒙之父说:“手机端只是鸿蒙的5%的潜能。应用开发只是第一步,还有更多潜能供我们发觉开发"。
如对你学习有所帮助,希望可爱你动动小手,关注、点赞、收藏;


http://www.mrgr.cn/news/74832.html

相关文章:

  • 翼鸥教育:从OceanBase V3.1.4 到 V4.2.1,8套核心集群升级实践
  • Android 配置默认输入法
  • 关于指针p有关的3个值
  • 数学建模模型算法-Python实现
  • 访问网页的全过程(知识串联)
  • 论文阅读《BEVFormer v2》
  • PostgreSQL 查看重复索引
  • 第一课-Rust入门
  • 数据结构查找-哈希表(创建+查找+删除)+(C语言代码)
  • Tofu识别跟踪变焦镜头控制接口与协议
  • 云服务器安装mysql8.0(阿里云或者腾讯云都可以)
  • 比高考还严?该地软考报考减少了5420人,工作人员却增加100多人!
  • 如何使用Jupyter
  • 【机器学习chp2】贝叶斯最优分类器、概率密度函数的参数估计、朴素贝叶斯分类器、高斯判别分析。万字超详细分析总结与思考
  • 真的别跟风了!PMP认证原来只对这些人有用...
  • leveldb存储token的简单实现
  • 理解 C++ 中的 `const` 关键字
  • 域名绑定服务器小白教程
  • [刷题]入门1.矩阵转置
  • MATLAB和Python及R瑞利散射
  • 37邮件服务器
  • Sorvall Legend Micro 17 微量离心机产品特性
  • 开放式耳机怎么戴?不入耳的蓝牙耳机推荐
  • 背景移除,主体物抠图模型 RMBG-2.0:最佳一键去背景模型
  • 独孤思维:负债,入不敷出,要不要投资做副业
  • 宏景人力资源信息管理系统 uploadLogo 任意文件上传漏洞复现