1# SegmentButton 2 3分段按钮组件，包含页签类分段按钮、单选类分段按钮、多选类分段按钮。 4 5>**说明：** 6> 7>该组件及其子组件从 API Version 11 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 导入模块 10 11``` 12import { SegmentButton, SegmentButtonOptions, SegmentButtonItemOptionsArray } from '@kit.ArkUI'; 13``` 14 15## 子组件 16 17无 18 19## SegmentButton 20 21SegmentButton({ options: SegmentButtonOptions, selectedIndexes: number[], onItemClicked: Callback\<number\>, maxFontScale: number \| Resource }) 22 23**装饰器类型：**@Component 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 28| --------------- | --------------------------------------------- | ---- | ----------- | ------------------------------------------------------------ | 29| options | [SegmentButtonOptions](#segmentbuttonoptions) | 是 | @ObjectLink | 分段按钮选项。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 30| selectedIndexes | number[] | 是 | @Link | 分段按钮的选中项编号，第一项的编号为0，之后顺序增加。<br/>**说明：**<br/>`selectedIndexes`使用[@Link装饰器：父子双向同步](../../../quick-start/arkts-link.md)，仅支持有效的按钮编号（第一个按钮编号为0，之后按顺序累加），如没有选中项可传入空数组`[]`。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 31| onItemClicked<sup>13+</sup> | Callback\<number\> | 否 | - | 当分段按钮选项被点击时触发的回调函数，回调入参为被点击的选项下标。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 32| maxFontScale<sup>14+</sup> | number \| [Resource](ts-types.md#resource) | 是 | @Prop | 分段按钮选项文字的最大字体放大倍数。<br/>默认值：1<br/>取值范围：[1,2]<br/>**说明：** <br/>当设置的值小于1时，按值为1处理，设置的值大于2时，按值为2处理。<br/>**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 | 33 34>**说明：** 35> 36>分段按钮组件不支持通用属性。分段按钮组件使用当前区域可使用的最大宽度做为组件宽度，并且根据按钮个数平均分配每个按钮宽度；分段按钮组件高度根据按钮内容（文本及图片）自动适应，其最小高度为28vp。 37 38## SegmentButtonOptions 39 40分段按钮选项类，用于为分段按钮提供初始数据和自定义属性。 41 42### 属性 43 44**装饰器类型：** @Observed 45 46**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50| 名称 | 类型 | 必填 | 说明 | 51| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 52| type | 'tab' \| 'capsule' | 是 | 分段按钮的类型。 | 53| multiply | boolean | 是 | 是否可以多选。<br/>**说明：**<br/>页签类分段按钮只支持单选，设置`multiply`为`true`不生效。 | 54| buttons | [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | 是 | 按钮信息，包括图标和文本信息。 | 55| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 按钮未选中态的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_secondary') | 56| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 按钮选中态的文本颜色。<br/>type为"tab"时，默认值为`$r('sys.color.ohos_id_color_text_primary')`。<br/>type为"capsule"时，默认值为`$r('sys.color.ohos_id_color_foreground_contrary')`。 | 57| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | 是 | 按钮未选中态的字体大小（不支持百分比设置）。<br/>默认值：$r('sys.float.ohos_id_text_size_body2') | 58| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | 是 | 按钮选中态的字体大小（不支持百分比设置）。<br/>默认值：$r('sys.float.ohos_id_text_size_body2') | 59| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 是 | 按钮未选中态的字体粗细。<br/>默认值：FontWeight.Regular | 60| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 是 | 按钮选中态的字体粗细。<br/>默认值：FontWeight.Medium。 | 61| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 底板颜色。<br/>默认值：$r('sys.color.ohos_id_color_button_normal') | 62| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 是 | 按钮选中态底板颜色。<br/>type为"tab"时，默认值为`$r('sys.color.ohos_id_color_foreground_contrary')`。<br/>type为"capsule"时，默认值为`$r('sys.color.ohos_id_color_emphasize')`。 | 63| imageSize | [SizeOptions](ts-types.md#sizeoptions) | 是 | 图片尺寸，默认值：{ width: 24, height: 24 }。<br/>**说明：**<br/>`imageSize`属性对仅图标按钮和图标+文本按钮生效，对仅文字按钮无效果。 | 64| 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 }`。 | 65| textPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 是 | 文本内边距。<br/>默认值：0 | 66| localizedButtonPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | 按钮内边距，默认值：仅图标按钮和仅文字按钮`{ top: LengthMetrics.vp(4), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(4), start: LengthMetrics.vp(8) }`，图标+文本按钮`{ top: LengthMetrics.vp(6), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(6), start: LengthMetrics.vp(8) }`。 | 67| localizedTextPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | 文本内边距。<br/>默认值：0 | 68| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | 否 | 布局方向。<br/>默认值：Direction.Auto | 69| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 是 | 背景模糊材质。<br/>默认值：BlurStyle.NONE | 70 71### constructor 72 73constructor(options: TabSegmentButtonOptions | CapsuleSegmentButtonOptions) 74 75构造函数。 76 77**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81 82| 名称 | 类型 | 必填 | 说明 | 83| ------- | ------------------------------------------------------------ | ---- | -------------------- | 84| options | [TabSegmentButtonOptions](#tabsegmentbuttonoptions) \| [CapsuleSegmentButtonOptions](#capsulesegmentbuttonoptions) | 是 | 页签类或者单选类/多选类分段按钮信息。 | 85 86### tab 87 88static tab(options: TabSegmentButtonConstructionOptions): SegmentButtonOptions 89 90创建页签类的SegmentButtonOptions。 91 92**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96 97| 名称 | 类型 | 必填 | 说明 | 98| ------- | ------------------------------------------------------------ | ---- | -------------------- | 99| options | [TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions) | 是 | 页签类分段按钮信息。 | 100 101**返回值：** 102 103| 类型 | 说明 | 104| ------ | ------------------------ | 105| [SegmentButtonOptions](#segmentbuttonoptions) | 分段按钮选项。 | 106 107### capsule 108 109static capsule(options: CapsuleSegmentButtonConstructionOptions): SegmentButtonOptions 110 111创建单选类/多选类的SegmentButtonOptions。 112 113**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117 118| 名称 | 类型 | 必填 | 说明 | 119| ------- | ------------------------------------------------------------ | ---- | --------------------------- | 120| options | [CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions) | 是 | 单选类/多选类分段按钮信息。 | 121 122**返回值：** 123 124| 类型 | 说明 | 125| ------ | ------------------------ | 126| [SegmentButtonOptions](#segmentbuttonoptions) | 分段按钮选项。 | 127 128## DimensionNoPercentage 129 130type DimensionNoPercentage = PX | VP | FP | LPX | Resource 131 132不支持百分比类型的长度的联合类型。 133 134**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 135 136**系统能力：** SystemCapability.ArkUI.ArkUI.Full 137 138| 类型 | 说明 | 139| -------------------------------- | --------------------------------------------- | 140| [PX](ts-types.md#px10) | 长度类型，用于描述以px像素单位为单位的长度。 | 141| [VP](ts-types.md#vp10) | 长度类型，用于描述以vp像素单位为单位的长度。 | 142| [FP](ts-types.md#fp10) | 长度类型，用于描述以fp像素单位为单位的长度。 | 143| [LPX](ts-types.md#lpx10) | 长度类型，用于描述以lpx像素单位为单位的长度。 | 144| [Resource](ts-types.md#resource) | 资源引用类型，用于设置组件属性的值。 | 145 146## CommonSegmentButtonOptions 147 148用于定义分段按钮组件可自定义的属性。 149 150**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154### 属性 155 156| 名称 | 类型 | 必填 | 说明 | 157| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 158| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮未选中态的文本颜色。<br/>默认值：$r('sys.color.ohos_id_color_text_secondary') | 159| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮选中态的文本颜色。<br/>type为"tab"时，默认值为`$r('sys.color.ohos_id_color_text_primary')`。<br/>type为"capsule"时，默认值为`$r('sys.color.ohos_id_color_foreground_contrary')`。 | 160| fontSize | [DimensionNoPercentage](#dimensionnopercentage) | 否 | 按钮未选中态的字体大小（不支持百分比设置）。<br/>默认值：$r('sys.float.ohos_id_text_size_body2') | 161| selectedFontSize | [DimensionNoPercentage](#dimensionnopercentage) | 否 | 按钮选中态的字体大小（不支持百分比设置）。<br/>默认值：$r('sys.float.ohos_id_text_size_body2') | 162| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | 按钮未选中态的字体粗细。<br/>默认值：FontWeight.Regular | 163| selectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | 按钮选中态的字体粗细。<br/>默认值：FontWeight.Medium。 | 164| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 底板颜色。<br/>默认值：$r('sys.color.ohos_id_color_button_normal') | 165| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 按钮选中态底板颜色。<br/>type为"tab"时，默认值为`$r('sys.color.ohos_id_color_foreground_contrary')`。<br/>type为"capsule"时，默认值为`$r('sys.color.ohos_id_color_emphasize')`。 | 166| imageSize | [SizeOptions](ts-types.md#sizeoptions) | 否 | 图片尺寸，默认值：{ width: 24, height: 24 }。<br/>**说明：**<br/>`imageSize`属性对仅图标按钮和图标+文本按钮生效，对仅文字按钮无效果。 | 167| 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 }`。 | 168| textPadding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 否 | 文本内边距。<br/>默认值：0 | 169| localizedButtonPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | 按钮内边距，默认值：仅图标按钮和仅文字按钮`{ top: LengthMetrics.vp(4), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(4), start: LengthMetrics.vp(8) }`，图标+文本按钮`{ top: LengthMetrics.vp(6), end: LengthMetrics.vp(8), bottom: LengthMetrics.vp(6), start: LengthMetrics.vp(8) }`。 | 170| localizedTextPadding<sup>12+</sup> | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | 文本内边距。<br/>默认值：0 | 171| direction<sup>12+</sup> | [Direction](ts-appendix-enums.md#direction) | 否 | 布局方向。<br/>默认值：Direction.Auto | 172| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 背景模糊材质。<br/>默认值：BlurStyle.NONE | 173 174## TabSegmentButtonConstructionOptions 175 176用于构建页签类的SegmentButtonOptions对象。 177 178继承[CommonSegmentButtonOptions](#commonsegmentbuttonoptions)。 179 180**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 181 182**系统能力：** SystemCapability.ArkUI.ArkUI.Full 183 184### 属性 185 186| 名称 | 类型 | 必填 | 说明 | 187| ------- | ------------------------------------------------------------ | ---- | ---------- | 188| buttons | [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)> | 是 | 按钮信息。 | 189 190## CapsuleSegmentButtonConstructionOptions 191 192用于构建单选类/多选类的SegmentButtonOptions对象。 193 194继承[CommonSegmentButtonOptions](#commonsegmentbuttonoptions)。 195 196**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 197 198**系统能力：** SystemCapability.ArkUI.ArkUI.Full 199 200### 属性 201 202| 名称 | 类型 | 必填 | 说明 | 203| -------- | ------------------------------------------------- | ---- | ----------------------------- | 204| buttons | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | 是 | 按钮信息。 | 205| multiply | boolean | 否 | 是否可以多选，默认值：false。 | 206 207## ItemRestriction 208 209type ItemRestriction\<T> = [T, T, T?, T?, T?] 210 211用于保存按钮信息的元组。 212 213**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217| 类型 | 说明 | 218| ----------------------------------------- | --------------------------------- | 219|[T, T, T?, T?, T?] | 表示包含2~5个相同类型元素的元组。 | 220 221>**说明：** 222> 223>分段按钮组件仅支持2到5个按钮。 224 225## SegmentButtonItemTuple 226 227type SegmentButtonItemTuple = ItemRestriction\<SegmentButtonTextItem> | ItemRestriction\<SegmentButtonIconItem> | ItemRestriction\<SegmentButtonIconTextItem> 228 229用于保存按钮信息的元组的联合类型。 230 231**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 232 233**系统能力：** SystemCapability.ArkUI.ArkUI.Full 234 235| 类型 | 说明 | 236| ------------------------------------------------------------ | ------------------------- | 237| [ItemRestriction](#itemrestriction)\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | 仅文本按钮信息的元组。 | 238| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | 仅图标按钮信息的元组。 | 239| [ItemRestriction](#itemrestriction)\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | 图标+文本按钮信息的元组。 | 240 241## SegmentButtonItemArray 242 243type SegmentButtonItemArray = Array\<SegmentButtonTextItem> | Array\<SegmentButtonIconItem> | Array\<SegmentButtonIconTextItem> 244 245用于保存按钮信息的数组的联合类型。 246 247**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 248 249**系统能力：** SystemCapability.ArkUI.ArkUI.Full 250 251| 类型 | 说明 | 252| ------------------------------------------------------------ | ------------------------- | 253| Array\<[SegmentButtonTextItem](#segmentbuttontextitem)\> | 仅文本按钮信息的数组。 | 254| Array\<[SegmentButtonIconItem](#segmentbuttoniconitem)\> | 仅图标按钮信息的数组。 | 255| Array\<[SegmentButtonIconTextItem](#segmentbuttonicontextitem)\> | 图标+文本按钮信息的数组。 | 256 257## SegmentButtonItemOptionsArray 258 259用于保存按钮信息的数组。 260 261**装饰器类型：** @Observed 262 263>**说明：** 264> 265>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息。 266 267### constructor 268 269constructor(elements: SegmentButtonItemTuple) 270 271构造函数。 272 273**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 274 275**系统能力：** SystemCapability.ArkUI.ArkUI.Full 276 277**参数：** 278 279 280| 参数名 | 类型 | 必填 | 说明 | 281| -------- | ------------------------------------------------- | ---- | ---------- | 282| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | 是 | 按钮信息。 | 283 284### push 285 286push(...items: SegmentButtonItemArray): number 287 288在数组末尾添加新的元素，返回添加元素后数组的长度。 289 290**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 291 292**系统能力：** SystemCapability.ArkUI.ArkUI.Full 293 294**参数：** 295 296 297| 参数名 | 类型 | 必填 | 说明 | 298| ------ | ------------------------------------------------- | ---- | ---------------------- | 299| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | 是 | 被添加的按钮信息数组。 | 300 301**返回值：** 302 303| 类型 | 说明 | 304| ------ | ------------------------ | 305| number | 添加元素后数组的长度。 | 306 307>**说明：** 308> 309>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 310 311### pop 312 313pop(): SegmentButtonItemOptions | undefined 314 315移除数组末尾最后一个元素，返回被移除的元素。 316 317**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 318 319**系统能力：** SystemCapability.ArkUI.ArkUI.Full 320 321**返回值：** 322 323| 类型 | 说明 | 324| ------------------------------------------------------------ | -------------- | 325| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | 被移除的元素。 | 326 327>**说明：** 328> 329>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 330 331### shift 332 333shift(): SegmentButtonItemOptions | undefined 334 335移除数组开头第一个元素，返回被移除的元素。 336 337**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 338 339**系统能力：** SystemCapability.ArkUI.ArkUI.Full 340 341**返回值：** 342 343| 类型 | 说明 | 344| ------------------------------------------------------------ | -------------- | 345| [SegmentButtonItemOptions](#segmentbuttonitemoptions) \| undefined | 被移除的元素。 | 346 347>**说明：** 348> 349>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 350 351### unshift 352 353unshift(...items: SegmentButtonItemArray): number 354 355在数组开头添加新的元素，返回添加元素后数组的长度。 356 357**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 358 359**系统能力：** SystemCapability.ArkUI.ArkUI.Full 360 361**参数：** 362 363 364| 参数名 | 类型 | 必填 | 说明 | 365| ----- | ------------------------------------------------- | ---- | -------------------- | 366| items | [SegmentButtonItemArray](#segmentbuttonitemarray) | 是 | 添加的按钮信息数组。 | 367 368**返回值：** 369 370| 类型 | 说明 | 371| ------ | ---------------------- | 372| number | 添加元素后数组的长度。 | 373 374>**说明：** 375> 376>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 377 378### splice 379 380splice(start: number, deleteCount: number, ...items: SegmentButtonItemOptions[]): SegmentButtonItemOptions[] 381 382在数组中，删除从start位置开始的deleteCount数量的元素，并插入items中的元素，返回一个包含了被删除的元素的数组。 383 384**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 385 386**系统能力：** SystemCapability.ArkUI.ArkUI.Full 387 388**参数：** 389 390 391| 参数名 | 类型 | 必填 | 说明 | 392| ----------- | ------------------------------------------------------- | ---- | -------------------- | 393| start | number | 是 | 删除元素的起始位置。 | 394| deleteCount | number | 是 | 删除元素的数量。 | 395| items | [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | 否 | 插入元素数组。 | 396 397**返回值：** 398 399| 类型 | 说明 | 400| ------------------------------------------------------- | ------------------------------ | 401| [SegmentButtonItemOptions](#segmentbuttonitemoptions)[] | 返回包含了被删除的元素的数组。 | 402 403>**说明：** 404> 405>分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。 406 407### create 408 409static create(elements: SegmentButtonItemTuple): SegmentButtonItemOptionsArray 410 411创建一个SegmentButtonItemOptionsArray对象。 412 413**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 414 415**系统能力：** SystemCapability.ArkUI.ArkUI.Full 416 417**参数：** 418 419 420| 参数名 | 类型 | 必填 | 说明 | 421| -------- | ------------------------------------------------- | ---- | ---------- | 422| elements | [SegmentButtonItemTuple](#segmentbuttonitemtuple) | 是 | 按钮信息。 | 423 424**返回值：** 425 426| 类型 | 说明 | 427| ------------------------------------------------------------ | ----------------------------------------- | 428| [SegmentButtonItemOptionsArray](#segmentbuttonitemoptionsarray) | 创建的SegmentButtonItemOptionsArray对象。 | 429 430## TabSegmentButtonOptions 431 432页签类分段按钮选项。继承自[TabSegmentButtonConstructionOptions](#tabsegmentbuttonconstructionoptions)。 433 434**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 435 436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 437 438| 名称 | 类型 | 必填 | 说明 | 439| ---- | ----- | ---- | ---------------------- | 440| type | 'tab' | 是 | 类型为页签类分段按钮。 | 441 442## CapsuleSegmentButtonOptions 443 444单选类/多选类分段按钮选项。继承自[CapsuleSegmentButtonConstructionOptions](#capsulesegmentbuttonconstructionoptions)。 445 446**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 447 448**系统能力：** SystemCapability.ArkUI.ArkUI.Full 449 450| 名称 | 类型 | 必填 | 说明 | 451| ---- | --------- | ---- | ----------------------------- | 452| type | 'capsule' | 是 | 类型为单选类/多选类分段按钮。 | 453 454## SegmentButtonTextItem 455 456仅文本按钮信息。 457 458**系统能力：** SystemCapability.ArkUI.ArkUI.Full 459 460| 名称 | 类型 | 必填 | 说明 | 461| ---- | -------------------------------------- | ---- | ---------- | 462| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮文本。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 463| accessibilityLevel<sup>13+</sup> | string | 否 | 无障碍重要性，用于控制当前组件是否可被无障碍辅助服务所识别。<br/>支持的值为:<br/>"auto"：当前组件不可被无障碍辅助服务所识别。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 464| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍说明，用于为用户进一步说明当前组件，开发人员可为组件的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从组件本身属性与无障碍文本中了解到时。若组件既拥有文本属性又拥有无障碍说明属性，则组件被选中时，先播报组件的文本属性，再播报无障碍说明属性的内容。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 465 466## SegmentButtonIconItem 467 468仅图标按钮信息。 469 470**系统能力：** SystemCapability.ArkUI.ArkUI.Full 471 472|名称 | 类型 | 必填 | 说明 | 473| ------------ | -------------------------------------- | ---- | -------------------- | 474| icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 未选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 475| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 476| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 是 | 选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 477| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 478| accessibilityLevel<sup>13+</sup> | string | 否 | 无障碍重要性，用于控制当前组件是否可被无障碍辅助服务所识别。<br/>支持的值为:<br/>"auto"：当前组件不可被无障碍辅助服务所识别。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 479| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍说明，用于为用户进一步说明当前组件，开发人员可为组件的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从组件本身属性与无障碍文本中了解到时。若组件既拥有文本属性又拥有无障碍说明属性，则组件被选中时，先播报组件的文本属性，再播报无障碍说明属性的内容。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 480 481>**说明：** 482> 483>未选中态图标`icon`与选中态图标`selectedIcon`都需要被设置，单独设置不生效。 484 485## SegmentButtonIconTextItem 486 487图标+文本按钮信息。 488 489**系统能力：** SystemCapability.ArkUI.ArkUI.Full 490 491### 属性 492 493| 名称 | 类型 | 必填 | 说明 | 494| ------------ | -------------------------------------- | ---- | -------------------- | 495| icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 未选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 496| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 497| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 是 | 选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 498| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 499| text | [ResourceStr](ts-types.md#resourcestr) | 是 | 按钮文本。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 500| accessibilityLevel<sup>13+</sup> | string | 否 | 无障碍重要性，用于控制当前组件是否可被无障碍辅助服务所识别。<br/>支持的值为:<br/>"auto"：当前组件不可被无障碍辅助服务所识别。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 501| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍说明，用于为用户进一步说明当前组件，开发人员可为组件的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从组件本身属性与无障碍文本中了解到时。若组件既拥有文本属性又拥有无障碍说明属性，则组件被选中时，先播报组件的文本属性，再播报无障碍说明属性的内容。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 502 503>**说明：** 504> 505>未选中态图标`icon`与选中态图标`selectedIcon`都需要被设置，单独设置不生效。 506 507## SegmentButtonItemOptions 508 509分段按钮中按钮的选项。 510 511**装饰器类型：** @Observed 512 513**系统能力：** SystemCapability.ArkUI.ArkUI.Full 514 515### 属性 516 517| 名称 | 类型 | 必填 | 说明 | 518| ------------ | -------------------------------------- | ---- | -------------------- | 519| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 520| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 521| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 522| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 523| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 按钮文本。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 524| accessibilityLevel<sup>13+</sup> | string | 否 | 无障碍重要性，用于控制当前组件是否可被无障碍辅助服务所识别。<br/>支持的值为:<br/>"auto"：当前组件不可被无障碍辅助服务所识别。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 525| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍说明，用于为用户进一步说明当前组件，开发人员可为组件的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从组件本身属性与无障碍文本中了解到时。若组件既拥有文本属性又拥有无障碍说明属性，则组件被选中时，先播报组件的文本属性，再播报无障碍说明属性的内容。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 526 527### constructor 528 529constructor(options: SegmentButtonItemOptionsConstructorOptions) 530 531构造函数。 532 533**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 534 535**系统能力：** SystemCapability.ArkUI.ArkUI.Full 536 537**参数：** 538 539 540| 参数名 | 类型 | 必填 | 说明 | 541| ------- | ------------------------------------------------------------ | ---- | ------------------ | 542| options | [SegmentButtonItemOptionsConstructorOptions](#segmentbuttonitemoptionsconstructoroptions) | 是 | 分段按钮按钮选项。 | 543 544## SegmentButtonItemOptionsConstructorOptions 545 546SegmentButtonItemOptions的构造参数。 547 548**系统能力：** SystemCapability.ArkUI.ArkUI.Full 549 550### 属性 551 552| 名称 | 类型 | 必填 | 说明 | 553| ------------ | -------------------------------------- | ---- | -------------------- | 554| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 555| iconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 未选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 556| selectedIcon | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态的按钮图标。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 557| selectedIconAccessibilityText<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 选中态按钮图标的无障碍文本。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 558| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 按钮文本。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 559| accessibilityLevel<sup>13+</sup> | string | 否 | 无障碍重要性，用于控制当前组件是否可被无障碍辅助服务所识别。<br/>支持的值为:<br/>"auto"：当前组件不可被无障碍辅助服务所识别。<br/>"yes"：当前组件可被无障碍辅助服务所识别。<br/>"no"：当前组件不可被无障碍辅助服务所识别。<br/>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br/>默认值："auto"。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 560| accessibilityDescription<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 无障碍说明，用于为用户进一步说明当前组件，开发人员可为组件的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从组件本身属性与无障碍文本中了解到时。若组件既拥有文本属性又拥有无障碍说明属性，则组件被选中时，先播报组件的文本属性，再播报无障碍说明属性的内容。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 561 562## 示例 563 564### 示例1（设置分段按钮的类型） 565 566该示例通过配置SegmentButtonOptions的tab和capsule创建两种不同类型的分段按钮。 567 568```ts 569// xxx.ets 570import { 571 ItemRestriction, 572 SegmentButton, 573 SegmentButtonItemTuple, 574 SegmentButtonOptions, 575 SegmentButtonTextItem 576} from '@kit.ArkUI'; 577 578@Entry 579@Component 580struct Index { 581 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 582 buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, { 583 text: '页签按钮3' 584 }] as ItemRestriction<SegmentButtonTextItem>, 585 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 586 }) 587 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 588 buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }] as SegmentButtonItemTuple, 589 multiply: false, 590 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 591 }) 592 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 593 buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }] as SegmentButtonItemTuple, 594 multiply: true 595 }) 596 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 597 buttons: [ 598 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 599 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 600 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 601 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 602 ] as SegmentButtonItemTuple, 603 multiply: false, 604 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 605 }) 606 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 607 buttons: [ 608 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 609 { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 610 { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 611 { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 612 { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 613 ] as SegmentButtonItemTuple, 614 multiply: true 615 }) 616 @State tabSelectedIndexes: number[] = [1] 617 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 618 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 619 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 620 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 621 622 build() { 623 Row() { 624 Column() { 625 Column({ space: 25 }) { 626 SegmentButton({ options: this.tabOptions, 627 selectedIndexes: $tabSelectedIndexes }) 628 SegmentButton({ options: this.singleSelectCapsuleOptions, 629 selectedIndexes: $singleSelectCapsuleSelectedIndexes }) 630 SegmentButton({ 631 options: this.multiplySelectCapsuleOptions, 632 selectedIndexes: $multiplySelectCapsuleSelectedIndexes }) 633 SegmentButton({ options: this.iconCapsuleOptions, 634 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 635 SegmentButton({ options: this.iconTextCapsuleOptions, 636 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 637 }.width('90%') 638 }.width('100%') 639 }.height('100%') 640 } 641} 642``` 643 644 645 646### 示例2（设置分段按钮样式） 647 648该示例通过配置CommonSegmentButtonOptions实现了自定义分段按钮的文本以及背板样式。 649 650```ts 651// xxx.ets 652import { 653 ItemRestriction, 654 SegmentButton, 655 SegmentButtonItemTuple, 656 SegmentButtonOptions, 657 SegmentButtonTextItem 658} from '@kit.ArkUI'; 659 660@Entry 661@Component 662struct Index { 663 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 664 buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, { 665 text: '页签按钮3' 666 }] as ItemRestriction<SegmentButtonTextItem>, 667 backgroundColor: 'rgb(213,213,213)', 668 selectedBackgroundColor: 'rgb(112,112,112)', 669 textPadding: { 670 top: 10, 671 right: 10, 672 bottom: 10, 673 left: 10 674 }, 675 }) 676 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 677 buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }] as SegmentButtonItemTuple, 678 multiply: false, 679 fontColor: 'rgb(0,74,175)', 680 selectedFontColor: 'rgb(247,247,247)', 681 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 682 }) 683 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 684 buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }] as SegmentButtonItemTuple, 685 multiply: true, 686 fontSize: 18, 687 selectedFontSize: 18, 688 fontWeight: FontWeight.Bolder, 689 selectedFontWeight: FontWeight.Lighter, 690 }) 691 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 692 buttons: [ 693 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 694 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 695 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 696 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 697 ] as SegmentButtonItemTuple, 698 multiply: false, 699 imageSize: { width: 40, height: 40 }, 700 buttonPadding: { 701 top: 6, 702 right: 10, 703 bottom: 6, 704 left: 10 705 }, 706 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 707 }) 708 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 709 buttons: [ 710 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 711 { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 712 { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 713 { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 714 { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 715 ] as SegmentButtonItemTuple, 716 multiply: true, 717 imageSize: { width: 10, height: 10 }, 718 }) 719 @State tabSelectedIndexes: number[] = [0] 720 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 721 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 722 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 723 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 724 725 build() { 726 Row() { 727 Column() { 728 Column({ space: 20 }) { 729 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 730 SegmentButton({ 731 options: this.singleSelectCapsuleOptions, 732 selectedIndexes: $singleSelectCapsuleSelectedIndexes 733 }) 734 SegmentButton({ 735 options: this.multiplySelectCapsuleOptions, 736 selectedIndexes: $multiplySelectCapsuleSelectedIndexes 737 }) 738 SegmentButton({ 739 options: this.iconCapsuleOptions, 740 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes 741 }) 742 SegmentButton({ 743 options: this.iconTextCapsuleOptions, 744 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes 745 }) 746 }.width('90%') 747 }.width('100%') 748 }.height('100%') 749 } 750} 751``` 752 753 754 755### 示例3（分段按钮数组处理） 756 757该示例通过pop、shift、unshift等函数实现分段按钮数组的新增、删除等操作。 758 759```ts 760import { 761 SegmentButton, 762 SegmentButtonOptions, 763 SegmentButtonItemOptionsArray, 764 SegmentButtonItemTuple, 765 SegmentButtonItemOptions 766} from '@kit.ArkUI'; 767 768@Entry 769@Component 770struct Index { 771 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 772 buttons: [{ text: '1' }, { text: '2' }, { text: '3' }, 773 { text: '4' }, { text: '5' }] as SegmentButtonItemTuple, 774 multiply: false, 775 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 776 }) 777 @State capsuleSelectedIndexes: number[] = [0] 778 779 build() { 780 Row() { 781 Column() { 782 Column({ space: 10 }) { 783 SegmentButton({ options: this.singleSelectCapsuleOptions, 784 selectedIndexes: $capsuleSelectedIndexes }) 785 Button("删除第一个按钮") 786 .onClick(() => { 787 this.singleSelectCapsuleOptions.buttons.shift() 788 }) 789 Button("删除最后一个按钮") 790 .onClick(() => { 791 this.singleSelectCapsuleOptions.buttons.pop() 792 }) 793 Button("末尾增加一个按钮push") 794 .onClick(() => { 795 this.singleSelectCapsuleOptions.buttons.push({ text: 'push' }) 796 }) 797 Button("开头增加一个按钮unshift") 798 .onClick(() => { 799 this.singleSelectCapsuleOptions.buttons.unshift(({ text: 'unshift' })) 800 }) 801 Button("将按钮2、3替换为splice1、splice2") 802 .onClick(() => { 803 this.singleSelectCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 804 text: 'splice1' 805 }), new SegmentButtonItemOptions({ text: 'splice2' })) 806 }) 807 Button("更改所有按钮文字") 808 .onClick(() => { 809 this.singleSelectCapsuleOptions.buttons = 810 SegmentButtonItemOptionsArray.create([{ text: 'a' }, { text: 'b' }, 811 { text: 'c' }, { text: 'd' }, { text: 'e' }]) 812 }) 813 }.width('90%') 814 }.width('100%') 815 }.height('100%') 816 } 817} 818``` 819 820 821 822### 示例4（设置镜像效果） 823该示例通过配置direction设置分段按钮的布局方向，实现镜像效果。 824 825```ts 826// xxx.ets 827import { LengthMetrics, SegmentButton, SegmentButtonOptions } from '@kit.ArkUI' 828 829 830@Entry 831@Component 832struct Index { 833 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 834 buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, { 835 text: '页签按钮3' 836 }], 837 direction: Direction.Rtl, 838 backgroundColor: Color.Green, 839 selectedBackgroundColor: Color.Orange, 840 localizedTextPadding: { 841 end: LengthMetrics.vp(10), 842 start: LengthMetrics.vp(10) 843 }, 844 }) 845 @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 846 buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }], 847 multiply: false, 848 direction: Direction.Rtl, 849 fontColor: Color.Black, 850 selectedFontColor: Color.Yellow, 851 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 852 }) 853 @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 854 buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }], 855 multiply: true, 856 direction: Direction.Rtl, 857 fontSize: 18, 858 selectedFontSize: 18, 859 fontWeight: FontWeight.Bolder, 860 selectedFontWeight: FontWeight.Lighter, 861 }) 862 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 863 buttons: [ 864 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 865 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 866 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 867 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 868 { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 869 ], 870 multiply: false, 871 direction: Direction.Rtl, 872 imageSize: { width: 40, height: 40 }, 873 localizedButtonPadding: { 874 end: LengthMetrics.vp(10), 875 start: LengthMetrics.vp(10) 876 }, 877 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 878 }) 879 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 880 buttons: [ 881 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 882 { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 883 { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 884 { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }, 885 { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') } 886 ], 887 multiply: true, 888 direction: Direction.Rtl, 889 imageSize: { width: 10, height: 10 }, 890 }) 891 @State tabSelectedIndexes: number[] = [0] 892 @State singleSelectCapsuleSelectedIndexes: number[] = [0] 893 @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1] 894 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 895 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 896 897 build() { 898 Row() { 899 Column() { 900 Column({ space: 20 }) { 901 SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes }) 902 SegmentButton({ 903 options: this.singleSelectCapsuleOptions, 904 selectedIndexes: $singleSelectCapsuleSelectedIndexes 905 }) 906 SegmentButton({ 907 options: this.multiplySelectCapsuleOptions, 908 selectedIndexes: $multiplySelectCapsuleSelectedIndexes 909 }) 910 SegmentButton({ 911 options: this.iconCapsuleOptions, 912 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes 913 }) 914 SegmentButton({ 915 options: this.iconTextCapsuleOptions, 916 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes 917 }) 918 }.width('90%') 919 }.width('100%') 920 }.height('100%') 921 } 922} 923``` 924 925 926 927### 示例5（设置无障碍朗读） 928该示例通配置accessibilityLevel、selectedIconAccessibilityText等属性实现了分段按钮的无障碍朗读功能。 929 930```ts 931// xxx.ets 932import { 933 ItemRestriction, 934 SegmentButton, 935 SegmentButtonItemTuple, 936 SegmentButtonOptions, 937 SegmentButtonTextItem, 938 SegmentButtonItemOptions 939} from '@kit.ArkUI'; 940 941@Entry 942@Component 943struct Index { 944 @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({ 945 buttons: [{ text: '页签按钮1', accessibilityLevel: 'yes', accessibilityDescription: '页签按钮1 新手提醒' }, 946 { text: '页签按钮2', accessibilityLevel: 'yes', accessibilityDescription: '页签按钮2 新手提醒' }, 947 { text: '页签按钮3', accessibilityLevel: 'yes', accessibilityDescription: '页签按钮3 新手提醒' 948 }] as ItemRestriction<SegmentButtonTextItem>, 949 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 950 }) 951 @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 952 buttons: [ 953 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 954 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 955 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem 新手提醒'}, 956 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 957 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 958 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem 新手提醒'}, 959 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 960 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 961 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem 新手提醒'}, 962 { icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 963 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 964 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconItem 新手提醒'} 965 ] as SegmentButtonItemTuple, 966 multiply: false, 967 backgroundBlurStyle: BlurStyle.BACKGROUND_THICK 968 }) 969 @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({ 970 buttons: [ 971 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 972 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 973 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem 新手提醒'}, 974 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 975 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 976 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem 新手提醒'}, 977 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 978 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 979 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem 新手提醒'}, 980 { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), iconAccessibilityText: '未选中图标无障碍文本', 981 selectedIcon: $r('sys.media.ohos_ic_public_clock'), selectedIconAccessibilityText: '选中图标无障碍文本', 982 accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonIconTextItem 新手提醒'} 983 ] as SegmentButtonItemTuple, 984 multiply: true 985 }) 986 @State tabSelectedIndexes: number[] = [1] 987 @State singleSelectIconCapsuleSelectedIndexes: number[] = [3] 988 @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2] 989 990 build() { 991 Row() { 992 Column() { 993 Column({ space: 25 }) { 994 SegmentButton({ options: this.tabOptions, 995 selectedIndexes: $tabSelectedIndexes }) 996 SegmentButton({ options: this.iconCapsuleOptions, 997 selectedIndexes: $singleSelectIconCapsuleSelectedIndexes }) 998 SegmentButton({ options: this.iconTextCapsuleOptions, 999 selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes }) 1000 Button("将按钮2、3替换为splice1、splice2") 1001 .onClick(() => { 1002 this.iconTextCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({ 1003 text: 'splice1', accessibilityLevel: 'yes', accessibilityDescription: 'SegmentButtonItemOptions 新手提醒' 1004 }), new SegmentButtonItemOptions({ text: 'splice2', icon: $r('sys.media.ohos_ic_public_email'), 1005 iconAccessibilityText: '未选中图标无障碍文本', selectedIcon: $r('sys.media.ohos_ic_public_clock'), 1006 selectedIconAccessibilityText: '选中图标无障碍文本', accessibilityLevel: 'yes', 1007 accessibilityDescription: 'SegmentButtonIconTextItem 新手提醒' })) 1008 }) 1009 }.width('90%') 1010 }.width('100%') 1011 }.height('100%') 1012 } 1013} 1014```
