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