鸿蒙5.0开发进阶：UI框架-ArkTS组件（SegmentButton）

于 2025-01-12 19:20:38 发布
阅读量625 收藏 26
点赞数 10
分类专栏： ArkUI ArkTS 鸿蒙开发 文章标签： harmonyos 华为 android 鸿蒙系统 前端 ArkUI ArkTS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Androidbye/article/details/145097605
版权

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

SegmentButton

分段按钮组件，包含页签类分段按钮、单选类分段按钮、多选类分段按钮。

说明

该组件及其子组件从 API Version 11 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import { SegmentButton, SegmentButtonOptions, SegmentButtonItemOptionsArray } from '@kit.ArkUI';

子组件

无

SegmentButton

SegmentButton({ options: SegmentButtonOptions, selectedIndexes: number[] })

装饰器类型：@Component

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

名称参数类型必填装饰器类型说明
optionsSegmentButtonOptions是@ObjectLink分段按钮选项。
selectedIndexesnumber[]是@Link

分段按钮的选中项编号，第一项的编号为0，之后顺序增加。

说明：

selectedIndexes使用@Link装饰器：父子双向同步，仅支持有效的按钮编号（第一个按钮编号为0，之后按顺序累加），如没有选中项可传入空数组[]。

说明

分段按钮组件不支持通用属性。分段按钮组件使用当前区域可使用的最大宽度做为组件宽度，并且根据按钮个数平均分配每个按钮宽度；分段按钮组件高度根据按钮内容（文本及图片）自动适应，其最小高度为28vp。

SegmentButtonOptions

分段按钮选项类，用于为分段按钮提供初始数据和自定义属性。

属性

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型描述
type"tab" | "capsule"分段按钮的类型。
multiplyboolean

是否可以多选。

说明：

页签类分段按钮只支持单选，设置multiply为true不生效。

buttonsSegmentButtonItemOptionsArray按钮信息，包括图标和文本信息。
fontColorResourceColor

按钮未选中态的文本颜色。

默认值：$r('sys.color.ohos_id_color_text_secondary')

selectedFontColorResourceColor

按钮选中态的文本颜色。

type为"tab"时，默认值为$r('sys.color.ohos_id_color_text_primary')。

type为"capsule"时，默认值为$r('sys.color.ohos_id_color_foreground_contrary')。

fontSizeDimensionNoPercentage

按钮未选中态的字体大小（不支持百分比设置）。

默认值：$r('sys.float.ohos_id_text_size_body2')

selectedFontSizeDimensionNoPercentage

按钮选中态的字体大小（不支持百分比设置）。

默认值：$r('sys.float.ohos_id_text_size_body2')

fontWeightFontWeight

按钮未选中态的字体粗细。

默认值：FontWeight.Regular

selectedFontWeightFontWeight

按钮选中态的字体粗细。

默认值：FontWeight.Medium。

backgroundColorResourceColor

底板颜色。

默认值：$r('sys.color.ohos_id_color_button_normal')

selectedBackgroundColorResourceColor

按钮选中态底板颜色。

type为"tab"时，默认值为$r('sys.color.ohos_id_color_foreground_contrary')。

type为"capsule"时，默认值为$r('sys.color.ohos_id_color_emphasize')。

imageSizeSizeOptions

图片尺寸，默认值：{ width: 24, height: 24 }。

说明：

imageSize属性对仅图标按钮和图标+文本按钮生效，对仅文字按钮无效果。

buttonPaddingPadding | Dimension按钮内边距，默认值：仅图标按钮和仅文字按钮{ top: 4, right: 8, bottom: 4, left: 8 }，图标+文本按钮{ top: 6, right: 8, bottom: 6, left: 8 }。
textPaddingPadding | Dimension

文本内边距。

默认值：0

localizedButtonPadding12+LocalizedPadding按钮内边距，默认值：仅图标按钮和仅文字按钮{ 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) }。
localizedTextPadding12+LocalizedPadding

文本内边距。

默认值：0

direction12+Direction

布局方向。

默认值：Direction.Auto

backgroundBlurStyleBlurStyle

背景模糊材质。

默认值：BlurStyle.NONE

constructor

constructor(options: TabSegmentButtonOptions | CapsuleSegmentButtonOptions)

构造函数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

名称参数类型必填说明
optionsTabSegmentButtonOptions | CapsuleSegmentButtonOptions是页签类或者单选类/多选类分段按钮信息。

tab

static tab(options: TabSegmentButtonConstructionOptions): SegmentButtonOptions

创建页签类的SegmentButtonOptions。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

