HarmonyOS 鸿蒙Next SegmentButton组件如何实现多个选项的快速切换，并保持UI的一致性和流畅性？

// xxx.ets
import {
  ItemRestriction,
  SegmentButton,
  SegmentButtonItemTuple,
  SegmentButtonOptions,
  SegmentButtonTextItem
} from '[@ohos](/user/ohos).arkui.advanced.SegmentButton'
@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%’)
}
}