HarmonyOS ArkUI容器类组件-Tabs组件（Tabs、TabContent）

最新推荐文章于 2024-05-31 10:56:26 发布
最新推荐文章于 2024-05-31 10:56:26 发布
阅读量422 收藏 4
点赞数 8
分类专栏： 鸿蒙开发 HarmonyOS 移动开发 文章标签： harmonyos openharmony AkrUI 移动开发 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71263309/article/details/138082241
版权
鸿蒙开发 同时被 3 个专栏收录
105 篇文章 0 订阅
订阅专栏
移动开发
105 篇文章 2 订阅
订阅专栏
HarmonyOS
11 篇文章 0 订阅
订阅专栏

ArkUI开发框架提供了一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图的容器组件 Tabs ，它允许包含子组件且子组件只能是 TabContent ，本节笔者介绍一下 Tabs 的简单使用。

Tabs定义介绍

interface TabsInterface {
  (value?: { barPosition?: BarPosition; index?: number; controller?: TabsController }): TabsAttribute;
}

declare enum BarPosition {
  Start,
  End,
}
  • barPosition：指定页签位置来创建 Tabs 容器组件， BarPosition 定义了以下两种类型：
    • Start（默认值）：当 vertical 属性方法设置为 true 时，页签位于容器左侧； vertical 属性方法设置为 false 时，页签位于容器顶部。
    • End： vertical 属性方法设置为 true 时，页签位于容器右侧； vertical 属性方法设置为 false 时，页签位于容器底部。
  • index：指定初次初始页签索引，默认值为 0 。
  • controller：设置 Tabs 控制器。

简单样例如下所示：

@Entry @Component struct SideBarContainerTest {

  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Tabs({// Tabs不设置vertical属性时，默认上下排版
        barPosition: BarPosition.Start,
        controller: this.controller
      }) {
        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#aabbcc")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("消息")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#bbccaa")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("联系人")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#ccaabb")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("动态")
      }
      .size({width: "100%", height: "100%"})
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

样例运行结果如下图所示：

Tabs属性介绍

declare class TabsAttribute extends CommonMethod<TabsAttribute> {
  vertical(value: boolean): TabsAttribute;
  scrollable(value: boolean): TabsAttribute;
  barMode(value: BarMode): TabsAttribute;
  barWidth(value: Length): TabsAttribute;
  barHeight(value: Length): TabsAttribute;
  animationDuration(value: number): TabsAttribute;
}

  • vertical：设置 Tab 是否为左右排列，默认为 false ，表示上下排列。

  • vertical设置为false：

  • barPosition: BarPosition.Start

