鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs

最新推荐文章于 2024-05-20 15:06:11 发布
最新推荐文章于 2024-05-20 15:06:11 发布
阅读量445 收藏 6
点赞数 4
分类专栏： 2024年程序员学习 文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84164503/article/details/137691345
版权
  1. 激活状态：当前选中的标签会呈现激活状态，以便用户清楚地知道他们当前所在的选项卡。
  2. 自定义选项卡内容：用户可以通过自定义选项卡内容（例如图片、文本、图标等）来增强页面的可读性和可用性。
  3. 加载延迟：如果页面需要加载大量数据或内容，Tabs组件可以通过延迟加载未激活的面板来提升页面性能。

1.基本布局

在这里插入图片描述
Tabs使用花括号包裹TabContent，每一个TabContent对应一个tabBar

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

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

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

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述

2.导航位置

🦋2.1 底部导航

BarPosition.End设置底部导航

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

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

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述

🦋2.2 顶部导航

BarPosition.Start设置顶部导航

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start  }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

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

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述

🦋2.3 侧边导航

实现侧边导航栏需要设置Tabs的属性vertical为true

  • vertical为false时，tabbar宽度会默认撑满屏幕的宽度，需要设置barWidth为合适值。
  • vertical为true时，tabbar的高度会默认实际内容高度，需要设置barHeight为合适值。
@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start  }) {
        TabContent() {
          Text('首页的内容').fontSize(30)
        }
        .tabBar('首页')

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

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }.vertical(true)
      .barWidth(100)
      .barHeight(200)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述

3.导航效果

🦋3.1 限制导航栏的滑动切换

在某些需要进行多级分类的页面上，如同时存在底部导航栏和顶部导航栏时，因为默认情况下导航栏都支持滑动切换，所以当底部导航栏的滑动效果与顶部导航栏出现冲突时，需要限制底部导航栏的滑动，以避免给用户带来不好的体验。

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent(){
          Column(){

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

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

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

              TabContent() {
                Text('我的内容').fontSize(30)
              }
              .tabBar("我的")
            }.vertical(true)
            .barWidth(100)
            .barHeight(200)
          }
          .backgroundColor('#ff08a8f1')
          .width('100%')
        }
        .tabBar('首页')
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
      .scrollable(false)

    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述

🦋3.2 固定导航栏

Tabs的属性barMode是控制导航栏是否可以滚动，默认值为Fixed

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent(){
          Column(){

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

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

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

              TabContent() {
                Text('我的内容').fontSize(30)
              }
              .tabBar("我的")
            }.vertical(true)
            .barWidth(100)
            .barHeight(200)
          }
          .backgroundColor('#ff08a8f1')
          .width('100%')
        }
        .tabBar('首页')
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

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

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
      .scrollable(false)
      .barMode(BarMode.Fixed)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F3F5')
  }
}

在这里插入图片描述

🦋3.3 滚动导航栏

滚动导航栏需要设置Tabs组件的barMode属性，默认情况下其值为Fixed，表示为固定导航栏，设置为Scrollable即可设置为可滚动导航栏

@Entry
@Component
struct NavigationExample {
  private arr: number[] = [1, 2, 3];

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent(){
          Column(){

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

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

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

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

            }.vertical(true)
            .barWidth(100)
            .barHeight(200)
          }
          .backgroundColor('#ff08a8f1')
          .width('100%')
        }
        .tabBar('首页')
        TabContent() {
          Text('推荐的内容').fontSize(30)
        }
        .tabBar('推荐')

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

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

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

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

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

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

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

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

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

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

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

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

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



**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

