HarmonyOS鸿蒙Next中openCustomDialog（传参为ComponentContent形式）按压态失效

HarmonyOS鸿蒙Next中openCustomDialog（传参为ComponentContent形式）按压态失效

import { CommonConstants, CusActionSheets, Logger, RouterMap } from "common"
import { extendTools, macInfo } from "../models/BoardModel"

@Builder
export function buildList(params: Array<macInfo | extendTools>) {
  Column() {
    List(){
      ForEach(params, (item:macInfo | extendTools) => {
        ListItem() {
          Text('111')
            .width(CommonConstants.FULL_SIZE)
            .height(CommonConstants.FULL_SIZE)
            .fontSize(16)
            .textAlign(TextAlign.Center)
        }
        .borderWidth({ bottom: 1 })
        .borderStyle(BorderStyle.Solid)
        .borderColor('#CCCCCC')
        .height(CommonConstants.DEFAULT_48)
        .stateStyles({
          normal: {
            .backgroundColor(Color.Red)
            .opacity(1)
          },
          pressed: {
            .backgroundColor(Color.Green)
            .opacity(0.8)
          }
        })
      }, (item:macInfo | extendTools) => item.name)
    }
    .width(CommonConstants.FULL_SIZE)
    .borderRadius(CommonConstants.BORDER_RADIUS_10)
    .margin({bottom: 10 })

    Button('取消')
      .width(CommonConstants.FULL_SIZE)
      .onClick(() => {
        CusActionSheets.closeDialog()
      })
  }
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
}

自定义弹窗组件给多态样式，按压态 无效怎么解决


更多关于HarmonyOS鸿蒙Next中openCustomDialog（传参为ComponentContent形式）按压态失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，openCustomDialog使用ComponentContent传参时按压态失效，可能是事件冒泡或焦点冲突导致。检查自定义组件是否拦截了触摸事件，或未正确设置按压样式。确保组件实现了TouchEventListener接口，并在onTouchEvent中处理按压状态。同时验证自定义组件的布局属性是否允许交互。

更多关于HarmonyOS鸿蒙Next中openCustomDialog（传参为ComponentContent形式）按压态失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，当使用ComponentContent形式的openCustomDialog时，按压态失效通常是由于事件冒泡或组件层级问题导致的。针对您提供的代码，建议检查以下几点：

  1. 确保ListItem组件设置了正确的交互属性：
ListItem()
  .onClick(() => {}) // 必须添加点击事件处理器
  1. 检查Dialog的配置是否允许交互：
openCustomDialog({
  customComponent: buildList(params),
  isModal: false, // 确保不是模态对话框
  autoCancel: true // 允许点击外部取消
})
  1. 尝试为Text组件添加点击事件：
Text('111')
  .onClick(() => {}) // 添加空事件处理器
  1. 如果问题仍然存在，可以尝试使用Gesture代替stateStyles：
ListItem()
  .gesture(
    TapGesture()
      .onAction(() => {})
      .onActionStart(() => {
        // 按压开始样式
      })
      .onActionEnd(() => {
        // 按压结束样式
      })
  )

注意检查是否有其他样式覆盖了按压态样式，特别是全局样式或主题设置。

回到顶部