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