1# AtomicServiceTabs 2 3AtomicServiceTabs高级组件，对Tabs组件一些不需提供给用户自定义设计的属性进行简化，限制最多显示5个页签，固定页签样式，位置和大小。 4 5> **说明：** 6> 7> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 导入模块 10 11``` 12import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; 13``` 14 15## 子组件 16 17无 18 19## 属性 20 21不支持[通用属性](ts-component-general-attributes.md) 22 23## AtomicServiceTabs 24 25``` 26AtomicServiceTabs ({ 27 tabContents?: [ TabContentBuilder?, 28 TabContentBuilder?, 29 TabContentBuilder?, 30 TabContentBuilder?, 31 TabContentBuilder? 32 ], 33 tabBarOptionsArray: [ TabBarOptions, 34 TabBarOptions, 35 TabBarOptions?, 36 TabBarOptions?, 37 TabBarOptions? 38 ], 39 tabBarPosition?: TabBarPosition, 40 layoutMode?: LayoutMode, 41 barBackgroundColor?: ResourceColor, 42 index?: number, 43 barOverlap?: boolean, 44 controller?: TabsController, 45 onChange?: Callback<number>, 46 onTabBarClick?: Callback<number>, 47 onContentWillChange?: OnContentWillChangeCallback, 48}) 49``` 50**装饰器类型：**\@Component 51 52**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 53 54**系统能力：** SystemCapability.ArkUI.ArkUI.Full 55 56**参数：** 57 58| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 59| --------------- | ------ | ---- | ----|----------| 60| tabContents | [[TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder),[TabContentBuilder?](#tabcontentbuilder), [TabContentBuilder?](#tabcontentbuilder)] | 否 | @BuilderParam| 内容视图容器数组，默认为空。| 61| tabBarOptionsArray | [[TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions),[TabBarOptions?](#tabbaroptions), [TabBarOptions?](#tabbaroptions)] | 是 | @Prop | 页签容器数组。 | 62| tabBarPosition | [TabBarPosition](#tabbarposition) | 否 |@Prop | 设置页签栏位置，默认值为TabBarPosition.Bottom。| 63| layoutMode<sup>18+</sup> | [LayoutMode](ts-container-tabcontent.md#layoutmode10) | 否 |@Prop | 设置底部页签的图片、文字排布的方式，默认值为LayoutMode.VERTICAL。| 64| barBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | @Prop | 设置TabBar的背景颜色，默认值为透明。| 65| index | number | 否 | @Prop | 设置当前显示页签的索引，索引值从0开始。| 66| barOverlap | boolean| 否 | @Prop | 设置TabBar是否背后变模糊并叠加在TabContent之上，默认值为true。| 67| controller|[TabsController](ts-container-tabs.md#tabscontroller) | 否 | - |Tabs组件的控制器，用于控制Tabs组件进行页签切换。| 68| onChange | Callback\<number\> | 否 | - | Tabs页签切换后触发的事件。 | 69| onTabBarClick | Callback\<number\> | 否 | - |Tabs页签点击后触发的事件。| 70| onContentWillChange | [OnContentWillChangeCallback](#oncontentwillchangecallback) | 否 | - | Tabs页面切换拦截事件能力，新页面即将显示时触发该回调。| 71 72## TabContentBuilder 73 74type TabContentBuilder = () => void 75 76**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 77 78**系统能力：** SystemCapability.ArkUI.ArkUI.Full 79 80| 类型 | 说明 | 81| ---- | ---------- | 82| () => void | 内容视图容器 | 83 84## TabBarOptions 85 86### constructor 87constructor(icon: ResourceStr | TabBarSymbol, text: ResourceStr, unselectedColor?: ResourceColor, selectedColor?: ResourceColor) 88 89TabBarOptions的构造函数。 90 91**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 92 93**系统能力：** SystemCapability.ArkUI.ArkUI.Full 94 95**参数：** 96 97| 参数名 | 类型 | 必填 | 说明 | 98| --------------- | ------ |------ |------ | 99| icon | [ResourceStr](ts-types.md#resourcestr) \| [TabBarSymbol](ts-container-tabcontent.md#tabbarsymbol12) | 是 | 页签内的图片内容。 | 100| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | 101| unselectedColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 未选择时的页签颜色，默认值：#99182431。 | 102| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 被选择时的页签颜色，默认值：#FF007DFF。 | 103 104## TabBarPosition 105 106**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 107 108**系统能力：** SystemCapability.ArkUI.ArkUI.Full 109 110| 名称 | 值 | 说明 | 111| --------------- | ------ |-----| 112| LEFT | 0 | 设置TabBar位于屏幕左侧 | 113| BOTTOM | 1 | 设置TabBar位于屏幕底部 | 114 115## OnContentWillChangeCallback 116 117type OnContentWillChangeCallback = (currentIndex: number, comingIndex: number) => boolean 118 119**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 120 121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 122 123| 名称 | 类型 | 必填 | 说明 | 124| --------------- | ------ |------ |------ | 125| currentIndex | number | 是 | 当前页签索引。 | 126| comingIndex | number | 是 | 即将切换的页签索引。 | 127 128## 示例 129 130### 示例1(纯文本样式) 131 132```ts 133// Index.ets 134import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; 135 136@Entry 137@Component 138struct Index { 139 @State message: string = '首页'; 140 @State onClickNumber: number = 0; 141 @State currentIndex: number = 0; 142 @State comingIndex: number = 0; 143 onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => { 144 this.currentIndex = currentIndex; 145 this.comingIndex = comingIndex; 146 console.log('OnContentWillChangeCallback') 147 return true; 148 } 149 onTabClick: Callback<number> = (index:number)=>{ 150 this.onClickNumber ++; 151 console.log('onTabClick'); 152 } 153 @Builder 154 tabContent1() { 155 Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87') 156 } 157 158 @Builder 159 tabContent2() { 160 Column().width('100%').height('100%').backgroundColor('#007DFF') 161 } 162 163 @Builder 164 tabContent3() { 165 Column().width('100%').height('100%').backgroundColor('#FFBF00') 166 } 167 168 build() { 169 Stack() { 170 AtomicServiceTabs({ 171 tabContents: [ 172 () => { 173 this.tabContent1() 174 }, 175 () => { 176 this.tabContent2() 177 }, 178 () => { 179 this.tabContent3() 180 } 181 ], 182 tabBarOptionsArray: [ 183 new TabBarOptions('', '绿色', Color.Black, Color.Green), 184 new TabBarOptions('', '蓝色', Color.Black, Color.Blue), 185 new TabBarOptions('', '黄色', Color.Black, Color.Yellow), 186 ], 187 tabBarPosition: TabBarPosition.BOTTOM, 188 barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), 189 onTabBarClick:this.onTabClick, 190 onContentWillChange: this.onContentWillChangeCallBack, 191 }) 192 Column() { 193 Text("onchange回调次数:" + this.onClickNumber) 194 Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex) 195 }.margin({top:500}) 196 }.height('100%') 197 } 198} 199``` 200 201 202### 示例2(纯图标样式) 203 204```ts 205// Index.ets 206import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; 207 208@Entry 209@Component 210struct Index { 211 @State message: string = '首页'; 212 @State onClickNumber: number = 0; 213 @State currentIndex: number = 0; 214 @State comingIndex: number = 0; 215 onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => { 216 this.currentIndex = currentIndex; 217 this.comingIndex = comingIndex; 218 console.log('OnContentWillChangeCallback') 219 return true; 220 } 221 onTabClick: Callback<number> = (index:number)=>{ 222 this.onClickNumber ++; 223 console.log('onTabClick'); 224 } 225 @Builder 226 tabContent1() { 227 Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87') 228 } 229 230 @Builder 231 tabContent2() { 232 Column().width('100%').height('100%').backgroundColor('#007DFF') 233 } 234 235 @Builder 236 tabContent3() { 237 Column().width('100%').height('100%').backgroundColor('#FFBF00') 238 } 239 240 build() { 241 Stack() { 242 AtomicServiceTabs({ 243 tabContents: [ 244 () => { 245 this.tabContent1() 246 }, 247 () => { 248 this.tabContent2() 249 }, 250 () => { 251 this.tabContent3() 252 } 253 ], 254 tabBarOptionsArray: [ 255 new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '', Color.Black, Color.Blue), 256 new TabBarOptions($r('sys.media.ohos_ic_public_location'), '', Color.Black, Color.Blue), 257 new TabBarOptions($r('sys.media.ohos_ic_public_more'), '', Color.Black, Color.Blue), 258 ], 259 tabBarPosition: TabBarPosition.BOTTOM, 260 barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), 261 onTabBarClick:this.onTabClick, 262 onContentWillChange: this.onContentWillChangeCallBack, 263 }) 264 Column() { 265 Text("onchange回调次数:" + this.onClickNumber) 266 Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex) 267 }.margin({top:500}) 268 }.height('100%') 269 } 270} 271``` 272 273 274 275### 示例3(图标加文本，自定义图文排布) 276 277```ts 278// Index.ets 279import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI'; 280 281@Entry 282@Component 283struct AtomicserviceTabs { 284 @State flag: boolean = false; 285 @State message: string = '首页'; 286 @State onClickNumber: number = 0; 287 @State currentIndex: number = 0; 288 @State comingIndex: number = 0; 289 @State layoutMode: LayoutMode = LayoutMode.VERTICAL; 290 onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => { 291 this.currentIndex = currentIndex; 292 this.comingIndex = comingIndex; 293 console.log('OnContentWillChangeCallback') 294 return true; 295 } 296 onTabClick: Callback<number> = (index: number) => { 297 this.onClickNumber++; 298 console.log('onTabClick'); 299 } 300 onChange: Callback<number, void> = (Index: number) => { 301 console.log('onChange'); 302 console.log('onChange2'); 303 } 304 305 @Builder 306 tabContent1() { 307 Column().width('100%').height('100%').alignItems(HorizontalAlign.Center).backgroundColor('#00CB87') 308 } 309 310 @Builder 311 tabContent2() { 312 Column().width('100%').height('100%').backgroundColor(Color.Blue) 313 } 314 315 @Builder 316 tabContent3() { 317 Column().width('100%').height('100%').backgroundColor('#FFBF00') 318 } 319 320 build() { 321 Stack() { 322 AtomicServiceTabs({ 323 tabContents: [ 324 () => { 325 this.tabContent1() 326 }, 327 () => { 328 this.tabContent2() 329 }, 330 () => { 331 this.tabContent3() 332 }, 333 ], 334 tabBarOptionsArray: [ 335 new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '绿色', Color.Black, Color.Blue), 336 new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue), 337 new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', Color.Black, Color.Blue), 338 ], 339 tabBarPosition: TabBarPosition.BOTTOM, 340 barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'), 341 onTabBarClick: this.onTabClick, 342 onContentWillChange: this.onContentWillChangeCallBack, 343 onChange: this.onChange, 344 layoutMode: this.layoutMode, 345 }) 346 347 Column() { 348 Button("layoutMode垂直 ") 349 .width('30%') 350 .height(50) 351 .margin({ top: 5 }) 352 .onClick((event?: ClickEvent) => { 353 this.layoutMode = LayoutMode.VERTICAL; 354 }) 355 Button("layoutMode水平 ") 356 .width('30%') 357 .height(50) 358 .margin({ top: 5 }) 359 .onClick((event?: ClickEvent) => { 360 this.layoutMode = LayoutMode.HORIZONTAL; 361 }) 362 }.margin({ top: 10 }) 363 }.height('100%') 364 } 365} 366``` 367
