首页 > 其他分享 >鸿蒙界面开发(12):选项卡布局(Tabs)

鸿蒙界面开发(12):选项卡布局(Tabs)

时间:2024-09-04 11:50:18浏览次数:11  
标签:... TabContent 12 选项卡 index Tabs currentIndex 导航

选项卡布局(Tabs)

当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换。

基本布局

Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏。
在这里插入图片描述
说明
TabContent组件不支持设置通用宽度属性,其宽度默认撑满Tabs父组件。

TabContent组件不支持设置通用高度属性,其高度由Tabs父组件高度与TabBar组件高度决定。

Tabs(){
 TabContent() {
   Text('首页的内容').fontSize(30)
 }
.tabBar('首页')
...
 TabContent() {
   Text('...').fontSize(30)
 }
.tabBar('...')
}
...

导航栏位置使用Tabs的barPosition参数进行设置。默认情况下,导航栏位于顶部,此时,barPosition为BarPosition.Start。设置为底部导航时,需要将barPosition设置为BarPosition.End。

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的内容:首页、发现、推荐、我的
  ...
}

实现侧边导航栏需要将Tabs的vertical属性设置为true,vertical默认值为false,表明内容页和导航栏垂直方向排列。

Tabs({ barPosition: BarPosition.Start }) {
  // TabContent的内容:首页、发现、推荐、我的
  ...
}
.vertical(true)
.barWidth(100)
.barHeight(200)

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

限制导航栏的滑动切换

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

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

Tabs({ barPosition: BarPosition.End }) {
  // 其他TabContent内容:发现、推荐、我的
  ...
}
.scrollable(false)

滑动动画animationDuration

.animationDuration():点击滑动的动画时间,不想要动画,可以设为0

导航栏

固定导航栏——BarMode.Fixed

当内容分类较为固定且不具有拓展性时,例如底部导航内容分类一般固定,分类数量一般在3-5个,此时使用固定导航栏。固定导航栏不可滚动,无法被拖拽滚动,内容均分tabBar的宽度。
Tabs的barMode属性用于控制导航栏是否可以滚动,默认值为BarMode.Fixed。

Tabs({ barPosition: BarPosition.End }) {
  // TabContent的内容:首页、发现、推荐、我的
  ...
}
.barMode(BarMode.Fixed)

滚动导航栏BarMode.Scrollable

滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置,内容分类较多,屏幕宽度无法容纳所有分类页签的情况下,需要使用可滚动的导航栏,支持用户点击和滑动来加载隐藏的页签内容。
滚动导航栏需要设置Tabs组件的barMode属性,BarMode.Scrollable表示可滚动导航栏。

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

自定义导航栏

对于底部导航栏,一般作为应用主页面功能区分,为了更好的用户体验,会组合文字以及对应语义图标表示页签内容,这种情况下,需要自定义导航页签的样式
设置自定义导航栏需要使用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() {。。。}
.tabBar(this.tabBuilder('我的', 0, $r('app.media.mine_selected'), $r('app.media.mine_normal')))

切换至指定页签

在不使用自定义导航栏时,默认的Tabs会实现切换逻辑。在使用了自定义导航栏后,默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑,页签切换逻辑需要自行实现。即用户滑动内容页和点击页签时,页签栏需要同步切换至内容页对应的页签
此时需要使用Tabs提供的onChange事件方法,监听索引index的变化,并将当前活跃的index值传递给currentIndex,实现页签的切换。

@Entry
@Component
struct TabsExample1 {
  @State currentIndex: number = 0
  @Builder tabBuilder(title: string, targetIndex: number) {
    Column() {
    //判断是否为当前内容页,改变页签的颜色
      Text(title) .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {...}.tabBar(this.tabBuilder('首页', 0))
        ...
      }.animationDuration(0).backgroundColor('#F1F3F5')
      //onChange事件,监听滑动和点击的时候,都会触发
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }.width('100%')
  }
}

在这里插入图片描述

2 除此之外,还可以将currentIndex传给Tabs的index参数,通过改变currentIndex来实现跳转至指定索引值对应的TabContent内容。
3 也可以使用TabsController,TabsController是Tabs组件的控制器,用于控制Tabs组件进行内容页切换。通过TabsController的changeIndex方法来实现跳转至指定索引值对应的TabContent内容。

