1# @ohos.arkui.advanced.SegmentButton (分段按钮) 2 3分段按钮组件，包含页签类分段按钮、单选类分段按钮、多选类分段按钮。 4 5>**说明：** 6> 7>该组件及其子组件从 API Version 11 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 导入模块 10 11``` 12import { SegmentButton, SegmentButtonOptions, SegmentButtonItemOptionsArray } from '@ohos.arkui.advanced.SegmentButton' 13``` 14 15## 子组件 16 17无 18 19## SegmentButton 20 21SegmentButton({ options: SegmentButtonOptions, selectedIndexes: number[] }) 22 23**装饰器类型：**@Component 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28 29| 名称 | 参数类型 | 必填 | 装饰器类型 | 说明 | 30| --------------- | --------------------------------------------- | ---- | ----------- | ------------------------------------------------------------ | 31| options | [SegmentButtonOptions](#segmentbuttonoptions) | 是 | @ObjectLink | 分段按钮选项。 | 32| selectedIndexes | number[] | 是 | @Link | 分段按钮的选中项编号，第一项的编号为0，之后顺序增加。<br/>**说明：**<br/>`selectedIndexes`使用[@Link装饰器：父子双向同步](../../../quick-start/arkts-link.md)，仅支持有效的按钮编号（第一个按钮编号为0，之后按顺序累加），如没有选中项可传入空数组`[]`。 | 33 34>**说明：** 35> 36>分段按钮组件不支持通用属性。分段按钮组件使用当前区域可使用的最大宽度做为组件宽度，并且根据按钮个数平均分配每个按钮宽度；分段按钮组件高度根据按钮内容（文本及图片）自动适应，其最小高度为28vp。 37 38## SegmentButtonOptions 39 40分段按钮选项类，用于为分段按钮提供初始数据和自定义属性。 41 42### 属性 43 44| 属性 | 类型 | 描述 | 45| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 46| type | "tab" \| "capsule" | 分段按钮的类型。 | 47| multiply | boolean | 是否可以多选。<br/>**说明：**<br/>页签类分段按钮只支持单选，设置`multiply`为`true`不生效。 | 48| buttons | [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | 按钮信息，包括图标和文本信息。 | 49| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 按钮未选中态的文本颜色，默认值：#99182431。 | 50| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | 按钮选中态的文本颜色，默认值：#ff182431。 | 51| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | 按钮未选中态的字体大小（不支持百分比设置），默认值：14.0fp。 | 52| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | 按钮选中态的字体大小（不支持百分比设置），默认值：14.0fp。 | 53| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 按钮未选中态的字体粗细，默认值：FontWeight.Regular。 | 54| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 按钮选中态的字体粗细，默认值：FontWeight.Medium。 | 55| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 底板颜色，默认值：页签类\#0c182431，单选类/多选类\#0c182431。 | 56| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 按钮选中态底板颜色，默认值：页签类\#ffffffff，单选类/多选类\#ff007dff。 | 57| imageSize | [SizeOptions](ts-types.md#sizeoptions) | 图片尺寸，默认值：{ width: 24, height: 24 }。<br/>**说明：**<br/>`imageSize`属性对仅图标按钮和图标+文本按钮生效，对仅文字按钮无效果。 | 58| buttonPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 按钮内边距，默认值：仅图标按钮和仅文字按钮`{ top: 4, right: 8, bottom: 4, left: 8 }`，图标+文本按钮`{ top: 6, right: 8, bottom: 6, left: 8 }`。 | 59| textPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 文本内边距，默认值：0。 | 60| backgroundBlurStyle | [BlurStyle](ts-appendix-enums.md#blurstyle9) | 背景模糊材质，默认值：BlurStyle.NONE | 61 62### constructor 63 64constructor(options: TabSegmentButtonOptions | CapsuleSegmentButtonOptions) 65 66构造函数。 67 68**参数：** 69 70 71| 名称 | 参数类型 | 必填 | 说明 | 72| ------- | ------------------------------------------------------------ | ---- | -------------------- | 73| options | [TabSegmentButtonOptions](#tabsegmentbuttonoptions)\| [CapsuleSegmentButtonOptions](#capsulesegmentbuttonoptions) | 是 | 页签类或者单选类/多选类分段按钮信息。 | 74 75### tab 76 77static tab(options: TabSegmentButtonConstructionOptions): SegmentButtonOptions 78 79创建页签类的SegmentButtonOptions。 80 81**参数：** 82 83 84| 名称 | 参数类型 | 必填 | 说明 | 85| ------- | ------------------------------------------------------------ | ---- | -------------------- | 86| options | [TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions) | 是 | 页签类分段按钮信息。 | 87 88**返回值：** 89 90| 类型 | 说明 | 91| ------ | ------------------------ | 92| [SegmentButtonOptions](#segmentbuttonoptions) | 分段按钮选项。 | 93 94### capsule 95 96static capsule(options: CapsuleSegmentButtonConstructionOptions): SegmentButtonOptions 97 98创建单选类/多选类的SegmentButtonOptions。 99 100**参数：** 101 102 103| 名称 | 参数类型 | 必填 | 说明 | 104| ------- | ------------------------------------------------------------ | ---- | --------------------------- | 105| options | [CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions) | 是 | 单选类/多选类分段按钮信息。 | 106 107**返回值：** 108 109| 类型 | 说明 | 110| ------ | ------------------------ | 111| [SegmentButtonOptions](#segmentbuttonoptions) | 分段按钮选项。 | 112 113## DimensionNoPercentage 114 115不支持百分比类型的长度的联合类型。 116 117**系统能力：** SystemCapability.ArkUI.ArkUI.Full 118 119| 类型 | 说明 | 120| -------------------------------- | --------------------------------------------- | 121| [PX](ts-types.md#px10) | 长度类型，用于描述以px像素单位为单位的长度。 | 122| [VP](ts-types.md#vp10) | 长度类型，用于描述以vp像素单位为单位的长度。 | 123| [FP](ts-types.md#fp10) | 长度类型，用于描述以fp像素单位为单位的长度。 | 124| [LPX](ts-types.md#lpx10) | 长度类型，用于描述以lpx像素单位为单位的长度。 | 125| [Resource](ts-types.md#resource) | 资源引用类型，用于设置组件属性的值。 | 126 127## CommonSegmentButtonOptions 128 129用于定义分段按钮组件可自定义的属性。 130 131**系统能力：** SystemCapability.ArkUI.ArkUI.Full 132 133**属性：** 134 135| 属性 | 类型 | 描述 | 136| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 137| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 按钮未选中态的文本颜色，默认值：#99182431。 | 138| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | 按钮选中态的文本颜色，默认值：#ff182431。 | 139| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | 按钮未选中态的字体大小（不支持百分比设置），默认值：14.0fp。 | 140| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | 按钮选中态的字体大小（不支持百分比设置），默认值：14.0fp。 | 141| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 按钮未选中态的字体粗细，默认值：FontWeight.Regular。 | 142| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 按钮选中态的字体粗细，默认值：FontWeight.Medium。 | 143| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 底板颜色，默认值：页签类\#0c182431，单选类/多选类\#0c182431。 | 144| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 按钮选中态底板颜色，默认值：页签类\#ffffffff，单选类/多选类\#ff007dff。 | 145| imageSize | [SizeOptions](ts-types.md#sizeoptions) | 图片尺寸，默认值：{ width: 24, height: 24 }。<br/>**说明：**<br/>`imageSize`属性对仅图标按钮和图标+文本按钮生效，对仅文字按钮无效果。 | 146| buttonPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 按钮内边距，默认值：仅图标按钮和仅文字按钮`{ top: 4, right: 8, bottom: 4, left: 8 }`，图标+文本按钮`{ top: 6, right: 8, bottom: 6, left: 8 }`。 | 147| textPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 文本内边距，默认值：0。 | 148| backgroundBlurStyle | [BlurStyle](ts-appendix-enums.md#blurstyle9) | 背景模糊材质，默认值：BlurStyle.NONE | 149 150## TabSegmentButtonConstructionOptions 151 152用于构建页签类的SegmentButtonOptions对象。 153 154继承[CommonSegmentButtonOptions](#commonsegmentbuttonoptions)。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158| 属性 | 类型 | 必填 | 描述 | 159| ------- | ------------------------------------------------------------ | ---- | ---------- | 160| buttons | [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)> | 是 | 按钮信息。 | 161 162## CapsuleSegmentButtonConstructionOptions 163 164用于构建单选类/多选类的SegmentButtonOptions对象。 165 166继承[CommonSegmentButtonOptions](#commonsegmentbuttonoptions)。 167 168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 169 170| 属性 | 类型 | 必填 | 描述 | 171| -------- | ------------------------------------------------- | ---- | ----------------------------- | 172| buttons | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | 是 | 按钮信息。 | 173| multiply | boolean | 否 | 是否可以多选，默认值：false。 | 174 175## ItemRestriction 176 177用于保存按钮信息的元组。 178 179| 取值范围 | 说明 | 180| ----------------------------------------- | --------------------------------- | 181| ItemRestriction\<T\> = [T, T, T?, T?, T?] | 表示包含2~5个相同类型元素的元组。 | 182 183>**说明：** 184> 185>分段按钮组件仅支持2到5个按钮。 186 187## SegmentButtonItemTuple 188 189用于保存按钮信息的元组的联合类型。 190 191**系统能力：** SystemCapability.ArkUI.ArkUI.Full 192 193| 取值范围 | 说明 | 194| ------------------------------------------------------------ | ------------------------- | 195| [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | 仅文本按钮信息的元组。 | 196| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | 仅图标按钮信息的元组。 | 197| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | 图标+文本按钮信息的元组。 | 198 199## SegmentButtonItemArray 200 201用于保存按钮信息的数组的联合类型。 202 203**系统能力：** SystemCapability.ArkUI.ArkUI.Full 204 205| 取值范围 | 说明 | 206| ------------------------------------------------------------ | ------------------------- | 207| Array\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | 仅文本按钮信息的数组。 | 208| Array\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | 仅图标按钮信息的数组。 | 209| Array\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | 图标+文本按钮信息的数组。 | 210 211## SegmentButtonItemOptionsArray 212 213用于保存按钮信息的数组。 214 215>**说明：** 216> 217>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息。 218 219### constructor 220 221constructor(elements: SegmentButtonItemTuple) 222 223构造函数。 224 225**参数：** 226 227 228| 名称 | 参数类型 | 必填 | 说明 | 229| -------- | ------------------------------------------------- | ---- | ---------- | 230| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | 是 | 按钮信息。 | 231 232### push 233 234push(...items: SegmentButtonItemArray): number 235 236在数组末尾添加新的元素，返回添加元素后数组的长度。 237 238**参数：** 239 240 241| 名称 | 参数类型 | 必填 | 说明 | 242| ----- | ------------------------------------------------- | ---- | ---------------------- | 243| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | 是 | 被添加的按钮信息数组。 | 244 245**返回值：** 246 247| 类型 | 说明 | 248| ------ | ------------------------ | 249| number | 添加元素后数组的长度。 | 250 251>**说明：** 252> 253>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 254 255### pop 256 257pop(): SegmentButtonItemOptions | undefined 258 259移除数组末尾最后一个元素，返回被移除的元素。 260 261**返回值：** 262 263| 类型 | 说明 | 264| ------------------------------------------------------------ | -------------- | 265| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | 被移除的元素。 | 266 267>**说明：** 268> 269>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 270 271### shift 272 273shift(): SegmentButtonItemOptions | undefined 274 275移除数组开头第一个元素，返回被移除的元素。 276 277**返回值：** 278 279| 类型 | 说明 | 280| ------------------------------------------------------------ | -------------- | 281| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | 被移除的元素。 | 282 283>**说明：** 284> 285>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 286 287### unshift 288 289unshift(...items: SegmentButtonItemArray): number 290 291在数组开头添加新的元素，返回添加元素后数组的长度。 292 293**参数：** 294 295 296| 名称 | 参数类型 | 必填 | 说明 | 297| ----- | ------------------------------------------------- | ---- | -------------------- | 298| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | 是 | 添加的按钮信息数组。 | 299 300**返回值：** 301 302| 类型 | 说明 | 303| ------ | ---------------------- | 304| number | 添加元素后数组的长度。 | 305 306>**说明：** 307> 308>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 309 310### splice 311 312splice(start: number, deleteCount: number, ...items: SegmentButtonItemOptions[]): SegmentButtonItemOptions[] 313 314在数组中，删除从start位置开始的deleteCount数量的元素，并插入items中的元素，返回一个包含了被删除的元素的数组。 315 316**参数：** 317 318 319| 名称 | 参数类型 | 必填 | 说明 | 320| ----------- | ------------------------------------------------------- | ---- | -------------------- | 321| start | number | 是 | 删除元素的起始位置。 | 322| deleteCount | number | 是 | 删除元素的数量。 | 323| items | [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | 否 | 插入元素数组。 | 324 325**返回值：** 326 327| 类型 | 说明 | 328| ------------------------------------------------------- | ------------------------------ | 329| [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | 返回包含了被删除的元素的数组。 | 330 331>**说明：** 332> 333>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 334 335### create 336 337static create(elements: SegmentButtonItemTuple): SegmentButtonItemOptionsArray 338 339创建一个SegmentButtonItemOptionsArray对象。 340 341**参数：** 342 343 344| 名称 | 参数类型 | 必填 | 说明 | 345| -------- | ------------------------------------------------- | ---- | ---------- | 346| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | 是 | 按钮信息。 | 347 348**返回值：** 349 350| 类型 | 说明 | 351| ------------------------------------------------------------ | ----------------------------------------- | 352| [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | 创建的SegmentButtonItemOptionsArray对象。 | 353 354## TabSegmentButtonOptions 355 356页签类分段按钮选项。继承自[TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions)。 357 358**系统能力：** SystemCapability.ArkUI.ArkUI.Full 359 360| 属性 | 类型 | 描述 | 361| ---- | ----- | ---------------------- | 362| type | "tab" | 类型为页签类分段按钮。 | 363 364## CapsuleSegmentButtonOptions 365 366单选类/多选类分段按钮选项。继承自[CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions)。 367 368**系统能力：** SystemCapability.ArkUI.ArkUI.Full 369 370| 属性 | 类型 | 描述 | 371| ---- | --------- | ----------------------------- | 372| type | "capsule" | 类型为单选类/多选类分段按钮。 | 373 374## SegmentButtonTextItem 375 376仅文本按钮信息。 377 378**系统能力：** SystemCapability.ArkUI.ArkUI.Full 379 380| 属性 | 类型 | 必填 | 描述 | 381| ---- | -------------------------------------- | ---- | ---------- | 382| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮文本。 | 383 384## SegmentButtonIconItem 385 386仅图标按钮信息。 387 388**系统能力：** SystemCapability.ArkUI.ArkUI.Full 389 390| 属性 | 类型 | 必填 | 描述 | 391| ------------ | -------------------------------------- | ---- | -------------------- | 392| icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 未选中态的按钮图标。 | 393| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 是 | 选中态的按钮图标。 | 394 395>**说明：** 396> 397>未选中态图标`icon`与选中态图标`selectedIcon`都需要被设置，单独设置不生效。 398 399## SegmentButtonIconTextItem 400 401图标+文本按钮信息。 402 403**系统能力：** SystemCapability.ArkUI.ArkUI.Full 404 405| 属性 | 类型 | 必填 | 描述 | 406| ------------ | -------------------------------------- | ---- | -------------------- | 407| icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 未选中态的按钮图标。 | 408| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 是 | 选中态的按钮图标。 | 409| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮文本。 | 410 411>**说明：** 412> 413>未选中态图标`icon`与选中态图标`selectedIcon`都需要被设置，单独设置不生效。 414 415## SegmentButtonItemOptions 416 417分段按钮中按钮的选项。 418 419**属性：** 420 421| 属性 | 类型 | 必填 | 描述 | 422| ------------ | -------------------------------------- | ---- | -------------------- | 423| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态的按钮图标。 | 424| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态的按钮图标。 | 425| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 按钮文本。 | 426 427### constructor 428 429constructor(options: SegmentButtonItemOptionsConstructorOptions) 430 431构造函数。 432 433**参数：** 434 435 436| 参数名 | 类型 | 必填 | 说明 | 437| ------- | ------------------------------------------------------------ | ---- | ------------------ | 438| options | [SegmentButtonItemOptionsConstructorOptions](#segmentbuttonitemoptionsconstructoroptions) | 是 | 分段按钮按钮选项。 | 439 440## SegmentButtonItemOptionsConstructorOptions 441 442SegmentButtonItemOptions的构造参数。 443 444**系统能力：** SystemCapability.ArkUI.ArkUI.Full 445 446| 属性 | 类型 | 必填 | 描述 | 447| ------------ | -------------------------------------- | ---- | -------------------- | 448| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态的按钮图标。 | 449| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态的按钮图标。 | 450| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 按钮文本。 | 451 452## 示例 453 454### 示例1 455 456```ts 457// xxx.ets 458import { 459 ItemRestriction, 460 SegmentButton, 461 SegmentButtonItemTuple, 462 SegmentButtonOptions, 463 SegmentButtonTextItem 464} from '@ohos.arkui.advanced.SegmentButton' 465 466@Entry 467@Component 468struct Index { 469 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 470 buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, { 471 text: '页签按钮3' 472 }] as ItemRestriction<SegmentButtonTextItem>, 473 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 474 }) 475 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 476 buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }] as SegmentButtonItemTuple, 477 multiply: false, 478 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 479 }) 480 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 481 buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }] as SegmentButtonItemTuple, 482 multiply: true 483 }) 484 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 485 buttons: [ 486 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 487 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 488 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 489 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 490 ] as SegmentButtonItemTuple, 491 multiply: false, 492 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 493 }) 494 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 495 buttons: [ 496 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 497 { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 498 { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 499 { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 500 { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 501 ] as SegmentButtonItemTuple, 502 multiply: true 503 }) 504 @State tabSelectedIndexes: number[] = [1] 505 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 506 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 507 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 508 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 509 510 build() { 511 Row() { 512 Column() { 513 Column({ space: 25 }) { 514 SegmentButton({ options: this.tabOptions, 515 selectedIndexes: $tabSelectedIndexes }) 516 SegmentButton({ options: this.singleSelectCapsuleOptions, 517 selectedIndexes: $singleSelectCapsuleSelectedIndexes }) 518 SegmentButton({ 519 options: this.multiplySelectCapsuleOptions, 520 selectedIndexes: $multiplySelectCapsuleSelectedIndexes }) 521 SegmentButton({ options: this.iconCapsuleOptions, 522 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 523 SegmentButton({ options: this.iconTextCapsuleOptions, 524 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 525 }.width('90%') 526 }.width('100%') 527 }.height('100%') 528 } 529} 530``` 531 532 533 534### 示例2 535 536```ts 537// xxx.ets 538import { 539 ItemRestriction, 540 SegmentButton, 541 SegmentButtonItemTuple, 542 SegmentButtonOptions, 543 SegmentButtonTextItem 544} from '@ohos.arkui.advanced.SegmentButton' 545 546@Entry 547@Component 548struct Index { 549 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 550 buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, { 551 text: '页签按钮3' 552 }] as ItemRestriction<SegmentButtonTextItem>, 553 backgroundColor: Color.Green, 554 selectedBackgroundColor: Color.Orange, 555 textPadding: { top: 10, right: 10, bottom: 10, left: 10 }, 556 }) 557 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 558 buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }] as SegmentButtonItemTuple, 559 multiply: false, 560 fontColor: Color.Black, 561 selectedFontColor: Color.Yellow, 562 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 563 }) 564 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 565 buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }] as SegmentButtonItemTuple, 566 multiply: true, 567 fontSize: 18, 568 selectedFontSize: 18, 569 fontWeight: FontWeight.Bolder, 570 selectedFontWeight: FontWeight.Lighter, 571 }) 572 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 573 buttons: [ 574 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 575 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 576 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 577 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 578 ] as SegmentButtonItemTuple, 579 multiply: false, 580 imageSize: { width: 40, height: 40 }, 581 buttonPadding: { top: 6, right: 10, bottom: 6, left: 10 }, 582 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 583 }) 584 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 585 buttons: [ 586 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 587 { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 588 { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 589 { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 590 { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 591 ] as SegmentButtonItemTuple, 592 multiply: true, 593 imageSize: { width: 10, height: 10 }, 594 }) 595 @State tabSelectedIndexes: number[] = [0] 596 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 597 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 598 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 599 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 600 601 build() { 602 Row() { 603 Column() { 604 Column({ space: 20 }) { 605 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 606 SegmentButton({ options: this.singleSelectCapsuleOptions, 607 selectedIndexes: $singleSelectCapsuleSelectedIndexes }) 608 SegmentButton({ options: this.multiplySelectCapsuleOptions, 609 selectedIndexes: $multiplySelectCapsuleSelectedIndexes }) 610 SegmentButton({ options: this.iconCapsuleOptions, 611 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 612 SegmentButton({ options: this.iconTextCapsuleOptions, 613 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 614 }.width('90%') 615 }.width('100%') 616 }.height('100%') 617 } 618} 619``` 620 621 622 623### 示例3 624 625```ts 626import { 627 SegmentButton, 628 SegmentButtonOptions, 629 SegmentButtonItemOptionsArray, 630 SegmentButtonItemTuple, 631 SegmentButtonItemOptions 632} from '@ohos.arkui.advanced.SegmentButton' 633 634@Entry 635@Component 636struct Index { 637 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 638 buttons: [{ text: '1' }, { text: '2' }, { text: '3' }, 639 { text: '4' }, { text: '5' }] as SegmentButtonItemTuple, 640 multiply: false, 641 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 642 }) 643 @State capsuleSelectedIndexes: number[] = [0] 644 645 build() { 646 Row() { 647 Column() { 648 Column({ space: 10 }) { 649 SegmentButton({ options: this.singleSelectCapsuleOptions, 650 selectedIndexes: $capsuleSelectedIndexes }) 651 Button("删除第一个按钮") 652 .onClick(() => { 653 this.singleSelectCapsuleOptions.buttons.shift() 654 }) 655 Button("删除最后一个按钮") 656 .onClick(() => { 657 this.singleSelectCapsuleOptions.buttons.pop() 658 }) 659 Button("末尾增加一个按钮push") 660 .onClick(() => { 661 this.singleSelectCapsuleOptions.buttons.push({ text: 'push' }) 662 }) 663 Button("开头增加一个按钮unshift") 664 .onClick(() => { 665 this.singleSelectCapsuleOptions.buttons.unshift(({ text: 'unshift' })) 666 }) 667 Button("将按钮2、3替换为splice1、splice2") 668 .onClick(() => { 669 this.singleSelectCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 670 text: 'splice1' 671 }), new SegmentButtonItemOptions({ text: 'splice2' })) 672 }) 673 Button("更改所有按钮文字") 674 .onClick(() => { 675 this.singleSelectCapsuleOptions.buttons = 676 SegmentButtonItemOptionsArray.create([{ text: 'a' }, { text: 'b' }, 677 { text: 'c' }, { text: 'd' }, { text: 'e' }]) 678 }) 679 }.width('90%') 680 }.width('100%') 681 }.height('100%') 682 } 683} 684``` 685 686 687