名称参数类型必填说明
optionsTabSegmentButtonConstructionOptions是页签类分段按钮信息。

返回值：

类型说明
SegmentButtonOptions分段按钮选项。

capsule

static capsule(options: CapsuleSegmentButtonConstructionOptions): SegmentButtonOptions

创建单选类/多选类的SegmentButtonOptions。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

名称参数类型必填说明
optionsCapsuleSegmentButtonConstructionOptions是单选类/多选类分段按钮信息。

返回值：

类型说明
SegmentButtonOptions分段按钮选项。

DimensionNoPercentage

不支持百分比类型的长度的联合类型。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

类型说明
PX长度类型，用于描述以px像素单位为单位的长度。
VP长度类型，用于描述以vp像素单位为单位的长度。
FP长度类型，用于描述以fp像素单位为单位的长度。
LPX长度类型，用于描述以lpx像素单位为单位的长度。
Resource资源引用类型，用于设置组件属性的值。

CommonSegmentButtonOptions

用于定义分段按钮组件可自定义的属性。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性：

属性类型描述
fontColorResourceColor

按钮未选中态的文本颜色。

默认值：$r('sys.color.ohos_id_color_text_secondary')

selectedFontColorResourceColor

按钮选中态的文本颜色。

type为"tab"时，默认值为$r('sys.color.ohos_id_color_text_primary')。

type为"capsule"时，默认值为$r('sys.color.ohos_id_color_foreground_contrary')。

fontSizeDimensionNoPercentage

按钮未选中态的字体大小（不支持百分比设置）。

默认值：$r('sys.float.ohos_id_text_size_body2')

selectedFontSizeDimensionNoPercentage

按钮选中态的字体大小（不支持百分比设置）。

默认值：$r('sys.float.ohos_id_text_size_body2')

fontWeightFontWeight

按钮未选中态的字体粗细。

默认值：FontWeight.Regular

selectedFontWeightFontWeight

按钮选中态的字体粗细。

默认值：FontWeight.Medium。

backgroundColorResourceColor

底板颜色。

默认值：$r('sys.color.ohos_id_color_button_normal')

selectedBackgroundColorResourceColor

按钮选中态底板颜色。

type为"tab"时，默认值为$r('sys.color.ohos_id_color_foreground_contrary')。

type为"capsule"时，默认值为$r('sys.color.ohos_id_color_emphasize')。

imageSizeSizeOptions

图片尺寸，默认值：{ width: 24, height: 24 }。

说明：

imageSize属性对仅图标按钮和图标+文本按钮生效，对仅文字按钮无效果。

buttonPaddingPadding | Dimension按钮内边距，默认值：仅图标按钮和仅文字按钮{ top: 4, right: 8, bottom: 4, left: 8 }，图标+文本按钮{ top: 6, right: 8, bottom: 6, left: 8 }。
textPaddingPadding | Dimension

文本内边距。

默认值：0

localizedButtonPadding12+LocalizedPadding按钮内边距，默认值：仅图标按钮和仅文字按钮{ 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) }。
localizedTextPadding12+LocalizedPadding

文本内边距。

默认值：0

direction12+Direction

布局方向。

默认值：Direction.Auto

backgroundBlurStyleBlurStyle

背景模糊材质。

默认值：BlurStyle.NONE

TabSegmentButtonConstructionOptions

用于构建页签类的SegmentButtonOptions对象。

继承CommonSegmentButtonOptions。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型必填描述
buttonsItemRestriction<SegmentButtonTextItem>是按钮信息。

CapsuleSegmentButtonConstructionOptions

用于构建单选类/多选类的SegmentButtonOptions对象。

继承CommonSegmentButtonOptions。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型必填描述
buttonsSegmentButtonItemTuple是按钮信息。
multiplyboolean否是否可以多选，默认值：false。

ItemRestriction

用于保存按钮信息的元组。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

取值范围说明
ItemRestriction<T> = [T, T, T?, T?, T?]表示包含2~5个相同类型元素的元组。

说明

分段按钮组件仅支持2到5个按钮。

SegmentButtonItemTuple

用于保存按钮信息的元组的联合类型。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

取值范围说明
ItemRestriction<SegmentButtonTextItem>仅文本按钮信息的元组。
ItemRestriction<SegmentButtonIconItem>仅图标按钮信息的元组。
ItemRestriction<SegmentButtonIconTextItem>图标+文本按钮信息的元组。

SegmentButtonItemArray

用于保存按钮信息的数组的联合类型。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

取值范围说明
Array<SegmentButtonTextItem>仅文本按钮信息的数组。
Array<SegmentButtonIconItem>仅图标按钮信息的数组。
Array<SegmentButtonIconTextItem>图标+文本按钮信息的数组。