            Tabs({
              barPosition: BarPosition.Start, // 设置Tab在上方
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("联系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("动态")
            }
            .vertical(false)

样例运行结果如下图所示：

  • barPosition: BarPosition.End
            Tabs({
              barPosition: BarPosition.End, // 设置Tab在下方
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("联系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("动态")
            }
            .vertical(false)

样例运行结果如下图所示：

  • vertical设置为true：
  • barPosition: BarPosition.Start

简单样例如下所示：

            Tabs({
              barPosition: BarPosition.Start, // 设置Tab在左侧
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("联系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("动态")
            }
            .width('100%')
            .height('100%')
            .barWidth(80)
            .barHeight(150)
            .vertical(true)

  • barPosition: BarPosition.End
            Tabs({
              barPosition: BarPosition.End, // 设置Tab在右侧
              controller: this.controller
            }) {
              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#aabbcc")
              }
              .tabBar("消息")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#bbccaa")
              }
              .tabBar("联系人")

              TabContent() {
                Column()
                  .width('100%')
                  .height('100%')
                  .backgroundColor("#ccaabb")
              }
              .tabBar("动态")
            }
            .width('100%')
            .height('100%')
            .barWidth(80)
            .barHeight(150)
            .vertical(true)

  • scrollable：是否可以通过滑动进行页面切换，默认为 true ，表示可以滑动切换页面。
  • barMode：设置 TabBar 的布局模式， TabBar 的类型说明如下：
    • Scrollable： TabBar 使用实际布局宽度, 超过总长度后可滑动。
    • Fixed：所有 TabBar 平均分配宽度。
  • barWidth：设置 TabBar 的宽度值，不设置时使用系统主题中的默认值。
  • barHeight：设置 TabBar 的高度值，不设置时使用系统主题中的默认值。
  • animationDuration：设置 TabContent 滑动动画时长，默认值为 200 。

Tabs事件介绍

declare class TabsAttribute extends CommonMethod<TabsAttribute> {
  onChange(event: (index: number) => void): TabsAttribute;
}
  • onChange： Tabs 页签切换后触发的事件， index 表示当前页签下标。

TabContent定义介绍

interface TabContentInterface {
  (): TabContentAttribute;
}

由源码可知， TabContent 目前不需要配置默认参数。

TabContent属性介绍

declare class TabContentAttribute extends CommonMethod<TabContentAttribute> {
  tabBar(value: string | Resource | CustomBuilder |
    { icon?: string | Resource; text?: string | Resource }): TabContentAttribute;
}
  • tabBar：设置 TabBar 的显示标签，根据源码可知，tabBar参数类型支持多种数据类型：
    • string | Resource：直接使用文本，样式使用系统自带的。
    • { icon?: string | Resource; text?: string | Resource }：
      • icon：设置标签的图标。
      • text：设置标签的文本。
    • CustomBuilder：自定义 TabBar 标签

Tabs完整样例

@Entry @Component struct TabsTest {

  private controller: TabsController = new TabsController();

  @State index: number = 0; // 选项卡下标，默认为第一个

  @Builder tabMessage() {   // 自定义消息标签
    Column() {
      Column() {
        Blank()
        Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
          .size({width: 25, height: 25})
        Text('消息')
          .fontSize(16)
          .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
        Blank()
      }
      .height('100%')
      .width("100%")
      .onClick(() => {
        this.index = 0;
        this.controller.changeIndex(this.index);
      })
    }
  }

  @Builder tabContract() {  // 自定义联系人标签
    Column() {
      Blank()
      Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
        .size({width: 25, height: 25})
      Text('联系人')
        .fontSize(16)
        .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
      Blank()
    }
    .height('100%')
    .width("100%")
    .onClick(() => {
      this.index = 1;
      this.controller.changeIndex(this.index);
    })
  }

  @Builder tabDynamic() {   // 自定义动态标签
    Column() {
      Blank()
      Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
        .size({width: 25, height: 25})
      Text('动态')
        .fontSize(16)
        .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
      Blank()
    }
    .height('100%')
    .width("100%")
    .onClick(() => {
      this.index = 2;
      this.controller.changeIndex(this.index);
    })
  }

  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End, // TabBar排列在下方
        controller: this.controller   // 绑定控制器
      }) {
        TabContent() {
          Column() {
            Text('消息')
              .fontSize(30)
          }
          .width('100%')
          .height('100%')
          .backgroundColor("#aabbcc")
        }
        .tabBar(this.tabMessage)      // 使用自定义TabBar

        TabContent() {
          Column() {
            Text('联系人')
              .fontSize(30)
          }
          .width('100%')
          .height('100%')
          .backgroundColor("#bbccaa")
        }
        .tabBar(this.tabContract)     // 使用自定义TabBar

        TabContent() {
          Column() {
            Text('动态')
              .fontSize(30)
          }
          .width('100%')
          .height('100%')
          .backgroundColor("#ccaabb")
        }
        .tabBar(this.tabDynamic)      // 使用自定义TabBar
      }
      .width('100%')
      .height('100%')
      .barHeight(60)
      .barMode(BarMode.Fixed)         // TabBar均分
      .onChange((index: number) => {  // 页面切换回调
        this.index = index;
      })
    }
    .width('100%')
    .height('100%')
  }
}

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：https://qr21.cn/FV7h05

如何快速入门：

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr21.cn/FV7h05

大厂鸿蒙面试题：：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

小米椒……
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
docsify,docsify-tabs 展示插件
09-21
docsify,docsify-tabs
vue2.* element tabs tab-pane 动态加载组件操作
01-21
1、 注意 <component is=item.content></component> ：表明模板 <el v-for=(item) key=item.name label=item.title name=item.name > <component is=item.content> 2、content: ‘Jbxx’ ，其中 jbxx 是 模板...
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看头条tab栏） 点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示刚才被点击的tab栏高亮显示。（如果tab栏横向有滚动条，那也得让被选中的高亮显示）。 所以，大部分人的解决办法就是将当前选中的tab的索引缓存起来，等回到该页面的时候，让被缓存的那个高亮显示出来。 坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
HarmonyOS应用开发03-基础组件-让我们来码出复杂酷炫的UI
JerryAlexLiang的博客
11-08 388
想要实现一个列表，在前面是使用 ForEach 循环 StudentListItem.est 构建的，不会由滑动效果，数据源增加时，会发现现在这个“列表”显示不全，而且也是无法滑动的。对于数据源数量较多、需要分页加载的列表，我们使用 List去实现。接下来学习使用HarmonyOS-ArkTS语言开发方式中的基本组件，这样我们就可以使用基本组件去实现较为复杂丰富的UI。子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。
【愚公系列】2023年12月 HarmonyOS教学课程 026-ArkUI组件（Tabs）
热门推荐
时光隧道
12-12 2万+
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。Column() {Column(){Text('我的内容')
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
shudaoshanQAQ的博客
01-06 2603
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合，以提高页面的可维护性和可用性。
HarmonyOS 鸿蒙学习笔记1-DevEco Studio、ArtTS、ArkUI
m0_66174481的博客
03-30 1200
类型必须被指定，且和双向绑定状态变量的类型相同。HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，例如基于图形化的自由拖拽、数据的参数化配置等，遵循[HarmonyOS JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791)，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。
用HarmonyOS ArkUI来开发一个购物应用程序
老卫的技术站
11-13 4234
用HarmonyOS ArkUI来开发一个购物应用程序
鸿蒙Harmony常用容器组件介绍
wodongx123的博客
01-21 1262
本文不介绍Text，Image这种单独的视图控件，主要还是过一下在构成一个复杂页面时所需要的外层的容器组件。免得在实际开发的时候要构建外层组件时不知道要用什么比较好本文虽然也会贴一些测试代码，但是参考还是以鸿蒙的API参考为主，最好在上手这些视图的同时，学习如何看API参考：打开DevEco Studio -> View（视图） -> Tool Windows（工具窗口） -> API reference（API参考） -> ArkTs组件 -> 容器组件。
鸿蒙(HarmonyOS)应用开发——容器组件（Tabs组件）
weixin_46282323的博客
12-03 1508
Tabs是一种可以通过页签进行内容视图切换的容器组件，每一个页签对应一个内容视图。Tabs组件必须配合子组件TabContent一起使用设置Tabs的页签位置index设置初始化页签位置controller设置Tabs 控制器，用于控制Tabs组件进行页签切换tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数@Entry@ComponentColumn() {})build() {
在鸿蒙中身份校验的手势密码的实现
最新发布
Asia52的博客
05-31 251
在harmony中它提供了默认的组件PatternLock()；.onPatternComplete：密码输入结束时触发该回调。.onDotConnect密码输入选中宫格圆点时触发该回调。这个就能直接显示九宫格密码验证。并且他有两个主要的回调事件。
【HarmonyOS】View点击穿透，层叠View点击事件控制
我的小窝
05-28 523
harmonyos 层叠view 点击事件处理
鸿蒙OS开发：【一次开发，多端部署】（分栏控件）
m0_70748845的博客
05-21 637
本示例分别展示了多场景下，一多分栏控件的响应式变化效果。A+B+C：即SideBarContainer组件组合Navigation组件A+C：SideBarContainer组件B+C：Navigation组件。
【错误记录】HarmonyOS 运行报错 ( Failure INSTALL_PARSE_FAILED_USESDK_ERROR )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-28 1140
Failure[INSTALL_PARSE_FAILED_USESDK_ERROR] compileSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the device.
鸿蒙ArkTS声明式开发：跨平台支持列表【组件快捷键事件】
m0_62167422的博客
05-28 1189
开发者可以设置组件的自定义组合键，组合键的行为与click行为一致，组件在未获得焦点状态下也可以响应自定义组合键，每个组件可以设置多个组合键。
HarmonyOS interface router scale pageTransition SlideEffect.Left ArkTS ArkUI
ooo
05-23 640
HarmonyOS interface router scale pageTransition SlideEffect.Left ArkTS ArkUI
鸿蒙应用Stage模型【应用/组件级配置】
m0_70748845的博客
05-30 814
在开发应用时，需要配置应用的一些标签，例如应用的包名、图标等标识特征的属性。本文描述了在开发应用需要配置的一些关键标签。
van-tabs自定义样式
07-28
要自定义VanTabs组件的样式，你可以使用CSS样式来覆盖默认样式。以下是一个示例： ```css /* 自定义VanTabs的外部容器样式 */ .van-tabs { background-color: #f0f0f0; } /* 自定义VanTabs选项卡的样式 */ .van-tab { color: #333; font-size: 16px; } /* 自定义VanTabs选项卡激活状态的样式 */ .van-tab--active { color: #ff0000; font-weight: bold; } /* 自定义VanTabs内容区域的样式 */ .van-tabs__content { padding: 20px; background-color: #ffffff; } ``` 你可以将上述样式添加到你的CSS文件中，并根据需要进行调整。确保在HTML文档中引入该CSS文件，以便样式能够生效。 如果你想更改VanTabs组件的其他样式，请参考VanTabs的文档或检查组件的源代码以了解可用的CSS类和属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值