HarmonyOS 鸿蒙Next 按压态如何传递给子组件

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 按压态如何传递给子组件

Stack() {
Button()
if (this.boosting) {
TextTimer({ isCountDown: false, count: this.boostingTime, controller: this.textTimerController })
.format(this.format)
.fontSize(14)
.fontWeight(600)
.height(18)
.fontColor($r('app.color.brand_normal'))
}

Row() {
Image($r('app.media.lightning'))
.objectFit(ImageFit.Contain)
.height(14)
Text($r('app.string.boost'))
.margin({ left: 4 })
.fontWeight(600)
.fontColor($r('app.color.white'))
.fontSize(14)
.height(18)
.width(28)
}
.justifyContent(FlexAlign.SpaceBetween)
}.onClick((event) => {
if (this.onClickEvent) {
this.onClickEvent(event)
}
})
.stateStyles( {
normal: { .linearGradient({direction: GradientDirection.Right, colors: [[this.normalBeginColor, 0.0], [this.normalEndColor, 1.0]]}) },
pressed: { .linearGradient({direction: GradientDirection.Right, colors: [[this.pressedBeginColor, 0.0], [this.pressedEndColor, 1.0]]}) }
})

上面个组件，Stack()的pressed状态怎么传递给Button？


更多关于HarmonyOS 鸿蒙Next 按压态如何传递给子组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

多态样式的状态是不可以传递的， 手指按下的时候又down事件，先到子组件button, 再到父组件Stack上的， down事件触发按压态。以下是一个简单示例，demo如下：


@Entry
@Component
struct TabsExample {
  @State status: string = 'unPressed'

  build() {
    Column() {
      Stack() {
        Button(this.status).onTouch((e: TouchEvent) => {
          if (e.type === TouchType.Down) {
            this.status = 'Pressed'
          } else {
            this.status = 'unPressed'
          }
        })
      }
      .height('100%')
      .width('100%')
      .stateStyles({
        normal: {.linearGradient({ direction: GradientDirection.Right, colors: [['#4158D0', 0.0], ['#FFCC70', 1.0]] })
        },
        pressed: { .linearGradient(this.status === "Pressed" ?
          { direction: GradientDirection.Right, colors: [['#0093E9', 0.0], ['#80D0C7', 1.0]] } : null)
        }
      })
    }
    .width('100%')
    .height('100%')
  }
}

对于button会被覆盖在上面的其他子组件挡住，无法直接触发onTouch

可以这样改，使用hitTestBehavior(HitTestMode.None)， 再结合上面的代码进行尝试。

Row() {
  Image($r('app.media.background'))
    .objectFit(ImageFit.Contain)
    .height(14).hitTestBehavior(HitTestMode.None)
  Text('测试测试测试')
    .margin({ left: 4 })
    .fontWeight(600)
    .fontColor(Color.White)
    .fontSize(14)
    .height(18)
    .width(28).hitTestBehavior(HitTestMode.None)
}.justifyContent(FlexAlign.SpaceBetween).hitTestBehavior(HitTestMode.None)

更多关于HarmonyOS 鸿蒙Next 按压态如何传递给子组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，按压态（Press State）的传递主要通过事件机制实现。按压态的传递过程涉及事件监听和状态更新两个核心步骤。

首先，父组件需要监听按压事件，这通常通过设置事件监听器来完成。当按压事件发生时，父组件会捕获到这个事件，并判断是否需要传递给子组件。

接下来，如果父组件决定传递按压态给子组件，它会通过特定的方法或接口将按压态信息传递给子组件。在鸿蒙系统中，这通常通过组件间的通信机制（如属性传递、事件回调等）来实现。

子组件在接收到按压态信息后，会根据这些信息更新自己的状态，以反映按压效果。例如，子组件可能会改变其背景颜色、图标样式等，以直观地展示按压态。

需要注意的是，按压态的传递过程是可配置的，开发者可以根据实际需求来决定是否传递按压态，以及如何传递。此外，鸿蒙系统还提供了丰富的API和组件库，以支持开发者实现各种复杂的交互效果。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部