1# SegmentButtonV2 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 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 导入模块 16 17``` 18import { TabSegmentButtonV2, CapsuleSegmentButtonV2, MultiCapsuleSegmentButtonV2, SegmentButtonV2Items } from '@kit.ArkUI'; 19``` 20 21## 子组件 22 23无 24 25## 属性 26 27不支持[通用属性](ts-component-general-attributes.md)。 28 29## 事件 30 31不支持[通用事件](ts-component-general-events.md)。 32 33## TabSegmentButtonV2 34 35```ts 36TabSegmentButtonV2({ 37 items: SegmentButtonV2Items, 38 selectedIndex: number, 39 $selectedIndex?: OnSelectedIndexChange, 40 onItemClicked?: Callback<number>, 41 itemMinFontScale?: number | Resource, 42 itemMaxFontScale?: number | Resource, 43 itemSpace?: LengthMetrics, 44 itemFontSize?: LengthMetrics, 45 itemSelectedFontSize?: LengthMetrics, 46 itemFontColor?: ColorMetrics, 47 itemSelectedFontColor?: ColorMetrics, 48 itemFontWeight?: FontWeight, 49 itemSelectedFontWeight?: FontWeight, 50 itemBorderRadius?: LengthMetrics, 51 itemSelectedBackgroundColor?: ColorMetrics, 52 itemIconSize?: SizeT<LengthMetrics>, 53 itemIconFillColor?: ColorMetrics, 54 itemSelectedIconFillColor?: ColorMetrics, 55 itemSymbolFontSize?: LengthMetrics, 56 itemSymbolFontColor?: ColorMetrics, 57 itemSelectedSymbolFontColor?: ColorMetrics, 58 itemMinHeight?: LengthMetrics, 59 itemPadding?: LocalizedPadding, 60 itemShadow?: ShadowOptions | ShadowStyle, 61 buttonBackgroundColor?: ColorMetrics, 62 buttonBackgroundBlurStyle?: BlurStyle, 63 buttonBackgroundBlurStyleOptions?: BackgroundBlurStyleOptions, 64 buttonBackgroundEffect?: BackgroundEffectOptions, 65 buttonBorderRadius?: LengthMetrics, 66 buttonMinHeight?: LengthMetrics, 67 buttonPadding?: LengthMetrics, 68 languageDirection?: Direction 69}) 70``` 71 72**装饰器类型：** @ComponentV2 73 74**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 75 76**系统能力：** SystemCapability.ArkUI.ArkUI.Full 77 78**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 79 80| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 81| -------------------------------- | ------------------------------------------------------------ | ---- | ------------------ | ------------------------------------------------------------ | 82| items | [SegmentButtonV2Items](#segmentbuttonv2items) | 是 | @Require<br>@Param | 配置分段按钮的选项集合信息。 | 83| selectedIndex | number | 是 | @Require<br>@Param | 配置分段按钮被选中的选项下标，第一项的编号为0，之后顺序增加。 | 84| $selectedIndex | [OnSelectedIndexChange](#onselectedindexchange) | 否 | @Event | 配置分段按钮选中项变更时触发的回调函数。 | 85| onItemClicked | Callback\<number> | 否 | @Event | 配置分段按钮选项被单击时触发的回调函数。 | 86| buttonBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮背板颜色。<br>默认值：`$r('sys.color.segment_button_v2_tab_button_background')` | 87| buttonBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | @Param | 配置分段按钮背板模糊材质。<br>默认值：undefined | 88| buttonBackgroundBlurStyleOptions | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10对象说明) | 否 | @Param | 配置分段按钮背板模糊材质配置参数。<br>默认值：undefined | 89| buttonBackgroundEffect | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | 否 | @Param | 配置分段按钮背板模糊配置参数。<br>默认值：undefined | 90| buttonBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮背板的圆角大小。<br>取值范围：[0, +∞) <br>默认值：`$r('sys.float.segment_button_v2_background_corner_radius')` | 91| buttonMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮最小高度。<br>取值范围：[0, +∞) <br>默认值：只有纯文本或者纯图标选项时：`$r('sys.float.segment_button_v2_singleline_background_height')`；有图文混合的选项时：`$r('sys.float.segment_button_v2_doubleline_background_height')` | 92| buttonPadding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮内边距。<br>取值范围：[0, +∞)<br>默认值：`$r('sys.float.padding_level1')` | 93| itemSelectedBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项背景颜色。<br>默认值：`$r('sys.color.segment_button_v2_tab_selected_item_background')` | 94| itemMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项最小高度。<br>取值范围：[0, +∞)<br>默认值：<br>只有纯文本或者纯图标选项时：`$r('sys.float.segment_button_v2_singleline_selected_height')`；有图文混合的选项时：`$r('sys.float.segment_button_v2_doubleline_selected_height')` | 95| itemPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | @Param | 配置分段按钮选项内边距。<br> 默认值：`{ top: LengthMetrics.resource($r('sys.float.padding_level2')), bottom: LengthMetrics.resource($r('sys.float.padding_level2')), start: LengthMetrics.resource($r('sys.float.padding_level4')), end: LengthMetrics.resource($r('sys.float.padding_level4')) }` | 96| itemShadow | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明) | 否 | @Param | 配置分段按钮选项阴影。<br>默认值：ShadowStyle.OUTER_DEFAULT_XS | 97| itemSpace | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项之间的间隔。<br>取值范围：[0, +∞)<br>默认值：`LengthMetrics.vp(0)`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。 | 98| itemMinFontScale | number \| [Resource](ts-types.md#resource) | 否 | @Param | 配置分段按钮选项文字大小的最小字体缩放倍数。<br>取值范围：[0, 1]<br>默认值：0<br>**说明：** <br>设置的值小于 0 时，按值为 0 处理，设置的值大于 1，按值为 1 处理，异常值默认不生效。 | 99| itemMaxFontScale | number \| [Resource](ts-types.md#resource) | 否 | @Param | 配置分段按钮选项文字大小的最大放大倍数。<br>取值范围：[1, 2]<br>默认值：1<br>**说明：** <br>设置的值小于 1 时，按值为 1 处理，设置的值大于 2，按值为 2 处理，异常值默认不生效。 | 100| itemFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮非选中选项的字体大小。<br>取值范围：[0, +∞)<br>默认值：`14fp`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。<br>items设置textModifier的fontSize属性值时，itemFontSize不生效。 | 101| itemSelectedFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选中项的字体大小。<br>取值范围：[0, +∞)<br>默认值：`14fp`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。<br/>items设置textModifier的fontSize属性值时，itemSelectedFontSize不生效。 | 102| itemFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中选项的字体颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置textModifier的fontColor属性值时，itemFontColor不生效。 | 103| itemSelectedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中项的字体颜色。<br>默认值：`$r('sys.color.font_primary')`<br>**说明：**<br>items设置textModifier的fontColor属性值时，itemSelectedFontColor不生效。 | 104| itemFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | @Param | 配置分段按钮非选中选项的字体字重。<br>默认值：FontWeight.Medium<br>**说明：**<br>items设置textModifier的fontWeight属性值时，itemFontWeight不生效。 | 105| itemSelectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | @Param | 配置分段按钮选中项的字体字重。<br>默认值：FontWeight.Medium<br>**说明：**<br>items设置textModifier的fontWeight属性值时，itemSelectedFontWeight不生效。 | 106| itemBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项的圆角大小。<br>取值范围：[0, +∞)<br>默认值：`$r('sys.float.segment_button_v2_selected_corner_radius')` | 107| itemIconSize | [SizeT](../js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)> | 否 | @Param | 配置分段按钮选项中Image类型的图标大小。<br>取值范围：[0, +∞)<br>默认值：`{ width: LengthMetrics.vp(24), height: LengthMetrics.vp(24) }`<br>**说明：**<br>items设置iconModifier的width、height属性值时，itemIconSize不生效。 | 108| itemIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项图标颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置iconModifier的fillColor属性值时，itemIconFillColor不生效。 | 109| itemSelectedIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项图标颜色。<br>默认值：`$r('sys.color.font_primary')`<br>**说明：**<br/>items设置iconModifier的fillColor属性值时，itemSelectedIconFillColor不生效。 | 110| itemSymbolFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项中HM Symbol类型图标大小。<br>取值范围：[0, +∞)<br>默认值：`20fp`<br>**说明：**<br>不支持设置百分比类型，异常值按默认值处理。<br>items设置symbolModifier的fontSize属性值时，itemSymbolFontSize不生效。 | 111| itemSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中选项HM Symbol类型图标的颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置symbolModifier的fontColor属性值时，itemSymbolFontColor不生效。 | 112| itemSelectedSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中选项的HM Symbol类型图标颜色。<br>默认值：`$r('sys.color.font_primary')`<br>**说明：**<br/>items设置symbolModifier的fontColor属性值时，itemSelectedSymbolFontColor不生效。 | 113| languageDirection | [Direction](ts-appendix-enums.md#direction) | 否 | @Param | 配置分段按钮的布局方向。<br>默认值：Direction.Auto | 114 115## CapsuleSegmentButtonV2 116 117```ts 118CapsuleSegmentButtonV2({ 119 items: SegmentButtonV2Items, 120 selectedIndex: number, 121 $selectedIndex?: OnSelectedIndexChange, 122 onItemClicked?: Callback<number>, 123 itemMinFontScale?: number | Resource, 124 itemMaxFontScale?: number | Resource, 125 itemSpace?: LengthMetrics, 126 itemFontSize?: LengthMetrics, 127 itemSelectedFontSize?: LengthMetrics, 128 itemFontColor?: ColorMetrics, 129 itemSelectedFontColor?: ColorMetrics, 130 itemFontWeight?: FontWeight, 131 itemSelectedFontWeight?: FontWeight, 132 itemBorderRadius?: LengthMetrics, 133 itemSelectedBackgroundColor?: ColorMetrics, 134 itemIconSize?: SizeT<LengthMetrics>, 135 itemIconFillColor?: ColorMetrics, 136 itemSelectedIconFillColor?: ColorMetrics, 137 itemSymbolFontSize?: LengthMetrics, 138 itemSymbolFontColor?: ColorMetrics, 139 itemSelectedSymbolFontColor?: ColorMetrics, 140 itemMinHeight?: LengthMetrics, 141 itemPadding?: LocalizedPadding, 142 itemShadow?: ShadowOptions | ShadowStyle, 143 buttonBackgroundColor?: ColorMetrics, 144 buttonBackgroundBlurStyle?: BlurStyle, 145 buttonBackgroundBlurStyleOptions?: BackgroundBlurStyleOptions, 146 buttonBackgroundEffect?: BackgroundEffectOptions, 147 buttonBorderRadius?: LengthMetrics, 148 buttonMinHeight?: LengthMetrics, 149 buttonPadding?: LengthMetrics, 150 languageDirection?: Direction 151}) 152``` 153 154**装饰器类型：** @ComponentV2 155 156**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 161 162| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 163| -------------------------------- | ------------------------------------------------------------ | ---- | ------------------ | ------------------------------------------------------------ | 164| items | [SegmentButtonV2Items](#segmentbuttonv2items) | 是 | @Require<br>@Param | 配置分段按钮的选项集合信息。 | 165| selectedIndex | number | 是 | @Require<br>@Param | 配置分段按钮被选中的选项下标，第一项的编号为0，之后顺序增加。 | 166| $selectedIndex | [OnSelectedIndexChange](#onselectedindexchange) | 否 | @Event | 配置分段按钮选中项变更时的回调函数。 | 167| onItemClicked | Callback\<number> | 否 | @Event | 配置分段按钮选项被单击时触发的回调函数。 | 168| buttonBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮背板颜色。<br>默认值：`$r('sys.color.segment_button_v2_tab_button_background')` | 169| buttonBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | @Param | 配置分段按钮背板模糊材质。<br>默认值：undefined | 170| buttonBackgroundBlurStyleOptions | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10对象说明) | 否 | @Param | 配置分段按钮背板模糊材质配置参数。<br>默认值：undefined | 171| buttonBackgroundEffect | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | 否 | @Param | 配置分段按钮背板模糊配置参数。<br>默认值：undefined | 172| buttonBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮背板的圆角大小。<br>取值范围：[0, +∞) <br>默认值：`$r('sys.float.segment_button_v2_background_corner_radius')` | 173| buttonMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮最小的高度。<br>取值范围：[0, +∞) <br>默认值：只有纯文本或者纯图标选项时：`$r('sys.float.segment_button_v2_singleline_background_height')`；有图文混合的选项时：`$r('sys.float.segment_button_v2_doubleline_background_height')` | 174| buttonPadding | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮的内边距。<br>取值范围：[0, +∞)<br>默认值：`$r('sys.float.padding_level1')` | 175| itemSelectedBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项背景颜色。<br>默认值：`$r('sys.color.comp_background_emphasize')` | 176| itemMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项的最小高度。<br>取值范围：[0, +∞)<br>默认值：<br>只有纯文本或者纯图标选项时：`$r('sys.float.segment_button_v2_singleline_selected_height')`；有图文混合的选项时：`$r('sys.float.segment_button_v2_doubleline_selected_height')` | 177| itemPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | @Param | 配置分段按钮选项的内边距。<br>默认值：`{ top: LengthMetrics.resource($r('sys.float.padding_level2')), bottom: LengthMetrics.resource($r('sys.float.padding_level2')), start: LengthMetrics.resource($r('sys.float.padding_level4')), end: LengthMetrics.resource($r('sys.float.padding_level4')) }` | 178| itemShadow | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10枚举说明) | 否 | @Param | 配置分段按钮选项的阴影。<br>默认值：ShadowStyle.OUTER_DEFAULT_XS | 179| itemSpace | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项之间的间隔。<br>取值范围：[0, +∞)<br>默认值：`LengthMetrics.vp(0)`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。 | 180| itemMinFontScale | number \| [Resource](ts-types.md#resource) | 否 | @Param | 配置分段按钮选项文字大小的最小字体缩放倍数。<br>取值范围：[0, 1]<br>默认值：0<br>**说明：** <br>设置的值小于 0 时，按值为 0 处理，设置的值大于 1，按值为 1 处理，异常值默认不生效。 | 181| itemMaxFontScale | number \| [Resource](ts-types.md#resource) | 否 | @Param | 配置分段按钮选项文字大小的最大字体放大倍数。<br>取值范围：[1, 2]<br>默认值：1<br>**说明：** <br>设置的值小于 1 时，按值为 1 处理，设置的值大于 2，按值为 2 处理，异常值默认不生效。 | 182| itemFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮非选中的选项字体大小。<br>取值范围：[0, +∞)<br>默认值：`14fp`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。<br>items设置textModifier的fontSize属性值时，itemFontSize不生效。 | 183| itemSelectedFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选中的选项字体大小。<br>取值范围：[0, +∞)<br>默认值：`14fp`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。<br>items设置textModifier的fontSize属性值时，itemSelectedFontSize不生效。 | 184| itemFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项字体颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置textModifier的fontColor属性值时，itemFontColor不生效。 | 185| itemSelectedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项字体颜色。<br>默认值：`$r('sys.color.font_on_primary')`<br>**说明：**<br>items设置textModifier的fontColor属性值时，itemSelectedFontColor不生效。 | 186| itemFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | @Param | 配置分段按钮非选中的选项字体字重。<br>默认值：FontWeight.Medium<br>**说明：**<br>items设置textModifie的fontWeight属性值时，itemFontWeight不生效。 | 187| itemSelectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | @Param | 配置分段按钮选中的选项字体字重。<br>默认值：FontWeight.Medium<br>**说明：**<br>items设置textModifier的fontWeight属性值时，itemSelectedFontWeight不生效。 | 188| itemBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项的圆角大小。<br>取值范围：[0, +∞)<br>默认值：`$r('sys.float.segment_button_v2_selected_corner_radius')` | 189| itemIconSize | [SizeT](../js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)> | 否 | @Param | 配置分段按钮选项中Image类型图标大小。<br>取值范围：[0, +∞)<br>默认值：`{ width: LengthMetrics.vp(24), height: LengthMetrics.vp(24) }`<br>**说明：**<br>items设置iconModifier的width、height属性值时，itemIconSize不生效。 | 190| itemIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项图标颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置iconModifier的fillColor属性值时，itemIconFillColor不生效。 | 191| itemSelectedIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项图标颜色。<br>默认值：`$r('sys.color.font_on_primary')`<br>**说明：**<br>items设置iconModifier的fillColor属性值时，itemSelectedIconFillColor不生效。 | 192| itemSymbolFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项中HM Symbol类型图标大小。<br>取值范围：[0, +∞)<br>默认值：`20fp`<br>**说明：**<br>不支持设置百分比类型，异常值按默认值处理。<br>items设置symbolModifier的fontSize属性值时，itemSymbolFontSize不生效。 | 193| itemSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项中HM Symbol类型图标颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置symbolModifier的fontColor属性值时，itemSymbolFontColor不生效。 | 194| itemSelectedSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项中HM Symbol类型图标颜色。<br>默认值：`$r('sys.color.font_on_primary')`<br>**说明：**<br>items设置symbolModifier的fontColor属性值时，itemSelectedSymbolFontColor不生效。 | 195| languageDirection | [Direction](ts-appendix-enums.md#direction) | 否 | @Param | 配置分段按钮的布局方向。<br>默认值：Direction.Auto | 196 197## MultiCapsuleSegmentButtonV2 198 199```ts 200MultiCapsuleSegmentButtonV2({ 201 items: SegmentButtonV2Items, 202 selectedIndexes: number[], 203 $selectedIndexes: OnSelectedIndexesChange, 204 onItemClicked?: Callback<number>, 205 itemMinFontScale?: number | Resource, 206 itemMaxFontScale?: number | Resource, 207 itemSpace?: LengthMetrics, 208 itemFontColor?: ColorMetrics, 209 itemSelectedFontColor?: ColorMetrics, 210 itemFontSize?: LengthMetrics, 211 itemSelectedFontSize?: LengthMetrics, 212 itemFontWeight?: FontWeight, 213 itemSelectedFontWeight?: FontWeight, 214 itemBorderRadius?: LengthMetrics, 215 itemBackgroundColor?: ColorMetrics, 216 itemBackgroundEffect?: BackgroundEffectOptions, 217 itemBackgroundBlurStyle?: BlurStyle, 218 itemBackgroundBlurStyleOptions?: BackgroundBlurStyleOptions, 219 itemSelectedBackgroundColor?: ColorMetrics, 220 itemIconSize?: SizeT<LengthMetrics>, 221 itemIconFillColor?: ColorMetrics, 222 itemSelectedIconFillColor?: ColorMetrics, 223 itemSymbolFontSize?: LengthMetrics, 224 itemSymbolFontColor?: ColorMetrics, 225 itemSelectedSymbolFontColor?: ColorMetrics, 226 itemMinHeight?: LengthMetrics, 227 itemPadding?: LocalizedPadding, 228 languageDirection?: Direction 229}) 230``` 231 232**装饰器类型：** @ComponentV2 233 234**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 235 236**系统能力：** SystemCapability.ArkUI.ArkUI.Full 237 238**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 239 240| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 241| ------------------------------ | ------------------------------------------------------------ | ---- | ------------------ | ------------------------------------------------------------ | 242| items | [SegmentButtonV2Items](#segmentbuttonv2items) | 是 | @Require<br>@Param | 配置分段按钮的选项集合信息。 | 243| selectedIndexes | number[] | 是 | @Require<br>@Param | 配置分段按钮被选中的选项下标集合，第一项的编号为0，之后顺序增加。<br>**说明：**<br>仅支持有效的按钮编号（第一个按钮编号为0，之后按顺序累加），如没有选中项可传入空数组`[]`。 | 244| $selectedIndexes | [OnSelectedIndexesChange](#onselectedindexeschange) | 是 | @Event | 配置分段按钮选中项变更时的回调函数。 | 245| onItemClicked | Callback\<number> | 否 | @Event | 配置分段按钮选项被单击时触发的回调函数。 | 246| itemBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项背板颜色。<br>默认值：`$r('sys.color.segment_button_v2_multi_capsule_button_background')` | 247| itemBackgroundEffect | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | 否 | @Param | 配置分段按钮非选中的选项背板效果。 | 248| itemBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | @Param | 配置分段按钮非选中的选项背板材质。 | 249| itemBackgroundBlurStyleOptions | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10对象说明) | 否 | @Param | 配置分段按钮非选中的选项背板材质配置参数。 | 250| itemSelectedBackgroundColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项背景颜色。<br>默认值：`$r('sys.color.comp_background_emphasize')` | 251| itemMinHeight | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项的最小高度。<br>取值范围：[0, +∞)<br>默认值：<br>只有纯文本或者纯图标选项时：`$r('sys.float.segment_button_v2_singleline_selected_height')`；有图文混合的选项时：`$r('sys.float.segment_button_v2_doubleline_selected_height')` | 252| itemPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | 否 | @Param | 配置分段按钮选项的内边距。<br>默认值：`{ top: LengthMetrics.resource($r('sys.float.padding_level2')), bottom: LengthMetrics.resource($r('sys.float.padding_level2')), start: LengthMetrics.resource($r('sys.float.padding_level4')), end: LengthMetrics.resource($r('sys.float.padding_level4')) }` | 253| itemSpace | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项之间的间隔。<br>取值范围：[0, +∞)<br>默认值：`LengthMetrics.vp(1)`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。 | 254| itemMinFontScale | number \| [Resource](ts-types.md#resource) | 否 | @Param | 配置分段按钮选项文字大小的最小缩放倍数。<br>取值范围：[0, 1]<br>默认值：0<br>**说明：** <br>设置的值小于 0 时，按值为 0 处理，设置的值大于 1，按值为 1 处理，异常值默认不生效。 | 255| itemMaxFontScale | number \| [Resource](ts-types.md#resource) | 否 | @Param | 配置分段按钮选项文字大小的最大放大倍数。<br>取值范围：[1, 2]<br>默认值：1<br>**说明：** <br>设置的值小于 1 时，按值为 1 处理，设置的值大于 2，按值为 2 处理，异常值默认不生效。 | 256| itemSelectedFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选中的选项字体大小。<br>取值范围：[0, +∞)<br>默认值：`14fp`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。<br>items设置textModifier的fontSize属性值时，itemSelectedFontSize不生效。 | 257| itemFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项字体颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置textModifier的fontColor属性值时，itemFontColor不生效。 | 258| itemFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮非选中的选项字体大小。<br>取值范围：[0, +∞)<br>默认值：`14fp`<br>**说明：** <br>不支持设置百分比类型，异常值按默认值处理。<br>items设置textModifier的fontSize属性值时，itemFontSize不生效。 | 259| itemSelectedFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项字体颜色。<br>默认值：`$r('sys.color.font_on_primary')`<br>**说明：**<br>items设置textModifier的fontColor属性值时，itemSelectedFontColor不生效。 | 260| itemFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | @Param | 配置分段按钮非选中的选项字体字重。<br>默认值：FontWeight.Medium<br>**说明：**<br>items设置textModifier的fontWeight属性值时，itemFontWeight不生效。 | 261| itemSelectedFontWeight | [FontWeight](ts-appendix-enums.md#fontweight) | 否 | @Param | 配置分段按钮选中的选项字体字重。<br>默认值：FontWeight.Medium<br>**说明：**<br>items设置textModifier的fontWeight属性值时，itemSelectedFontWeight不生效。 | 262| itemBorderRadius | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项的圆角大小。<br>取值范围：[0, +∞)<br>默认值：`$r('sys.float.segment_button_v2_multi_corner_radius')` | 263| itemIconSize | [SizeT](../js-apis-arkui-graphics.md#sizett12)\<[LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)> | 否 | @Param | 配置分段按钮选项中Image类型图标大小。<br>取值范围：[0, +∞)<br>默认值：`{ width: LengthMetrics.vp(24), height: LengthMetrics.vp(24) }`<br>**说明：**<br>items设置iconModifier的width、height属性值时，itemIconSize不生效。 | 264| itemIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项图标颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置iconModifier的fillColor属性值时，itemIconFillColor不生效。 | 265| itemSelectedIconFillColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项图标颜色。<br>默认值：`$r('sys.color.font_on_primary')`<br>**说明：**<br>items设置iconModifier的fillColor属性值时，itemSelectedIconFillColor不生效。 | 266| itemSymbolFontSize | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | @Param | 配置分段按钮选项中HM Symbol类型图标大小。<br>取值范围：[0, +∞)<br>默认值：`20fp`<br>**说明：**<br>不支持设置百分比类型，异常值按默认值处理。<br>items设置symbolModifier的fontSize属性值时，itemSymbolFontSize不生效。 | 267| itemSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮非选中的选项中HM Symbol类型图标颜色。<br>默认值：`$r('sys.color.font_secondary')`<br>**说明：**<br>items设置symbolModifier的fontColor属性值时，itemSymbolFontColor不生效。 | 268| itemSelectedSymbolFontColor | [ColorMetrics](../js-apis-arkui-graphics.md#colormetrics12) | 否 | @Param | 配置分段按钮选中的选项中HM Symbol类型图标颜色。<br>默认值：`$r('sys.color.font_on_primary')`<br>**说明：**<br>items设置symbolModifier的fontColor属性值时，itemSelectedSymbolFontColor不生效。 | 269| languageDirection | [Direction](ts-appendix-enums.md#direction) | 否 | @Param | 配置分段按钮的布局方向。<br>默认值：Direction.Auto | 270 271## SegmentButtonV2Items 272 273分段按钮选项集合。 274 275继承自 Array\<[SegmentButtonV2Item](#segmentbuttonv2item)> 276 277**装饰器类型：** @ObservedV2 278 279**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 280 281**系统能力：** SystemCapability.ArkUI.ArkUI.Full 282 283**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 284 285### constructor 286 287constructor(items: SegmentButtonV2ItemOptions[]) 288 289构造函数。 290 291**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 292 293**系统能力：** SystemCapability.ArkUI.ArkUI.Full 294 295**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 296 297**参数：** 298 299| 参数名 | 类型 | 必填 | 说明 | 300| ----- | ----------------------------------------------------------------- | ---- | -------------------------- | 301| items | [SegmentButtonV2ItemOptions](#segmentbuttonv2itemoptions)[] | 是 | 分段按钮选项配置参数集合。 | 302 303### hasHybrid 304 305get hasHybrid():boolean 306 307是否支持图文混合选项。 308 309**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 310 311**系统能力：** SystemCapability.ArkUI.ArkUI.Full 312 313**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 314 315**返回值：** 316 317| 类型 | 说明 | 318| ------- | ------------------------------------------------------------ | 319| boolean | 是否支持图文混合选项。<br>true：有图文混合选项；false：无图文混合选项。 | 320 321## SegmentButtonV2Item 322 323**装饰器类型：** @ObservedV2 324 325**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 326 327**系统能力：** SystemCapability.ArkUI.ArkUI.Full 328 329**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 330 331### 属性 332 333**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 334 335**系统能力：** SystemCapability.ArkUI.ArkUI.Full 336 337**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 338 339| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 340| ------------------------ | -------------------------------------------------------------------- | ------ | ---- | ----------------------------------------------- | 341| text | [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 分段按钮选项文本。<br>默认值：undefined | 342| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 分段按钮选项图片类型图标。<br>默认值：undefined | 343| symbol | [Resource](ts-types.md#resource) | 否 | @Trace | 分段按钮选项的HM Symbol类型图标。<br>默认值：undefined | 344| enabled | boolean | 是 | @Trace | 分段按钮选项是否可用。<br>默认值：true<br>true：可用；false：不可用。 | 345| textModifier | [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Trace | 分段按钮选项文本属性样式修改器。<br>默认值：undefined | 346| iconModifier | [ImageModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Trace | 分段按钮选项图片类型图标属性的样式修改器。<br>默认值：undefined | 347| symbolModifier | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | @Trace | 分段按钮选项HM Symbol类型图标属性样式修改器。<br>默认值：undefined | 348| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 分段按钮选项的无障碍文本。<br>默认值："" | 349| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | @Trace | 分段按钮选项的无障碍说明。<br>默认值："" | 350| accessibilityLevel | string | 否 | @Trace | 分段按钮选项的[无障碍重要性](ts-universal-attributes-accessibility.md#accessibilitylevel)。<br/>默认值："auto" | 351 352> **说明** 353> 354> 1. 当配置了`symbol`和`icon` 时，`symbol`的显示优先级更高。 355> 2. 当`symbol`和`symbolModifier` 同时设置HM Symbol资源时，`symbolModifier`设置的资源具有更高的显示优先级。 356 357### constructor 358 359constructor(options: SegmentButtonV2ItemOptions) 360 361构造函数。 362 363**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 364 365**系统能力：** SystemCapability.ArkUI.ArkUI.Full 366 367**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 368 369**参数：** 370 371| 参数名 | 类型 | 必填 | 说明 | 372| ------- | --------------------------------------------------------- | ---- | ---------------------- | 373| options | [SegmentButtonV2ItemOptions](#segmentbuttonv2itemoptions) | 是 | 分段按钮选项配置参数。 | 374 375### isHybrid 376 377get isHybrid():boolean 378 379检查分段按钮选项是否已配置文本和图标。 380 381**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 382 383**系统能力：** SystemCapability.ArkUI.ArkUI.Full 384 385**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 386 387**返回值：** 388 389| 类型 | 说明 | 390| ------- | ------------------------ | 391| boolean | 选项是否有图文混合配置。 | 392 393## SegmentButtonV2ItemOptions 394 395配置分段按钮选项参数。 396 397**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 398 399**系统能力：** SystemCapability.ArkUI.ArkUI.Full 400 401**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 402 403### 属性 404 405| 名称 | 类型 | 必填 | 说明 | 406| ------------------------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 407| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 分段按钮选项文本。<br>默认值：undefined | 408| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 分段按钮选项图标。<br>默认值：undefined | 409| symbol | [Resource](ts-types.md#resource) | 否 | 分段按钮选项图标，HM Symbol类型 。<br>默认值：undefined | 410| enabled | boolean | 否 | 分段按钮选项是否可用。<br>默认值：true<br>true：分段按钮选项可用；false：分段按钮选项不可用。 | 411| textModifier | [TextModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 分段按钮选项文本属性样式修改器。<br>默认值：undefined | 412| iconModifier | [ImageModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 修改分段按钮选项图片类型的图标属性样式。<br>默认值：undefined | 413| symbolModifier | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 分段按钮选项HM Symbol类型图标属性样式修改器。<br>默认值：undefined | 414| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 分段按钮选项无障碍文本。<br>默认值："" | 415| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 分段按钮选项无障碍说明。<br>默认值："" | 416| accessibilityLevel | string | 否 | 分段按钮选项[无障碍重要性](ts-universal-attributes-accessibility.md#accessibilitylevel)。<br/>默认值："auto" | 417 418> **说明** 419> 420> 1. 当配置`symbol`和`icon`时，`symbol`的显示优先级更高。 421> 2. 当`symbol`和`symbolModifier`同时设置HM Symbol资源时，`symbolModifier`设置的资源具有更高的显示优先级。 422 423## OnSelectedIndexChange 424 425type OnSelectedIndexChange = (selectedIndex: number) => void 426 427单选分段按钮选中项变更时调用的回调函数类型。 428 429**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 430 431**系统能力：** SystemCapability.ArkUI.ArkUI.Full 432 433**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 434 435**参数：** 436 437| 参数名 | 类型 | 必填 | 说明 | 438| ------------- | ------ | ---- | ------------------ | 439| selectedIndex | number | 是 | 分段按钮选项下标。 | 440 441## OnSelectedIndexesChange 442 443type OnSelectedIndexesChange = (selectedIndexes: number[]) => void 444 445多选分段按钮选中项变更时调用的回调函数类型。 446 447**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 448 449**系统能力：** SystemCapability.ArkUI.ArkUI.Full 450 451**设备行为差异：** 该接口在Wearable设备上使用时，应用程序运行异常，异常信息中提示接口未定义，在其他设备中可正常调用。 452 453**参数：** 454 455| 参数名 | 类型 | 必填 | 说明 | 456| --------------- | -------- | ---- | ---------------------- | 457| selectedIndexes | number[] | 是 | 分段按钮选项下标集合。 | 458 459## 示例 460 461### 示例 1（页签型分段按钮） 462 463此示例说明页签型分段按钮的基本用法。 464 465```ts 466import { SegmentButtonV2Items, TabSegmentButtonV2 } from '@kit.ArkUI'; 467 468@Entry 469@ComponentV2 470struct TabSegmentButtonV2Example { 471 @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 472 { text: '手机' }, 473 { text: '平板' }, 474 { text: '2in1' }, 475 { text: '智能穿戴' }, 476 ]); 477 @Local textSelectedIndex: number = 0; 478 @Local imageItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 479 { icon: $r('sys.media.ohos_ic_public_device_phone') }, 480 { icon: $r('sys.media.ohos_ic_public_device_pad') }, 481 { icon: $r('sys.media.ohos_ic_public_device_matebook') }, 482 { icon: $r('sys.media.ohos_ic_public_device_watch') }, 483 ]); 484 @Local imageSelectedIndex: number = 0; 485 @Local symbolItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 486 { symbol: $r('sys.symbol.phone') }, 487 { symbol: $r('sys.symbol.pad') }, 488 { symbol: $r('sys.symbol.matebook') }, 489 { symbol: $r('sys.symbol.watch') }, 490 ]); 491 @Local symbolSelectedIndex: number = 0; 492 @Local hybridItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 493 { text: '手机', symbol: $r('sys.symbol.phone') }, 494 { text: '平板', symbol: $r('sys.symbol.pad') }, 495 { text: '2in1', symbol: $r('sys.symbol.matebook') }, 496 { text: '智能穿戴', symbol: $r('sys.symbol.watch') }, 497 ]); 498 @Local hybridSelectedIndex: number = 0; 499 @Local freeItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 500 { text: '年' }, 501 { text: '月' }, 502 { text: '周' }, 503 { text: '日' }, 504 { icon: $r('sys.media.ohos_ic_public_search_filled') }, 505 ]); 506 @Local freeSelectedIndex: number = 0; 507 508 build() { 509 Scroll() { 510 Column({ space: 12 }) { 511 VCard({ title: '纯文本选项' }) { 512 TabSegmentButtonV2({ 513 items: this.textItems, 514 selectedIndex: this.textSelectedIndex!!, 515 }) 516 } 517 518 VCard({ title: '纯图标选项（Image）' }) { 519 TabSegmentButtonV2({ 520 items: this.imageItems, 521 selectedIndex: this.imageSelectedIndex!!, 522 }) 523 } 524 525 VCard({ title: '纯图标选项（Symbol）' }) { 526 TabSegmentButtonV2({ 527 items: this.symbolItems, 528 selectedIndex: this.symbolSelectedIndex!!, 529 }) 530 } 531 532 VCard({ title: '图文混合选项' }) { 533 TabSegmentButtonV2({ 534 items: this.hybridItems, 535 selectedIndex: this.hybridSelectedIndex!!, 536 }) 537 } 538 539 VCard({ title: '自由选项' }) { 540 TabSegmentButtonV2({ 541 items: this.freeItems, 542 selectedIndex: this.freeSelectedIndex!!, 543 }) 544 } 545 } 546 .constraintSize({ minHeight: '100%' }) 547 .justifyContent(FlexAlign.Start) 548 .padding(16) 549 } 550 .backgroundColor('#f1f3f5') 551 .width('100%') 552 .height('100%') 553 } 554} 555 556@Builder 557function Noop() { 558} 559 560@Component 561export struct VCard { 562 @Prop 563 title: ResourceStr; 564 @BuilderParam 565 content: () => void = Noop; 566 567 build() { 568 Column({ space: 8 }) { 569 if (this.title) { 570 Text(this.title) 571 .maxLines(1) 572 .textOverflow({ overflow: TextOverflow.Ellipsis }) 573 .constraintSize({ maxWidth: '80%' }) 574 } 575 this.content() 576 } 577 .backgroundColor(Color.White) 578 .borderRadius(8) 579 .padding(8) 580 .width('100%') 581 } 582} 583``` 584 585 586 587### 示例 2（单选的胶囊型分段按钮） 588 589该示例介绍单选胶囊型分段按钮的基本用法。 590 591```ts 592import { CapsuleSegmentButtonV2, SegmentButtonV2Items } from '@kit.ArkUI'; 593 594@Entry 595@ComponentV2 596struct CapsuleSegmentButtonV2Example { 597 @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 598 { text: '手机' }, 599 { text: '平板' }, 600 { text: '2in1' }, 601 { text: '智能穿戴' }, 602 ]); 603 @Local textSelectedIndex: number = 0; 604 @Local imageItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 605 { icon: $r('sys.media.ohos_ic_public_device_phone') }, 606 { icon: $r('sys.media.ohos_ic_public_device_pad') }, 607 { icon: $r('sys.media.ohos_ic_public_device_matebook') }, 608 { icon: $r('sys.media.ohos_ic_public_device_watch') }, 609 ]); 610 @Local imageSelectedIndex: number = 0; 611 @Local symbolItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 612 { symbol: $r('sys.symbol.phone') }, 613 { symbol: $r('sys.symbol.pad') }, 614 { symbol: $r('sys.symbol.matebook') }, 615 { symbol: $r('sys.symbol.watch') }, 616 ]); 617 @Local symbolSelectedIndex: number = 0; 618 @Local hybridItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 619 { text: '手机', symbol: $r('sys.symbol.phone') }, 620 { text: '平板', symbol: $r('sys.symbol.pad') }, 621 { text: '2in1', symbol: $r('sys.symbol.matebook') }, 622 { text: '智能穿戴', symbol: $r('sys.symbol.watch') }, 623 ]); 624 @Local hybridSelectedIndex: number = 0; 625 @Local freeItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 626 { text: '年' }, 627 { text: '月' }, 628 { text: '周' }, 629 { text: '日' }, 630 { icon: $r('sys.media.ohos_ic_public_search_filled') }, 631 ]); 632 @Local freeSelectedIndex: number = 0; 633 634 build() { 635 Scroll() { 636 Column({ space: 12 }) { 637 VCard({ title: '纯文本选项' }) { 638 CapsuleSegmentButtonV2({ 639 items: this.textItems, 640 selectedIndex: this.textSelectedIndex!!, 641 }) 642 } 643 644 VCard({ title: '纯图标选项（Image）' }) { 645 CapsuleSegmentButtonV2({ 646 items: this.imageItems, 647 selectedIndex: this.imageSelectedIndex!!, 648 }) 649 } 650 651 VCard({ title: '纯图标选项（Symbol）' }) { 652 CapsuleSegmentButtonV2({ 653 items: this.symbolItems, 654 selectedIndex: this.symbolSelectedIndex!!, 655 }) 656 } 657 658 VCard({ title: '图文混合选项' }) { 659 CapsuleSegmentButtonV2({ 660 items: this.hybridItems, 661 selectedIndex: this.hybridSelectedIndex!!, 662 }) 663 } 664 665 VCard({ title: '自由选项' }) { 666 CapsuleSegmentButtonV2({ 667 items: this.freeItems, 668 selectedIndex: this.freeSelectedIndex!!, 669 }) 670 } 671 } 672 .constraintSize({ minHeight: '100%' }) 673 .justifyContent(FlexAlign.Start) 674 .padding(16) 675 } 676 .backgroundColor('#f1f3f5') 677 .width('100%') 678 .height('100%') 679 } 680} 681 682@Builder 683function Noop() { 684} 685 686@Component 687export struct VCard { 688 @Prop 689 title: ResourceStr; 690 @BuilderParam 691 content: () => void = Noop; 692 693 build() { 694 Column({ space: 8 }) { 695 if (this.title) { 696 Text(this.title) 697 .maxLines(1) 698 .textOverflow({ overflow: TextOverflow.Ellipsis }) 699 .constraintSize({ maxWidth: '80%' }) 700 } 701 this.content() 702 } 703 .backgroundColor(Color.White) 704 .borderRadius(8) 705 .padding(8) 706 .width('100%') 707 } 708} 709``` 710 711 712 713### 示例 3（多选的胶囊型分段按钮） 714 715该示例介绍多选胶囊型分段按钮的基本用法。 716 717```ts 718import { MultiCapsuleSegmentButtonV2, SegmentButtonV2Items } from '@kit.ArkUI'; 719 720@Entry 721@ComponentV2 722struct MultiCapsuleSegmentButtonV2Example { 723 @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 724 { text: '手机' }, 725 { text: '平板' }, 726 { text: '2in1' }, 727 { text: '智能穿戴' }, 728 ]); 729 @Local textSelectedIndexes: number[] = [0]; 730 @Local imageItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 731 { icon: $r('sys.media.ohos_ic_public_device_phone') }, 732 { icon: $r('sys.media.ohos_ic_public_device_pad') }, 733 { icon: $r('sys.media.ohos_ic_public_device_matebook') }, 734 { icon: $r('sys.media.ohos_ic_public_device_watch') }, 735 ]); 736 @Local imageSelectedIndexes: number[] = [0]; 737 @Local symbolItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 738 { symbol: $r('sys.symbol.phone') }, 739 { symbol: $r('sys.symbol.pad') }, 740 { symbol: $r('sys.symbol.matebook') }, 741 { symbol: $r('sys.symbol.watch') }, 742 ]); 743 @Local symbolSelectedIndexes: number[] = [0]; 744 @Local hybridItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 745 { text: '手机', symbol: $r('sys.symbol.phone') }, 746 { text: '平板', symbol: $r('sys.symbol.pad') }, 747 { text: '2in1', symbol: $r('sys.symbol.matebook') }, 748 { text: '智能穿戴', symbol: $r('sys.symbol.watch') }, 749 ]); 750 @Local hybridSelectedIndexes: number[] = [0]; 751 @Local freeItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 752 { text: '年' }, 753 { text: '月' }, 754 { text: '周' }, 755 { text: '日' }, 756 { icon: $r('sys.media.ohos_ic_public_search_filled') }, 757 ]); 758 @Local freeSelectedIndexes: number[] = [0]; 759 760 build() { 761 Scroll() { 762 Column({ space: 12 }) { 763 VCard({ title: '纯文本选项' }) { 764 MultiCapsuleSegmentButtonV2({ 765 items: this.textItems, 766 selectedIndexes: this.textSelectedIndexes!!, 767 }) 768 } 769 770 VCard({ title: '纯图标选项（Image）' }) { 771 MultiCapsuleSegmentButtonV2({ 772 items: this.imageItems, 773 selectedIndexes: this.imageSelectedIndexes!!, 774 }) 775 } 776 777 VCard({ title: '纯图标选项（Symbol）' }) { 778 MultiCapsuleSegmentButtonV2({ 779 items: this.symbolItems, 780 selectedIndexes: this.symbolSelectedIndexes!!, 781 }) 782 } 783 784 VCard({ title: '图文混合选项' }) { 785 MultiCapsuleSegmentButtonV2({ 786 items: this.hybridItems, 787 selectedIndexes: this.hybridSelectedIndexes!!, 788 }) 789 } 790 791 VCard({ title: '自由选项' }) { 792 MultiCapsuleSegmentButtonV2({ 793 items: this.freeItems, 794 selectedIndexes: this.freeSelectedIndexes!!, 795 }) 796 } 797 } 798 .constraintSize({ minHeight: '100%' }) 799 .justifyContent(FlexAlign.Start) 800 .padding(16) 801 } 802 .backgroundColor('#f1f3f5') 803 .width('100%') 804 .height('100%') 805 } 806} 807 808@Builder 809function Noop() { 810} 811 812@Component 813export struct VCard { 814 @Prop 815 title: ResourceStr; 816 @BuilderParam 817 content: () => void = Noop; 818 819 build() { 820 Column({ space: 8 }) { 821 if (this.title) { 822 Text(this.title) 823 .maxLines(1) 824 .textOverflow({ overflow: TextOverflow.Ellipsis }) 825 .constraintSize({ maxWidth: '80%' }) 826 } 827 this.content() 828 } 829 .backgroundColor(Color.White) 830 .borderRadius(8) 831 .padding(8) 832 .width('100%') 833 } 834} 835``` 836 837 838 839### 示例四（分段按钮Modifier的基本用法） 840 841 该示例介绍页签型分段按钮，单选的胶囊型分段按钮，多选的胶囊型分段按钮Modifier的基本用法。 842 843```ts 844import { 845 SegmentButtonV2Items, 846 TabSegmentButtonV2, 847 CapsuleSegmentButtonV2, 848 MultiCapsuleSegmentButtonV2, 849 TextModifier, 850 ImageModifier, 851 SymbolGlyphModifier 852} from '@kit.ArkUI'; 853 854@Entry 855@ComponentV2 856struct SegmentButtonV2Example { 857 @Local textItems: SegmentButtonV2Items = new SegmentButtonV2Items([ 858 { text: '手机', textModifier: new TextModifier().fontSize(20) }, 859 { text: '平板' }, 860 { icon: $r('sys.media.ohos_ic_public_device_phone'), iconModifier: new ImageModifier().height(17).width(17) }, 861 { icon: $r('sys.media.ohos_ic_public_device_pad') }, 862 { symbol: $r('sys.symbol.phone'), symbolModifier: new SymbolGlyphModifier().fontColor([Color.Pink]) }, 863 { symbolModifier: new SymbolGlyphModifier($r('sys.symbol.pad')).fontColor([Color.Orange]) }, 864 { symbol: $r('sys.symbol.matebook') }, 865 ]); 866 @Local textSelectedIndex: number = 0; 867 @Local freeSelectedIndex: number[] = [0]; 868 869 build() { 870 Column() { 871 VCard({ title: 'TabSegmentButtonV2' }) { 872 TabSegmentButtonV2({ 873 items: this.textItems, 874 selectedIndex: this.textSelectedIndex!!, 875 }) 876 } 877 878 VCard({ title: 'CapsuleSegmentButtonV2' }) { 879 CapsuleSegmentButtonV2({ 880 items: this.textItems, 881 selectedIndex: this.textSelectedIndex!!, 882 }) 883 } 884 885 VCard({ title: 'MultiCapsuleSegmentButtonV2' }) { 886 MultiCapsuleSegmentButtonV2({ 887 items: this.textItems, 888 selectedIndexes: this.freeSelectedIndex!!, 889 }) 890 } 891 892 } 893 .constraintSize({ minHeight: '100%' }) 894 .justifyContent(FlexAlign.Start) 895 .padding(16) 896 897 } 898} 899 900@Builder 901function Noop() { 902} 903 904@Component 905export struct VCard { 906 @Prop 907 title: ResourceStr; 908 @BuilderParam 909 content: () => void = Noop; 910 911 build() { 912 Column({ space: 8 }) { 913 if (this.title) { 914 Text(this.title) 915 .maxLines(1) 916 .textOverflow({ overflow: TextOverflow.Ellipsis }) 917 .constraintSize({ maxWidth: '80%' }) 918 } 919 this.content() 920 } 921 .backgroundColor(Color.White) 922 .borderRadius(8) 923 .padding(8) 924 .width('100%') 925 } 926} 927``` 928 929
