鸿蒙开发：案例集合Tabs：分段按钮组件

🎯 案例集合Tabs：分段按钮组件

🏷️ 效果图

📖 参考

SegmentButton
SegmentButtonV2

🧩 拆解

自定义分段按钮组件（V1-V2组件都可用）推荐

javascript 复制代码

@Component
export struct customSegmentButton {
  @State xLocation: number = 0

  changeXLocation(str: string) {
    if (str === '备忘') {
      this.xLocation = 0
      return
    }
    this.xLocation = (200 - 6) / 2
  }

  build() {
    Row() {
      Text('备忘')
        .borderRadius('50')
        .height(50)
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.changeXLocation('备忘')
        })
      Text('待办')
        .borderRadius('50')
        .height(50)
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.changeXLocation('待办')
        })

      Text()
        .borderRadius('50')
        .position({ x: this.xLocation })
        .height('100%')
        .width((200 - 6) / 2)
        .animation({ curve: Curve.Smooth, duration: 250 })
        .backgroundColor(Color.White)
        .zIndex(-1)
        .shadow({ radius: 20, color: '#26000000' })

    }
    .padding(3)
    .width(200)
    .height(56)
    .backgroundColor($r('sys.color.segment_button_v2_tab_button_background'))
    .borderRadius('50')
  }
}

SegmentButton（V1）不推荐

javascript 复制代码

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

/**
 * 分段按钮使用当前区域可使用的最大宽度作为组件宽度，并且根据按钮个数平均分配每个按钮宽度
 * 分段按钮高度根据按钮内容（文本及图片）自动适应，其最小高度为28vp
 */
@Component
export struct SegmentButtonV1Case {
  @State tabOptions: SegmentButtonOptions =
    SegmentButtonOptions.capsule({
      buttons: [{ text: '备忘' }, { text: '待办' }],
      buttonPadding: 3, // 整个按钮组内边距
      backgroundColor: $r('sys.color.segment_button_v2_tab_button_background'), // 整个按钮组背景
      selectedBackgroundColor: Color.White, // 选中的按钮背景色
      selectedFontColor: Color.Black, // 选中的按钮文字颜色
      fontWeight: FontWeight.Normal, // 按钮文字加粗
      fontSize: 16, // 按钮文字大小
      selectedFontSize: 16,// 选中按钮文字大小
      localizedButtonPadding: { top: new LengthMetrics(16), bottom: new LengthMetrics(16) }, // // 选中按钮内边距
    })
  @State tabSelectedIndexes: number[] = [0]

  build() {
    SegmentButton({
      options: this.tabOptions,
      selectedIndexes: $tabSelectedIndexes, // 默认选择某项的下标
      onItemClicked: (idx: number) => { // 选中某项下标
        this.getUIContext().getPromptAction().showToast({ message: `当前下标${idx}` })
      },
    })
      .width(200)

  }
}

SegmentButtonV2（V2）推荐

javascript 复制代码

import { LengthMetrics, SegmentButtonV2Items, TabSegmentButtonV2 } from "@kit.ArkUI";

@ComponentV2
export struct SegmentButtonV2Case {
  @Local textSelectedIndex: number = 0

  build() {
    TabSegmentButtonV2({
      items: new SegmentButtonV2Items([
        { text: '备忘' },
        { text: '待办' },
      ]),
      selectedIndex: this.textSelectedIndex!!, // 默认选择某项的下标
      buttonMinHeight: new LengthMetrics(50), // 整个按钮组的高度
      buttonBorderRadius: new LengthMetrics(50), // 整个按钮组的圆角
      buttonPadding: new LengthMetrics(3), // 整个按钮组的内边距
      itemMinHeight: new LengthMetrics(50), // 每个按钮的高度
      itemBorderRadius: new LengthMetrics(50), // 每个按钮的圆角
      itemFontSize: new LengthMetrics(16), // 每个按钮的文字大小
      itemSelectedFontSize: new LengthMetrics(16), // 选中按钮的文字大小
      itemSelectedFontWeight: FontWeight.Normal, // 选中按钮的文字加粗
      onItemClicked: (idx: number) => { // 选中某项下标
        this.getUIContext().getPromptAction().showToast({ message: `当前下标${idx}` })
      },
    })
      .width(200)
  }
}

🌍 案例集合Tabs

🌸🌼🌺