SegmentButtonItemOptionsArray

用于保存按钮信息的数组。

说明

分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息。

constructor

constructor(elements: SegmentButtonItemTuple)

构造函数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

名称参数类型必填说明
elementsSegmentButtonItemTuple是按钮信息。

push

push(...items: SegmentButtonItemArray): number

在数组末尾添加新的元素，返回添加元素后数组的长度。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

名称参数类型必填说明
itemsSegmentButtonItemArray是被添加的按钮信息数组。

返回值：

类型说明
number添加元素后数组的长度。

说明

分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。

pop

pop(): SegmentButtonItemOptions | undefined

移除数组末尾最后一个元素，返回被移除的元素。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

返回值：

类型说明
SegmentButtonItemOptions | undefined被移除的元素。

说明

分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。

shift

shift(): SegmentButtonItemOptions | undefined

移除数组开头第一个元素，返回被移除的元素。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

返回值：

类型说明
SegmentButtonItemOptions | undefined被移除的元素。

说明

分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。

unshift

unshift(...items: SegmentButtonItemArray): number

在数组开头添加新的元素，返回添加元素后数组的长度。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

名称参数类型必填说明
itemsSegmentButtonItemArray是添加的按钮信息数组。

返回值：

类型说明
number添加元素后数组的长度。

说明

分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。

splice

splice(start: number, deleteCount: number, ...items: SegmentButtonItemOptions[]): SegmentButtonItemOptions[]

在数组中，删除从start位置开始的deleteCount数量的元素，并插入items中的元素，返回一个包含了被删除的元素的数组。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

名称参数类型必填说明
startnumber是删除元素的起始位置。
deleteCountnumber是删除元素的数量。
itemsSegmentButtonItemOptions[]否插入元素数组。

返回值：

类型说明
SegmentButtonItemOptions[]返回包含了被删除的元素的数组。

说明

分段按钮组件仅支持2到5个按钮，SegmentButtonItemOptionsArray只保存2到5个按钮信息，当超过按钮信息个数限制此方法无效。

create

static create(elements: SegmentButtonItemTuple): SegmentButtonItemOptionsArray

创建一个SegmentButtonItemOptionsArray对象。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

名称参数类型必填说明
elementsSegmentButtonItemTuple是按钮信息。

返回值：

类型说明
SegmentButtonItemOptionsArray创建的SegmentButtonItemOptionsArray对象。

TabSegmentButtonOptions

页签类分段按钮选项。继承自TabSegmentButtonConstructionOptions。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型描述
type"tab"类型为页签类分段按钮。

CapsuleSegmentButtonOptions

单选类/多选类分段按钮选项。继承自CapsuleSegmentButtonConstructionOptions。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型描述
type"capsule"类型为单选类/多选类分段按钮。

SegmentButtonTextItem

仅文本按钮信息。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型必填描述
textResourceStr是按钮文本。

SegmentButtonIconItem

仅图标按钮信息。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型必填描述
iconResourceStr是未选中态的按钮图标。
selectedIconResourceStr是选中态的按钮图标。

说明

未选中态图标icon与选中态图标selectedIcon都需要被设置，单独设置不生效。

SegmentButtonIconTextItem

图标+文本按钮信息。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型必填描述
iconResourceStr是未选中态的按钮图标。
selectedIconResourceStr是选中态的按钮图标。
textResourceStr是按钮文本。

说明

未选中态图标icon与选中态图标selectedIcon都需要被设置，单独设置不生效。

SegmentButtonItemOptions

分段按钮中按钮的选项。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

属性：

属性类型必填描述
iconResourceStr否未选中态的按钮图标。
selectedIconResourceStr否选中态的按钮图标。
textResourceStr否按钮文本。

constructor

constructor(options: SegmentButtonItemOptionsConstructorOptions)

构造函数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

参数：

参数名类型必填说明
optionsSegmentButtonItemOptionsConstructorOptions是分段按钮按钮选项。

SegmentButtonItemOptionsConstructorOptions

SegmentButtonItemOptions的构造参数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性类型必填描述
iconResourceStr否未选中态的按钮图标。
selectedIconResourceStr否选中态的按钮图标。
textResourceStr否按钮文本。

示例

示例1（设置分段按钮的类型）

该示例通过配置SegmentButtonOptions的tab和capsule创建两种不同类型的分段按钮。

