如何在黑莓10中处理自定义控件的触摸事件

Question

我有一个名为customContextMenu.qml 的自定义控件，它的每一行都有一个图像和标签。我想一起处理对该图像和标签的点击/触摸。我该怎么做？

目前，我在每个包含图像和标签的容器中添加onTouch()，但它不起作用。我在我的main.qml 中使用了customContextMenu 控件。

Container {

  id: testPageCustomMBoxContainer
  objectName: "testPageCustomMBoxContainer"

  background:dropdownBack.imagePaint
  attachedObjects: [
    ImagePaintDefinition {
      id: dropdownBack
      repeatPattern: RepeatPattern.Fill
      imageSource: "asset:///images/dropdown_bg.png"
    }
  ]

layout: StackLayout {
  orientation: LayoutOrientation.TopToBottom  
}

maxWidth: 200.0 
maxHeight: 180.0
horizontalAlignment: HorizontalAlignment.Right
verticalAlignment: VerticalAlignment.Top

Container {

  id: testPageCustomMBoxRetestContainer
  objectName: "testPageCustomMBoxRetestContainer"

  preferredWidth:200.0
  preferredHeight:90.0 
  layout: StackLayout {
    orientation: LayoutOrientation.LeftToRight   
  }

  leftPadding: 10.0
  topPadding: 10.0
  bottomPadding: 10.0
  rightPadding: 20.0
  ImageView {
    imageSource: "asset:///images/retest.png"
    scalingMethod: ScalingMethod.AspectFit
    verticalAlignment: VerticalAlignment.Center
    layoutProperties: StackLayoutProperties {
      spaceQuota: 1.0
    }
  }

  Label {
    text: "Retest"
    horizontalAlignment: HorizontalAlignment.Right
    verticalAlignment: VerticalAlignment.Center
    textFormat: TextFormat.Plain

    layoutProperties: StackLayoutProperties {
      spaceQuota: 3.0
    }
  }

  onTouch: {    
    var retestPage = retestPage.createObject();
    testNavigationPane.push(retestPage);
  }
  attachedObjects: [
    ComponentDefinition {
      id:retestPage
      source: "main.qml"
    }
  ]
}
Container {

  id: testPageCustomMBoxHelpContainer
  objectName: "testPageCustomMBoxHelpContainer"

  preferredWidth: 200.0 
  preferredHeight: 90.0 
  layout: StackLayout {
    orientation: LayoutOrientation.LeftToRight
  }

  leftPadding: 10.0
  topPadding: 5.0
  bottomPadding: 15.0
  rightPadding: 20.0
  ImageView {
    imageSource: "asset:///images/help.png"
    scalingMethod: ScalingMethod.AspectFit

    verticalAlignment: VerticalAlignment.Center

    layoutProperties: StackLayoutProperties {
      spaceQuota: 1.0
    }
  }

  Label {
    text: "Help"
    horizontalAlignment: HorizontalAlignment.Right
    verticalAlignment: VerticalAlignment.Center
    textFormat: TextFormat.Plain 
    layoutProperties: StackLayoutProperties {
      spaceQuota: 3.0
    }

    onTouch: {
      var helpPage = helpPage.createObject();
      testNavigationPane.push(helpPage);
    }
    attachedObjects: [
      ComponentDefinition {
        id: helpPage
        source: "helpPage.qml"
        Page {
          paneProperties: NavigationPaneProperties {
            backButton: ActionItem {
              onTriggered: {
                testNavigationPane.pop();
              }
            }
          }
        }
      }
    ]
  }
}

Answer 1

您需要对诸如 Touched 或 LongPressed 之类的事物使用手势处理程序。仅当您在用户按住手指或类似情况时尝试做某事时，才会使用 onTouch 事件。下面是一个代码示例来显示两者之间的差异：

//Touched event - only fires if user touches and lets go of element.
//This is the preferred method
gestureHandlers: [
    TapHandler {
        onTapped: {
            //Code goes here
        }
    }
]

//Display active image if touched
//This would be used for something such as changing a background color of a button when pressed.
onTouch: {
    if (event.touchType == TouchType.Down) {
        //Do something on down touch - e.g. change background color
    } else if (event.touchType == TouchType.Up || event.touchType == TouchType.Cancel)     {
       //Users finger has been lifted OR has left the element.
    }
}