**因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
![img](https://img-blog.csdnimg.cn/img_convert/e10a1006611d20bfcdcf34c6a81c615b.png)
![img](https://img-blog.csdnimg.cn/img_convert/a1b86f7de0e8a245239a164f0cb100d6.png)
![img](https://img-blog.csdnimg.cn/img_convert/c70818d3ca1e55fc7dfbb8dfa8e1e1db.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）**
![img](https://img-blog.csdnimg.cn/img_convert/1bf3e16ff2de383708211d4390e54c5a.png)

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**
[外链图片转存中...(img-iDu6qx7g-1712919093676)]
[外链图片转存中...(img-102H6nuB-1712919093676)]
[外链图片转存中...(img-UagDExb7-1712919093676)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！**

**由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新**

**如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）**
[外链图片转存中...(img-MtrjCxqc-1712919093677)]

**一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84164503
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鸿蒙HarmonyOS应用开发者认证 题库+答案案
01-18
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案，涵盖了HarmonyOS应用开发的多个方面，包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
2024年HarmonyOS鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs(6)，2024年最新HarmonyOS鸿蒙自学资料
2401_84862118的博客
05-09 216
自定义导航栏是指在应用开发中，开发者使用自己定制的视图代替系统自带的导航栏，以实现更加自由、灵活和符合应用风格的导航栏。自定义导航栏可以包括各种 UI 元素，例如按钮、文本、图片、标签等，以满足不同应用的需求。自定义导航栏可以帮助应用创建独特的风格和品牌形象，提高用户体验和应用的可用性。Column() {Column(){Text(‘我的内容’)
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）
shudaoshanQAQ的博客
01-06 3209
Tabs组件是一种常见的用户界面（UI）组件，它是一个可以容纳多个选项卡的容器组件。每个选项卡通常包含一个面板和一个标签，用户可以通过点击标签来切换面板。Tabs组件通常用于展示多个相关但又不需要同时展示的数据集合或功能集合，以提高页面的可维护性和可用性。
鸿蒙HarmonyOS开发：tabs结合tabContent实现底部tabBar导航栏页面布局
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-20 2366
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。
零基础开始学习鸿蒙开发-Tab导航栏的学习
qq_36973384的博客
11-30 646
Entry@Componentbuild(){Text('这是首页内容').fontSize(18)}.tabBar('首页');Text('这是个人中心内容').fontSize(18)}.tabBar('个人中心');Text('这是设置内容').fontSize(18)}.tabBar('设置');
HarmonyOS应用开发者基础认证
CXIBNN的博客
11-30 3406
HarmonyOS应用开发者基础认证及答案
HarmonyOS 鸿蒙应用开发( 五、快速实现ArkUI页面底部导航Tabs)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-25 3609
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。图9自定义导航栏图系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。
【鸿蒙应用ArkTS开发系列】- 父组件直接调用子组件方法
枫的专栏
10-16 3386
子组件控制器提供了一个attach方法，通过该方法将其与组件进行绑定（实际上就是持有组件实例），通过上面代码我们知道，在子组件ChildComponent的aboutToAppear函数中，我们进行了attach的调用，那子组件需要一个控制器实例，这个控制器实例从哪里获取呢，其实就是父组件引用子组件的时候设置的。子组件除了attach方法外，我们还看到了一个getName方法，这个方法只是一个代理方法，具体实现是在子组件中完成。今天这篇文档，讲的是鸿蒙应用开发中会遇到的一种常见场景，
HarmonyOS应用开发者基础认证考试题目及答案
11-19
HarmonyOS 应用开发者基础认证考试涵盖了HarmonyOS应用开发的核心知识，包括数据存储、组件使用、生命周期管理、网络请求以及界面布局等多个方面。以下是这些知识点的详细解释： 1. **首选项Preferences**：...
HarmonyOS应用开发者基础认证 word试题及答案
12-21
二、 HarmonyOS 组件 * Video 组件可以支持本地视频路径和网络路径播放。播放网络视频时，需要申请权限ohos.permission.INTERNET。 * Ability 是系统调度应用的最小单元，是能够完成一个独立功能的组件。一个应用...
HarmonyOS应用开发者基础题库
12-29
【HarmonyOS应用开发者基础题库】主要涵盖了鸿蒙系统应用开发的基础知识，涉及DevEco Studio集成开发环境、 ArkTS编程语言、应用程序框架以及页面布局设计等方面。 1. **DevEco Studio**：它是华为提供的开发...
HarmonyOS应用开发者基础认证考试题目及答案.pdf
11-19
HarmonyOS应用开发者基础认证考试涵盖了HarmonyOS应用开发的基础知识，包括数据存储、组件使用、生命周期管理、网络请求、权限申请、布局设计以及系统组件的理解等。以下是对这些知识点的详细解析： 1. **数据存储*...
2024年HarmonyOS鸿蒙最全软考高级之信息系统案例分析七重奏-《3》(1)，腾讯面试gm
2401_84853495的博客
05-08 193
5、配置审计；6、发布管理和交付。
【鸿蒙应用ArkTS开发系列】- 导航栏Tab组件使用讲解
枫的专栏
05-06 7448
Tabs是一个通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图，它仅可包含子组件TabContent，同时搭配 TabsController使用。TabsController 是Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。具体可查看官网介绍，这里就不多描述。//文本 icon_normal : Resource;// 默认图标 icon_selected : Resource;// 选中图标 }
【HarmonyOS】【ARKUI】鸿蒙 ets方式tabs+tabcontent 实现底部导航栏
华为开发者联盟
07-15 1965
鸿蒙 ets方式tabs+tabcontent 实现底部导航栏
HarmonyOS使用Tabs组件实现页面切换
2301_81624474的博客
12-12 2160
TabBar的默认显示效果如下所示：往往开发过程中，UX给我们的设计效果可能并不是这样的，比如下面的这种底部页签效果：TabContent的tabBar属性除了支持string类型，还支持使用@Builder装饰器修饰的函数。@Entry@ComponentColumn() {})build() {.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))
【鸿蒙 HarmonyOS】常用组件：List/Grid/Tabs
weixin_71403100的博客
03-08 2916
列表页面：List组件和Grid组件。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TabContent容器组件
zy0412326的专栏
03-14 1330
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TabContent容器组件。
Invalid hook call. Hooks can only be called inside of the body of a function component.
09-21
Invalid hook call. Hooks can only be called inside of the body of a function component 是一个 React 错误信息。它表示你在一个非函数组件的地方调用了 React 的钩子函数。React 的钩子函数只能在函数组件的内部使用。 解决这个问题的方法是将你的组件改为一个函数组件，而不是类组件。你需要将你的组件的代码从类组件的形式改为函数组件的形式，并将钩子函数的调用放在函数组件的主体内部。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值