[Nicola]

Hi,

How is possible implement the Press&Hold on SimpleRow. I tryed to connect a MouseArea on the Row, but i don’t have the “visual effect” and it’s not possible connect the mousearea ot the default textItem because they are not sibling. Is existing a solution for this?

Thanks

Nicola

[GüntherFelgo Team]

Hi Nicola!

Unfortunately the SimpleRow does not support connecting the pressAndHold signal at the moment. We should probably add this feature to the component, until then you can use the following “hack” to add the feature with a custom Background/MouseArea and pressed-effects to the SimpleRow:

SimpleRow {
  id: row
  
  // new pressAndHold signal
  signal pressAndHold(int index)
  
  // custom background for hover effect (non-Android)
  Rectangle {
    width: parent.width
    height: parent.height - px(row.style.dividerHeight)
    radius: parent.radius
    
    color: !Theme.isAndroid && customMouseArea.pressed ? row.style.selectedBackgroundColor : row.style.backgroundColor
    Behavior on color {
      ColorAnimation { duration: 150; easing.type: Easing.InOutQuad }
    }
  }
  
  // custom mousearea with Android Ripple Effect to replace the internal one
  RippleMouseArea {
    id: customMouseArea
    anchors.fill: parent
    enabled: row.enabled
    circularBackground: false
    radius: parent.radius
    
    // use selected background color of the style for the ripple background
    backgroundColor: setAlpha(row.style.selectedBackgroundColor, 0.5)
    fillColor: setAlpha(row.style.selectedBackgroundColor, 0.5)
    
    function setAlpha(color, alpha) {
      return Qt.rgba(color.r,color.g,color.b, alpha)
    }
    
    // fire simple-row signals
    onReleased: row.selected(typeof index !== "undefined" ? index : 0)
    onPressAndHold: row.pressAndHold(typeof index !== "undefined" ? index: 0)
  }
  textItem.parent.parent.parent.z: 1 // brings content of row to front (above custom background & mousearea)
  
  // you can now freely handle item selected or press and hold
  onSelected: console.log("SELECTED: "+index)
  onPressAndHold: console.log("PRESS AND HOLD: "+index)
}

 

Sorry that we have no better solution for this at the moment!

Best,
Günther