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