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