// xxx.ets
import {
  ItemRestriction,
  SegmentButton,
  SegmentButtonItemTuple,
  SegmentButtonOptions,
  SegmentButtonTextItem
} from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
    buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, {
      text: '页签按钮3'
    }] as ItemRestriction<SegmentButtonTextItem>,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }] as SegmentButtonItemTuple,
    multiply: false,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }] as SegmentButtonItemTuple,
    multiply: true
  })
  @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }
    ] as SegmentButtonItemTuple,
    multiply: false,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }
    ] as SegmentButtonItemTuple,
    multiply: true
  })
  @State tabSelectedIndexes: number[] = [1]
  @State singleSelectCapsuleSelectedIndexes: number[] = [0]
  @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1]
  @State singleSelectIconCapsuleSelectedIndexes: number[] = [3]
  @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2]

  build() {
    Row() {
      Column() {
        Column({ space: 25 }) {
          SegmentButton({ options: this.tabOptions,
            selectedIndexes: $tabSelectedIndexes })
          SegmentButton({ options: this.singleSelectCapsuleOptions,
            selectedIndexes: $singleSelectCapsuleSelectedIndexes })
          SegmentButton({
            options: this.multiplySelectCapsuleOptions,
            selectedIndexes: $multiplySelectCapsuleSelectedIndexes })
          SegmentButton({ options: this.iconCapsuleOptions,
            selectedIndexes: $singleSelectIconCapsuleSelectedIndexes })
          SegmentButton({ options: this.iconTextCapsuleOptions,
            selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes })
        }.width('90%')
      }.width('100%')
    }.height('100%')
  }
}

示例2（设置分段按钮样式）

该示例通过配置CommonSegmentButtonOptions实现了自定义分段按钮的文本以及背板样式。

// xxx.ets
import {
  ItemRestriction,
  SegmentButton,
  SegmentButtonItemTuple,
  SegmentButtonOptions,
  SegmentButtonTextItem
} from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
    buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, {
      text: '页签按钮3'
    }] as ItemRestriction<SegmentButtonTextItem>,
    backgroundColor: 'rgb(213,213,213)',
    selectedBackgroundColor: 'rgb(112,112,112)',
    textPadding: {
      top: 10,
      right: 10,
      bottom: 10,
      left: 10
    },
  })
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }] as SegmentButtonItemTuple,
    multiply: false,
    fontColor: 'rgb(0,74,175)',
    selectedFontColor: 'rgb(247,247,247)',
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }] as SegmentButtonItemTuple,
    multiply: true,
    fontSize: 18,
    selectedFontSize: 18,
    fontWeight: FontWeight.Bolder,
    selectedFontWeight: FontWeight.Lighter,
  })
  @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }
    ] as SegmentButtonItemTuple,
    multiply: false,
    imageSize: { width: 40, height: 40 },
    buttonPadding: {
      top: 6,
      right: 10,
      bottom: 6,
      left: 10
    },
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }
    ] as SegmentButtonItemTuple,
    multiply: true,
    imageSize: { width: 10, height: 10 },
  })
  @State tabSelectedIndexes: number[] = [0]
  @State singleSelectCapsuleSelectedIndexes: number[] = [0]
  @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1]
  @State singleSelectIconCapsuleSelectedIndexes: number[] = [3]
  @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2]

  build() {
    Row() {
      Column() {
        Column({ space: 20 }) {
          SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
          SegmentButton({
            options: this.singleSelectCapsuleOptions,
            selectedIndexes: $singleSelectCapsuleSelectedIndexes
          })
          SegmentButton({
            options: this.multiplySelectCapsuleOptions,
            selectedIndexes: $multiplySelectCapsuleSelectedIndexes
          })
          SegmentButton({
            options: this.iconCapsuleOptions,
            selectedIndexes: $singleSelectIconCapsuleSelectedIndexes
          })
          SegmentButton({
            options: this.iconTextCapsuleOptions,
            selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes
          })
        }.width('90%')
      }.width('100%')
    }.height('100%')
  }
}

示例3（分段按钮数组处理）

该示例通过pop、shift、unshift等函数实现分段按钮数组的新增、删除等操作。