@State currentIndex: number = 2
private controller: TabsController = new TabsController()

Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {...}.height(600)
.onChange((index: number) => {
   this.currentIndex = index
})

Button('动态修改index').width('50%').margin({ top: 20 })
  .onClick(()=>{
    this.currentIndex = (this.currentIndex + 1) % 4
})

Button('changeIndex').width('50%').margin({ top: 20 })
  .onClick(()=>{
    let index = (this.currentIndex + 1) % 4
    this.controller.changeIndex(index)
})

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

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

标签:...,TabContent,12,选项卡,index,Tabs,currentIndex,导航
From: https://blog.csdn.net/littleyy666/article/details/141645400

相关文章

  • 20240904_122638 mysql 填空题 dcl
    记录用户帐户密码的数据表,保存在哪个数据库中mysql记录用户帐户密码的数据表,叫什么名字user创建了一个名为pyhui的用户,该用户只能从本地机器连接到MySQL服务器,并且其密码是abccreateuser'pyhui'@'localhost'identifiedby'abc'删除名为pyhui的用户,该用户只能从localho......
  • AP2917远近光一切二双路输出降压恒流驱动IC 5-100V 12W 摩托车灯照明IC
    产品描述AP2917是一款可以一路灯串切换两路灯串的降压恒流驱动器,高效率、外围简单、内置功率管,适用于5-100V输入的高精度降压LED恒流驱动芯片。内置功率管输出最大功率可达12W,最大电流1.2A。AP2917一路灯亮切换两路灯亮,其中一路灯亮可以全亮,可以半亮。AP2917工......
  • 20240904_112638 mysql 填空题 事务
    开启事务starttransaction提交事务commit回滚事务rollback事务中创建一个名为c的存档点savepointc事务中回到名为m的存档点savepointm设置自动提交打开setautocommit=1设置自动提交关闭setautocommit=0......
  • 基于uniapp的畅玩旅游景点门票预订系统的设计与实现b3w12 微信小程序
    目录博主介绍技术栈系统设计......
  • 12款图纸加密软件大盘点:2024年最新推荐,哪款是你的最佳选择?
    图纸作为企业和设计师的核心资产,其安全性至关重要。选择合适的图纸加密软件,不仅能够有效防止数据泄露,还能确保商业机密不被侵犯。下面盘点一下2024年最新的12款图纸加密软件,看看哪款能成为你的最佳选择!1.安企神以其高效的加密功能和丰富的保护措施脱颖而出。它采用AES等......
  • 120.三角形最小路径和
    1.题目描述给定一个三角形 triangle ,找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。相邻的结点 在这里指的是 下标 与 上一层结点下标 相同或者等于 上一层结点下标+1 的两个结点。也就是说,如果正位于当前行的下标 i ,那么下一步可以移动到......
  • D12 kubernetes 中的资源对象
    1、kubernetes中的资源对象是什么,有什么作用 在Kubernetes中,资源对象是集群内的一个个实体,它们代表了集群的状态和行为。这些资源对象通过Kubernetes的API进行定义和管理,每种资源对象都有特定的作用和用途获取所有的资源kubectlapi-resourcesNAME......
  • 第120期 Youtube人脸数据集
    引言亲爱的读者们,您是否在寻找某个特定的数据集,用于研究或项目实践?欢迎您在评论区留言,或者通过公众号私信告诉我,您想要的数据集的类型主题。小编会竭尽全力为您寻找,并在找到后第一时间与您分享。背景在人工智能和计算机视觉领域,人脸识别技术一直是一个备受关注的研究热点。随着......
  • 攻破工程级复杂缓存难题--企业实战12
    缓存技术在现代分布式系统中至关重要,不仅提升了系统性能,还减轻了后端数据库的压力。然而,缓存系统也面临着诸多挑战,如缓存穿透、缓存雪崩、缓存击穿和热点key问题。通过多种策略的综合应用,包括本地缓存、双缓存方案、多级缓存、多副本、热点key拆分和动态分散等,可以有效应对这些......
  • 12、DB-修改-删除数据库表的字段-alter table
    一般有关操作表内容的用  altertable..... --修改表名ALTERTABLE旧表名RENAMEAS新表名ALTERTABLEteacherRENAMEASteacher1--增加表的字段ALTERTABLE表名ADD字段名列属性ALTERTABLEteacher1ADDageINT(11)--修改表的字段(重命名、修改......