Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-59416

QtQuick Controls 2 slider handle loses press on touch

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: P2: Important
    • Resolution: Done
    • Affects Version/s: 5.9.0 Alpha
    • Fix Version/s: 5.9.0 Beta 1
    • Component/s: Quick: Controls 2
    • Labels:
      None
    • Commits:
      qtlocation: 4f03448a9ef95dd5a20b1fa4af31a5865413e5f4; qtdeclarative: 65e005a72d62d8a42a60e0b8b789d1f04da91ccf 6d7c3c0743b3c6aac7d7faa1ffd18798ceced0ac 1f9c7b065f55f80f81b349ef64a718546dec4b49

      Description

      Changing from controls1 sliders to controls 2 sliders by using this patch (https://codereview.qt-project.org/#/c/188110/), the sliders in the QtLocation mapviewer example now lose focus on android.
      Cannot test on desktop touch..

      a smaller self contained sample:

      import QtQuick 2.7
      import QtQuick.Window 2.2
      import QtQuick.Controls 1.4
      import QtPositioning 5.6
      import QtLocation 5.9
      import QtQuick.Controls.Styles 1.4
      import QtQuick.Controls 2.1 as C2
      
      
      Window {
          id: win
          visible: true
          width: 640
          height: 640
      
          Map {
              id: map
              anchors.fill: parent
              opacity: 1.0
              color: 'transparent'
              plugin: Plugin { name: "esri" }
              center: QtPositioning.coordinate(45,10)
              activeMapType: map.supportedMapTypes[0]
              zoomLevel: 4
      
      
              Row {
                  id: containerRow
      
                  z: parent.z + 1
                  property var mapSource: map
                  property real fontSize : 14
                  property color labelBackground : "transparent"
                  property int edge: Qt.RightEdge
      
                  function rightEdge() {
                      return (containerRow.edge === Qt.RightEdge);
                  }
      
                  layoutDirection: containerRow.rightEdge() ? Qt.LeftToRight : Qt.RightToLeft
                  anchors.top: parent.top
                  anchors.bottom: parent.bottom
                  anchors.right: containerRow.rightEdge() ? parent.right : undefined
                  anchors.left: containerRow.rightEdge() ? undefined : parent.left
      
                  Button {
                      id: sliderToggler
                      width: 32
                      height: 96
                      checkable: true
                      checked: true
                      anchors.verticalCenter: parent.verticalCenter
      
                      transform:  Scale {
                                      origin.x: containerRow.rightEdge() ? 0 : sliderToggler.width / 2
                                      xScale: containerRow.rightEdge() ? 1 : -1
                                  }
      
                      style:  ButtonStyle {
                                  background: Rectangle {
                                      color: "transparent"
                                  }
                              }
      
                      property real shear: 0.333
                      property real buttonOpacity: 0.5
                      property real mirror : containerRow.rightEdge() ? 1.0 : -1.0
      
                      Rectangle {
                          width: 16
                          height: 48
                          color: "seagreen"
                          antialiasing: true
                          opacity: sliderToggler.buttonOpacity
                          anchors.top: parent.top
                          anchors.left: sliderToggler.checked ?  parent.left : parent.horizontalCenter
                          transform: Matrix4x4 {
                              property real d : sliderToggler.checked ? 1.0 : -1.0
                              matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
                                                      0.0,    1.0,    0.0,    0.0,
                                                      0.0,    0.0,    1.0,    0.0,
                                                      0.0,    0.0,    0.0,    1.0)
                          }
                      }
      
                      Rectangle {
                          width: 16
                          height: 48
                          color: "seagreen"
                          antialiasing: true
                          opacity: sliderToggler.buttonOpacity
                          anchors.top: parent.verticalCenter
                          anchors.right: sliderToggler.checked ?  parent.right : parent.horizontalCenter
                          transform: Matrix4x4 {
                              property real d : sliderToggler.checked ? -1.0 : 1.0
                              matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
                                                      0.0,    1.0,    0.0,    0.0,
                                                      0.0,    0.0,    1.0,    0.0,
                                                      0.0,    0.0,    0.0,    1.0)
                          }
                      }
                  }
      
                  Rectangle {
                      id: sliderContainer
                      height: parent.height
                      width: sliderRow.width + 10
                      visible: sliderToggler.checked
                      color: Qt.rgba( 0, 191 / 255.0, 255 / 255.0, 0.07)
      
                      property var labelBorderColor: "transparent"
                      property var slidersHeight : sliderContainer.height
                                                   - rowSliderValues.height
                                                   - rowSliderLabels.height
                                                   - sliderColumn.spacing * 2
                                                   - sliderColumn.topPadding
                                                   - sliderColumn.bottomPadding
      
                      Column {
                          id: sliderColumn
                          spacing: 10
                          topPadding: 16
                          bottomPadding: 48
                          anchors.centerIn: parent
      
                          // the sliders value labels
                          Row {
                              id: rowSliderValues
                              spacing: sliderRow.spacing
                              width: sliderRow.width
                              height: 32
                              property real entryWidth: zoomSlider.width
      
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.height
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelZoomValue
                                      text: zoomSlider.value.toFixed(3)
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.height
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelBearingValue
                                      text: bearingSlider.value.toFixed(2)
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.height
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelTiltValue
                                      text: tiltSlider.value.toFixed(2)
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.height
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelFovValue
                                      text: fovSlider.value.toFixed(2)
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
                          } // rowSliderValues
      
                          // The sliders row
                          Row {
                              spacing: 0
                              id: sliderRow
                              height: sliderContainer.slidersHeight
      
                              C2.Slider {
                                  Rectangle {
                                      anchors.fill: parent
                                      color : "transparent"
                                      border.color: "red"
                                  }
      
                                  id: zoomSlider
                                  height: parent.height
                                  orientation : Qt.Vertical
                                  from : containerRow.mapSource.minimumZoomLevel
                                  to : containerRow.mapSource.maximumZoomLevel
                                  value : containerRow.mapSource.zoomLevel
                                  onValueChanged: {
                                          containerRow.mapSource.zoomLevel = value
                                  }
                              }
                              C2.Slider {
                                  Rectangle {
                                      anchors.fill: parent
                                      color : "transparent"
                                      border.color: "red"
                                  }
                                  id: bearingSlider
                                  height: parent.height
                                  from: 0
                                  to: 360
                                  orientation : Qt.Vertical
                                  value: containerRow.mapSource.bearing
                                  onValueChanged: {
                                      containerRow.mapSource.bearing = value;
                                  }
                              }
                              C2.Slider {
                                  Rectangle {
                                      anchors.fill: parent
                                      color : "transparent"
                                      border.color: "red"
                                  }
                                  id: tiltSlider
                                  height: parent.height
                                  orientation : Qt.Vertical
                                  from: containerRow.mapSource.minimumTilt;
                                  to: containerRow.mapSource.maximumTilt
                                  value: containerRow.mapSource.tilt
                                  onValueChanged: {
                                      containerRow.mapSource.tilt = value;
                                  }
                              }
                              C2.Slider {
                                  Rectangle {
                                      anchors.fill: parent
                                      color : "transparent"
                                      border.color: "red"
                                  }
                                  id: fovSlider
                                  height: parent.height
                                  orientation : Qt.Vertical
                                  from: containerRow.mapSource.minimumFieldOfView
                                  to: containerRow.mapSource.maximumFieldOfView
                                  value: containerRow.mapSource.fieldOfView
                                  onValueChanged: {
                                      containerRow.mapSource.fieldOfView = value;
                                  }
                              }
                          } // Row sliders
      
                          // The labels row
                          Row {
                              id: rowSliderLabels
                              spacing: sliderRow.spacing
                              width: sliderRow.width
                              property real entryWidth: zoomSlider.width
                              property real entryHeight: 64
      
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.entryHeight
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelZoom
                                      text: "Zoom"
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
      
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.entryHeight
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelBearing
                                      text: "Bearing"
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.entryHeight
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelTilt
                                      text: "Tilt"
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
                              Rectangle{
                                  color: containerRow.labelBackground
                                  height: parent.entryHeight
                                  width: parent.entryWidth
                                  border.color: sliderContainer.labelBorderColor
                                  Label {
                                      id: labelFov
                                      text: "FoV"
                                      font.pixelSize: containerRow.fontSize
                                      rotation: -90
                                      anchors.centerIn: parent
                                  }
                              }
                          } // rowSliderLabels
                      } // Column
                  } // sliderContainer
              } // containerRow
          }
      }
      

        Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

            Assignee:
            srutledg Shawn Rutledge
            Reporter:
            paangele Paolo Angelelli
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Gerrit Reviews

                There are no open Gerrit changes