HarmonyOS 鸿蒙Next @ohos.ArkUI.advanced.SegmentButton (分段按钮) 如何触发点击事件

HarmonyOS 鸿蒙Next @ohos.ArkUI.advanced.SegmentButton (分段按钮) 如何触发点击事件

HarmonyOS @ohos.ArkUI.advanced.SegmentButton (分段按钮) 如何触发点击事件

2 回复
可以参考下面demo 
import {
  ItemRestriction,
  SegmentButton,
  SegmentButtonItemTuple,
  SegmentButtonOptions,
  SegmentButtonTextItem
} from '@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 tf: boolean = true
@State @Watch(‘onSegmentButtonChange’) tabSelectedIndexes: number[] = [0]


onSegmentButtonChange() {
this.tf = !this.tf
console.log(选中按钮索引 -- ${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tabSelectedIndexes});
}


aboutToAppear(): void {
console.log(“122233”)
}


build() {
Row() {
Column() {
Column({ space: 25 }) {
SegmentButton({ options: this.tabOptions, selectedIndexes: $tabSelectedIndexes })
TextInput({ text: ${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tabSelectedIndexes} }).enabled(this.tf)
}.width(‘90%’)
}.width(‘100%’)
}.height(‘100%’)
}
}

更多关于HarmonyOS 鸿蒙Next @ohos.ArkUI.advanced.SegmentButton (分段按钮) 如何触发点击事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS的ArkUI框架中，SegmentButton（分段按钮）的点击事件可以通过设置点击事件监听器来触发。以下是实现这一功能的基本步骤：

  1. 创建SegmentButton： 首先，在你的页面中创建一个SegmentButton组件。例如：

    [@Entry](/user/Entry)
[@Component](/user/Component)
struct MyComponent {
    @State segmentValue: string = "Option1";

    build() {
        Column() {
            SegmentButton({ value: this.segmentValue, onChange: this.segmentChanged }) {
                SegmentOption("Option1"),
                SegmentOption("Option2"),
                SegmentOption("Option3")
            }
        }.padding(20)
    }

    segmentChanged(value: string) {
        console.log('Selected segment:', value);
        this.segmentValue = value;
    }
}

  2. 设置点击事件监听器： 在SegmentButton组件中，通过onChange属性绑定一个方法（如上面的segmentChanged方法），该方法会在分段按钮的选项被点击时调用，并接收被点击选项的值作为参数。

  3. 处理事件： 在segmentChanged方法中，你可以添加处理点击事件的逻辑，例如更新状态、显示信息等。

以上步骤应该能帮助你实现SegmentButton的点击事件触发。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部