鸿蒙5.0版开发：ArkTS组件-AtomicServiceTabs

往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）

• 鸿蒙开发焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

AtomicServiceTabs

AtomicServiceTabs高级组件，对Tabs组件一些不需提供给用户自定义设计的属性进行简化，限制最多体现5个页签，固定页签样式，位置和巨细。
   说明：
  该组件从API Version 12开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  导入模块

1. import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';

复制代码

子组件

无
属性

不支持通用属性
AtomicServiceTabs

1. AtomicServiceTabs ({
2.    tabContents?: [ TabContentBuilder?,
3.                     TabContentBuilder?,
4.                   TabContentBuilder?,
5.                   TabContentBuilder?,
6.                   TabContentBuilder?
7.                 ],
8.    tabBarOptionsArray: [ TabBarOptions,
9.                         TabBarOptions,
10.                         TabBarOptions?,
11.                         TabBarOptions?,
12.                         TabBarOptions?
13.                       ],
14.    tabBarPosition?: TabBarPosition,
15.    barBackgroundColor?: ResourceColor,
16.    index?: number,
17.    barOverlap?: boolean,
18.    controller?: TabsController,
19.    onChange?: Callback<number>,
20.    onTabBarClick?: Callback<number>,
21.    onContentWillChange?: OnContentWillChangeCallback,
22. })

复制代码

装饰器范例：@Component
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
名称范例必填装饰器范例说明tabContents[TabContentBuilder?,TabContentBuilder?, TabContentBuilder?,TabContentBuilder?, TabContentBuilder?]否@BuilderParam内容视图容器数组。tabBarOptionsArray[TabBarOptions?,TabBarOptions?, TabBarOptions?,TabBarOptions?, TabBarOptions?]是@Prop页签容器数组。tabBarPositionTabBarPosition否@Prop设置页签栏位置。barBackgroundColorResourceColor否@Prop设置TabBar的背景颜色。indexnumber否@Prop设置当前体现页签的索引。barOverlapboolean否@Prop设置TabBar是否背后变模糊并叠加在TabContent之上。controllerTabsController否@PropTabs组件的控制器，用于控制Tabs组件进行页签切换。onChangeCallback<number>否-Tabs页签切换后触发的事件。onTabBarClickCallback<number>否-Tabs页签点击后触发的事件。onContentWillChangeOnContentWillChangeCallback否-Tabs页面切换拦截事件本领，新页面即将体现时触发该回调。 TabContentBuilder

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
范例说明() => void内容视图容器 TabBarOptions

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明iconResourceStr | TabBarSymbol是页签内的图片内容textResourceStr是页签内的笔墨内容。unselectedColorResourceColor是未选择时的页签颜色。selectedColorResourceColor是被选择时的页签颜色。 TabBarPosition

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
名称值说明LEFT0设置TabBar位于屏幕左侧BOTTOM1设置TabBar位于屏幕底部 OnContentWillChangeCallback

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
名称范例必填说明currentIndexnumber是当前页签索引。comingIndexnumber是即将切换的页签索引。 示例

1. // Index.etsimport { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
2. @Entry@Componentstruct Index {  @State message: string = '首页';  @State onClickNumber: number = 0;  @State currentIndex: number = 0;  @State comingIndex: number = 0;  onContentWillChangeCallBack:  OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => {    this.currentIndex = currentIndex;    this.comingIndex = comingIndex;    console.log('OnContentWillChangeCallback')     return true;  }  onTabClick: Callback<number> = (index:number)=>{    this.onClickNumber ++;    console.log('onTabClick');  }  @Builder  tabContent1() {    Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')  }  @Builder  tabContent2() {    Column().width('100%').height('100%').backgroundColor('#007DFF')  }  @Builder  tabContent3() {    Column().width('100%').height('100%').backgroundColor('#FFBF00')  }  build() {    Stack() {    AtomicServiceTabs({      tabContents: [        () => {          this.tabContent1()        },        () => {          this.tabContent2()        },        () => {          this.tabContent3()        }      ],      tabBarOptionsArray: [        new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '绿色', Color.Black, Color.Blue),        new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue),        new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', Color.Black, Color.Blue)      ],      tabBarPosition: TabBarPosition.BOTTOM,      barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),      onTabBarClick:this.onTabClick,      onContentWillChange: this.onContentWillChangeCallBack,    })    Column() {      Text("onchange回调次数:" + this.onClickNumber)      Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex)    }.margin({top:500})    }.height('100%')  }}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。