鸿蒙ArkUI开发-Tabs组件的使用

最新推荐文章于 2024-09-26 17:16:10 发布

移不动开发技术

最新推荐文章于 2024-09-26 17:16:10 发布

阅读量2.9k

点赞数 18

分类专栏：鸿蒙开发文章标签： harmonyos 华为鸿蒙系统程序员 openharmony 鸿蒙4.0 鸿蒙next

本文链接：https://blog.csdn.net/m0_62167422/article/details/135699947

版权

本文详细介绍了如何在ArkUI开发框架中使用Tabs组件实现内容视图切换，包括TabContent的使用、布局模式设置、TabBar位置与方向以及自定义TabBar样式。

摘要由CSDN通过智能技术生成

在我们常用的应用中，经常会有视图内容切换的场景，来展示更加丰富的内容。比如下面这个页面，点击底部的页签的选项，可以实现“首页”和“我的” 两个内容视图的切换。

ArkUI开发框架提供了一种页签容器组件Tabs，开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样，不同的页面设计页签不一样，可以把页签设置在底部、顶部或者侧边。

本文将详细介绍Tabs组件的使用。

Tabs组件的简单使用

Tabs组件仅可包含子组件TabContent，每一个页签对应一个内容视图即TabContent组件。下面的示例代码构建了一个简单的页签页面：

@Entry
@Component
struct TabsExample {
 private controller: TabsController = new TabsController()
 
 build() {
 Column() {
 Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green)
        }
        .tabBar('green')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue)
        }
        .tabBar('blue')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)
        }
        .tabBar('yellow')
 
 TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink)
        }
        .tabBar('pink')
      }
      .barWidth('100%') // 设置TabBar宽度
      .barHeight(60) // 设置TabBar高度
      .width('100%') // 设置Tabs组件宽度
      .