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