import {
  SegmentButton,
  SegmentButtonOptions,
  SegmentButtonItemOptionsArray,
  SegmentButtonItemTuple,
  SegmentButtonItemOptions
} from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: '1' }, { text: '2' }, { text: '3' },
      { text: '4' }, { text: '5' }] as SegmentButtonItemTuple,
    multiply: false,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State capsuleSelectedIndexes: number[] = [0]

  build() {
    Row() {
      Column() {
        Column({ space: 10 }) {
          SegmentButton({ options: this.singleSelectCapsuleOptions,
            selectedIndexes: $capsuleSelectedIndexes })
          Button("删除第一个按钮")
            .onClick(() => {
              this.singleSelectCapsuleOptions.buttons.shift()
            })
          Button("删除最后一个按钮")
            .onClick(() => {
              this.singleSelectCapsuleOptions.buttons.pop()
            })
          Button("末尾增加一个按钮push")
            .onClick(() => {
              this.singleSelectCapsuleOptions.buttons.push({ text: 'push' })
            })
          Button("开头增加一个按钮unshift")
            .onClick(() => {
              this.singleSelectCapsuleOptions.buttons.unshift(({ text: 'unshift' }))
            })
          Button("将按钮2、3替换为splice1、splice2")
            .onClick(() => {
              this.singleSelectCapsuleOptions.buttons.splice(1, 2, new SegmentButtonItemOptions({
                text: 'splice1'
              }), new SegmentButtonItemOptions({ text: 'splice2' }))
            })
          Button("更改所有按钮文字")
            .onClick(() => {
              this.singleSelectCapsuleOptions.buttons =
              SegmentButtonItemOptionsArray.create([{ text: 'a' }, { text: 'b' },
                { text: 'c' }, { text: 'd' }, { text: 'e' }])
            })
        }.width('90%')
      }.width('100%')
    }.height('100%')
  }
}

示例4（设置镜像效果）

该示例通过配置direction设置分段按钮的布局方向，实现镜像效果。

// xxx.ets
import { LengthMetrics, SegmentButton, SegmentButtonOptions } from '@kit.ArkUI'



@Entry
@Component
struct Index {
  @State tabOptions: SegmentButtonOptions = SegmentButtonOptions.tab({
    buttons: [{ text: '页签按钮1' }, { text: '页签按钮2' }, {
      text: '页签按钮3'
    }],
    direction: Direction.Rtl,
    backgroundColor: Color.Green,
    selectedBackgroundColor: Color.Orange,
    localizedTextPadding: {
      end: LengthMetrics.vp(10),
      start: LengthMetrics.vp(10)
    },
  })
  @State singleSelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: '单选按钮1' }, { text: '单选按钮2' }, { text: '单选按钮3' }],
    multiply: false,
    direction: Direction.Rtl,
    fontColor: Color.Black,
    selectedFontColor: Color.Yellow,
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State multiplySelectCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [{ text: '多选按钮1' }, { text: '多选按钮2' }, { text: '多选按钮3' }],
    multiply: true,
    direction: Direction.Rtl,
    fontSize: 18,
    selectedFontSize: 18,
    fontWeight: FontWeight.Bolder,
    selectedFontWeight: FontWeight.Lighter,
  })
  @State iconCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }
    ],
    multiply: false,
    direction: Direction.Rtl,
    imageSize: { width: 40, height: 40 },
    localizedButtonPadding: {
      end: LengthMetrics.vp(10),
      start: LengthMetrics.vp(10)
    },
    backgroundBlurStyle: BlurStyle.BACKGROUND_THICK
  })
  @State iconTextCapsuleOptions: SegmentButtonOptions = SegmentButtonOptions.capsule({
    buttons: [
      { text: '图标1', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标2', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标3', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标4', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') },
      { text: '图标5', icon: $r('sys.media.ohos_ic_public_email'), selectedIcon: $r('sys.media.ohos_ic_public_clock') }
    ],
    multiply: true,
    direction: Direction.Rtl,
    imageSize: { width: 10, height: 10 },
  })
  @State tabSelectedIndexes: number[] = [0]
  @State singleSelectCapsuleSelectedIndexes: number[] = [0]
  @State multiplySelectCapsuleSelectedIndexes: number[] = [0, 1]
  @State singleSelectIconCapsuleSelectedIndexes: number[] = [3]
  @State multiplySelectIconTextCapsuleSelectedIndexes: number[] = [1, 2]

  build() {
    Row() {
      Column() {
        Column({ space: 20 }) {
          SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
          SegmentButton({
            options: this.singleSelectCapsuleOptions,
            selectedIndexes: $singleSelectCapsuleSelectedIndexes
          })
          SegmentButton({
            options: this.multiplySelectCapsuleOptions,
            selectedIndexes: $multiplySelectCapsuleSelectedIndexes
          })
          SegmentButton({
            options: this.iconCapsuleOptions,
            selectedIndexes: $singleSelectIconCapsuleSelectedIndexes
          })
          SegmentButton({
            options: this.iconTextCapsuleOptions,
            selectedIndexes: $multiplySelectIconTextCapsuleSelectedIndexes
          })
        }.width('90%')
      }.width('100%')
    }.height('100%')
  }
}

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值