ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙5.0版开发：ArkTS组件-AtomicServiceTabs [打印本页]
作者: 大连全瓷种植牙齿制作中心    时间: 昨天 03:27
标题: 鸿蒙5.0版开发：ArkTS组件-AtomicServiceTabs
往期鸿蒙全套实战文章必看：（附带鸿蒙全栈学习资料）


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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4