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

Posted 2023-02-16

【中文标题】如何在黑莓10中处理自定义控件的触摸事件

【英文标题】：How to handle touch events of custom control in blackberry10

【发布时间】：2013-08-26 09:06:54

【问题描述】：

我有一个名为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();
              
            
          
        
      
    ]
  

【问题讨论】：

那么什么不起作用？

touch 不工作......但它现在工作......但不知何故，页面数量正在创建和打开，而我只将一页附加到 ontouch().. 任何人都可以给我解决方案，为什么要打开这些数量的页面？？

【参考方案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.
    

【讨论】：

好吧...！！谢谢..！我用gestureHandler尝试了它，它按预期工作！但我仍然无法弄清楚为什么它使用 onTouch() 打开页面数？？

onTouch() 在元素被触摸时不断触发。因此，如果您使用该事件然后触摸一个按钮，它将在第一页出现之前触发该事件几次（这会阻止进一步的触摸事件）。