鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TabContent容器组件

最新推荐文章于 2024-09-29 22:06:05 发布
最新推荐文章于 2024-09-29 22:06:05 发布
阅读量1.6k 收藏 30
点赞数 21
文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zy0412326/article/details/136697353
版权
本文介绍了鸿蒙操作系统HarmonyOS中的方舟框架ArkUI组件——TabContent，详细讲解了其在Tabs中的使用、子组件、接口、属性，以及SubTabBarStyle和BottomTabBarStyle的构造函数。示例部分包含代码和图例，展示了如何在实际开发中应用这些组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之TabContent容器组件

一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+

二、TabContent容器组件

仅在Tabs中使用，对应一个切换页签的内容视图。

子组件

支持单个子组件。

接口

TabContent()

属性

除支持通用属性外，还支持以下属性：

名称

参数类型

描述

tabBar

string | Resource | {

icon?: string | Resource,

text?: string |Resource

}

| 
最低0.47元/天 解锁文章
鸿蒙ArkTS容器组件：【TabContent】
2401_82772199的博客
07-15 1784
仅在Tabs中使用，对应一个切换页签的内容视图。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙APP实战案例分析——TabContent内容可以在tabBar上显示并响应滑动事件案例
最新发布
adaedwa187545的博客
02-21 658
本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：TabContent）
m0_64420071的博客
03-16 1799
ArkTS声明式开发（容器组件：TabContent）
鸿蒙HarmonyOS开发：tabs结合tabContent实现底部tabBar导航栏布局
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-20 1万+
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。
OpenHarmony实战开发-如何实现tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。
m0_70749039的博客
04-19 1592
本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。
鸿蒙5.0版开发：ArkTS容器组件（TabContent）
m0_69424697的博客
09-29 1524
仅在Tabs中使用，对应一个切换页签的内容视图。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件
zy0412326的专栏
03-05 1559
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Scroll容器组件。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Swiper容器组件
adendean的博客
01-27 1602
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Swiper容器组件。
HarmonyOS ArkUI容器类组件-格栅布局容器（GridContainer）
m0_71263309的博客
04-22 542
ArkUI开发框架提供了纵向排布栅格布局容器 `GridContainer` ，它仅在栅格布局场景中使用。
HarmonyOS ArkUI容器类组件-Tabs组件（Tabs、TabContent）
m0_70748458的博客
05-30 1643
(value?index?: number;controller?Start,End,：指定页签位置来创建Tabs容器组件，定义了以下两种类型：Start（默认值）：当vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。Endvertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。index：指定初次初始页签索引，默认值为0。controller：设置。
【带你轻松学】ArkUI容器类组件-Tabs组件（Tabs、TabContent）
2401_87677001的博客
09-26 683
(value?index?: number;controller?Start,End,：指定页签位置来创建Tabs容器组件，定义了以下两种类型：Start（默认值）：当vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。Endvertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。index：指定初次初始页签索引，默认值为0。controller：设置。
鸿蒙HarmonyOS实战-ArkUI组件（Tabs）_harmonyos tabs
2401_84164503的博客
04-12 744
在某些需要进行多级分类的页面上，如同时存在底部导航栏和顶部导航栏时，因为默认情况下导航栏都支持滑动切换，所以当底部导航栏的滑动效果与顶部导航栏出现冲突时，需要限制底部导航栏的滑动，以避免给用户带来不好的体验。滚动导航栏需要设置Tabs组件的barMode属性，默认情况下其值为Fixed，表示为固定导航栏，设置为Scrollable即可设置为可滚动导航栏。Tabs的属性barMode是控制导航栏是否可以滚动，默认值为Fixed。实现侧边导航栏需要设置Tabs的属性vertical为true。
鸿蒙系统（HarmonyOS）之方舟框架（ArkUI）介绍
zy0412326的专栏
12-16 933
方舟开发框架（简称：ArkUI），是一套构建HarmonyOS应用界面的UI开发框架，它提供了极简的UI语法与包括UI组件、动画机制、事件交互等在内的UI开发基础设施，以满足应用开发者的可视化界面开发需求。
【HarmonyOS】【ARKUI】鸿蒙 ets方式tabs+tabcontent 实现底部导航栏
华为开发者联盟
07-15 2212
鸿蒙 ets方式tabs+tabcontent 实现底部导航栏
鸿蒙listitem和tabcontent+页面传参
weixin_53386534的博客
05-24 650
写Second.ets。写Index.ets。如何运行：右上角眼睛。
HarmonyOS：如何实现自定义的Tabs,TabContent内部实现如何动态配置
luxingxing1的博客
08-02 2166
Tabs自定义了，并且动态配置TabContent里面的内容，不是写死一样的，这个问题困扰了很长时间，试过**@BuilderParam**（类似于vue的插槽）传组件方式的，但是**@BuilderParam**只能传一个，我想要传递的是一个数组，找了很多Api最后找到了**WrappedBuilder[]**这种方式。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之MenuItemGroup组件
adendean的博客
02-04 655
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之MenuItemGroup组件。
鸿蒙App开发-网络请求-下拉刷新三方库-底部Tab栏-滚动组件(含源码）
liuhaikang的博客
01-15 1346
App底部是一个TabBar，点击TabBar可以切换上面的页面。共包含两个页面，一个是“首页” ,另一个是“空白页”。
鸿蒙开发系列教程（十四）--组件导航：Tabs 导航
huazi99于老师的博客
02-06 2315
Column() {调用：}.tabBar(this.TabBuilder(‘首页’,0))}.tabBar(this.TabBuilder(‘发现’,1))}.tabBar(this.TabBuilder(‘推荐’,2)).tabBar(this.TabBuilder(‘我的’,3))在不使用自定义导航栏时，系统默认的Tabs会实现切换逻辑。在使用了自定义导航栏后，切换页签的逻辑需要手动实现。即用户点击对应页签时，屏幕需要显示相应的内容页。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI），实现功能：点击下拉框显示当前日期并选择，将结果输出到下拉框里面
11-08
鸿蒙系统（HarmonyOS）的方舟框架（ArkUI）提供了一套高度定制化的用户界面工具，它简化了开发者构建跨设备的应用体验。对于点击下拉框动态显示当前日期并允许用户选择的功能，你可以通过以下步骤实现： 1. 首先，在UI设计上，你需要在方舟组件库中找到下拉框控件（如`CascadingPicker`或`ComboBox`）。创建一个新的交互事件监听器，比如当用户点击下拉框时。 2. 在事件处理函数中，获取当前的时间或日期信息。你可以使用`HuamiCalendar`或者其他内置的日期时间API来获取当前日期。 3. 将获取到的日期数据填充到下拉框的选项列表中。这通常涉及到设置下拉框的数据源，可能是数组形式，每个元素包含日期文本和对应的值。 4. 用户选择日期后，响应下拉框的选择改变事件，更新下拉框显示的选中项。 示例代码片段（伪代码）： ```java // 获取当前日期 Date currentDate = Calendar.getInstance().getTime(); String dateText = currentDate.toString(); // 格式化日期 // 设置下拉框数据源 List<String> options = new ArrayList<>(); options.add(dateText); // 添加当前日期作为第一个选项 // ...其他日期选项... // 下拉框组件设置 CascadingPicker picker = findViewById(R.id.dropdown); picker.setDataSource(options); // 点击事件处理器 picker.setOnItemClickListener(item -> { String selectedDate = item.getText(); // 获取用户选择的日期 // 更新显示或处理选择结果 }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亚丁号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值