HarmonyOS 鸿蒙Next Button长按问题

HarmonyOS 鸿蒙Next Button长按问题 Button长按和取消想变化按钮图标，如何实现？

6 回复 
@Entry
@Component
struct Index {
  // 定义一个状态变量来存储当前图标路径
  private iconSrc: string = $r('app.media.icon_normal')

  build() {
    Stack({ alignContent: FlexAlign.Center, justifyContent: FlexAlign.Center }) {
      Button() {
        // 使用 Image 组件显示图标
        Image(this.iconSrc)
          .width(50)
          .height(50)
      }
      .onPress(() => {
        // 按下时切换图标
        this.iconSrc = $r('app.media.icon_pressed')
      })
      .onRelease(() => {
        // 抬起时恢复图标
        this.iconSrc = $r('app.media.icon_normal')
      })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next Button长按问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Button组件没有onPress和onRelease的属性啊。

@Entry @Component struct Index { // 定义一个状态变量来存储当前图标路径 private iconSrc: string = $r(‘app.media.icon_normal’)

build() { Stack({ alignContent: FlexAlign.Center, justifyContent: FlexAlign.Center }) { Button() { // 使用 Image 组件显示图标 icon } .onTouch((event) => { if (event.type === TouchType.Down) { // 按下时切换图标 this.iconSrc = $r(‘app.media.icon_pressed’) } else if (event.type === TouchType.Up) { // 抬起时恢复图标 this.iconSrc = $r(‘app.media.icon_normal’) } return false }) } .width(‘100%’) .height(‘100%’) } }

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

@Entry
@Component
struct TestPage {
  @State count:number = 0
  @State isShow:boolean = true
  aboutToAppear(): void {
  }
  build() {
    Column({space:12}){
      Button() {
        Row(){
          Image(this.isShow?$r('app.media.foreground'):$r('app.media.startIcon'))
            .width(55).height(55)
            .draggable(false)
          Text(this.count.toString())
            .fontWeight(500)
        }
      }.width(145).height(75).backgroundColor(Color.Green)
      .margin({top:50})
        .gesture(
          // 绑定可以重复触发的LongPressGesture
          LongPressGesture({ repeat: true,duration:1300 })
            .onAction((event: GestureEvent|undefined) => {
              if(event){
                if (event.repeat) {
                  this.isShow = false
                  this.count++;
                }
              }
            })
            .onActionEnd(() => {
              this.count = 0;
            })
        )
      .gesture(
        TapGesture({ count: 1 })
          .onAction((event: GestureEvent|undefined) => {
            if(event){
              if (!this.isShow) {
                this.isShow = true
              }
            }
          }))
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在HarmonyOS中，Next Button的长按事件可以通过onLongPress方法进行处理。你需要在UI组件中定义onLongPress回调函数，以响应用户的长按操作。示例代码如下：

import { Button, ButtonType } from '@ohos.arkui.advanced';
import { LongPressGesture, Gesture } from '@ohos.arkui.gesture';

@Entry
@Component
struct NextButtonExample {
  build() {
    Column() {
      Button('Next', { type: ButtonType.Normal })
        .onClick(() => {
          console.log('Button clicked');
        })
        .gesture(
          LongPressGesture({ repeat: true })
            .onAction(() => {
              console.log('Button long pressed');
            })
        )
    }
  }
}

在这段代码中，LongPressGesture用于监听长按事件，onAction回调函数将在用户长按按钮时触发。你可以根据需要在onAction中执行相应的逻辑。

回到顶部