鸿蒙5.0版开发：ArkTS组件-AtomicServiceTabs
往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）[*] 鸿蒙开发焦点知识点，看这篇文章就够了
[*] 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
[*] 鸿蒙HarmonyOS NEXT开发技术最全学习门路指南
[*] 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
AtomicServiceTabs
AtomicServiceTabs高级组件，对Tabs组件一些不需提供给用户自定义设计的属性进行简化，限制最多体现5个页签，固定页签样式，位置和巨细。
说明：
该组件从API Version 12开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
导入模块
import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
子组件
无
属性
不支持通用属性
AtomicServiceTabs
AtomicServiceTabs ({
tabContents?: [ TabContentBuilder?,
TabContentBuilder?,
TabContentBuilder?,
TabContentBuilder?,
TabContentBuilder?
],
tabBarOptionsArray: [ TabBarOptions,
TabBarOptions,
TabBarOptions?,
TabBarOptions?,
TabBarOptions?
],
tabBarPosition?: TabBarPosition,
barBackgroundColor?: ResourceColor,
index?: number,
barOverlap?: boolean,
controller?: TabsController,
onChange?: Callback<number>,
onTabBarClick?: Callback<number>,
onContentWillChange?: OnContentWillChangeCallback,
})
装饰器范例：@Component
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
名称范例必填装饰器范例说明tabContents否@BuilderParam内容视图容器数组。tabBarOptionsArray是@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是即将切换的页签索引。 示例
// Index.etsimport { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';
@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');}@BuildertabContent1() { Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87')}@BuildertabContent2() { Column().width('100%').height('100%').backgroundColor('#007DFF')}@BuildertabContent3() { 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%')}}
https://i-blog.csdnimg.cn/img_convert/3ba2ab64dc9f33074c2d175eb585dedb.gif
https://i-blog.csdnimg.cn/direct/703087920c1e470298018f36136f0494.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]