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

QML SpinBox: Customization example is broken

    XMLWordPrintable

Details

    Description

      Copied from https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-spinbox

      import QtQuick 2.15
      import QtQuick.Window 2.15
      import QtQuick.Controls 2.15
      
      Window {
          width: 200
          height: 80
          visible: true
      
          SpinBox {
              id: control
              value: 50
              editable: true
              anchors.fill: parent
      
              contentItem: TextInput {
                  z: 2
                  text: control.textFromValue(control.value, control.locale)
      
                  font: control.font
                  color: "#21be2b"
                  selectionColor: "#21be2b"
                  selectedTextColor: "#ffffff"
                  horizontalAlignment: Qt.AlignHCenter
                  verticalAlignment: Qt.AlignVCenter
      
                  readOnly: !control.editable
                  validator: control.validator
                  inputMethodHints: Qt.ImhFormattedNumbersOnly
              }
      
              up.indicator: Rectangle {
                  x: control.mirrored ? 0 : parent.width - width
                  height: parent.height
                  implicitWidth: 40
                  implicitHeight: 40
                  color: control.up.pressed ? "#e4e4e4" : "#f6f6f6"
                  border.color: enabled ? "#21be2b" : "#bdbebf"
      
                  Text {
                      text: "+"
                      font.pixelSize: control.font.pixelSize * 2
                      color: "#21be2b"
                      anchors.fill: parent
                      fontSizeMode: Text.Fit
                      horizontalAlignment: Text.AlignHCenter
                      verticalAlignment: Text.AlignVCenter
                  }
              }
      
              down.indicator: Rectangle {
                  x: control.mirrored ? parent.width - width : 0
                  height: parent.height
                  implicitWidth: 40
                  implicitHeight: 40
                  color: control.down.pressed ? "#e4e4e4" : "#f6f6f6"
                  border.color: enabled ? "#21be2b" : "#bdbebf"
      
                  Text {
                      text: "-"
                      font.pixelSize: control.font.pixelSize * 2
                      color: "#21be2b"
                      anchors.fill: parent
                      fontSizeMode: Text.Fit
                      horizontalAlignment: Text.AlignHCenter
                      verticalAlignment: Text.AlignVCenter
                  }
              }
      
              background: Rectangle {
                  implicitWidth: 140
                  border.color: "#bdbebf"
              }
          }
      }
      

       

      Outcomes

      • Qt 5.15 produces spinbox-custom-correct.png
      • Qt 6.x produces spinbox-custom-wrong.png

      Furthermore, the custom up/down indicators are not clickable in Qt 6.x.

       

      Workaround

      We need to hide the native up/down indicators and allow the mouse events to reach the custom up/down indicators:

      nativeIndicators: false
      containmentMask: Item {
          height: contentItem.height
          width: contentItem.width - spinbox.up.indicator.width - spinbox.up.indicator.width
          anchors.centerIn: contentItem
      }
      

       

      Question

      The default implementation of T.Spinbox has

      property bool nativeIndicators: up.indicator.hasOwnProperty("_qt_default")
      								&& down.indicator.hasOwnProperty("_qt_default")
      

      Is this supposed to auto-detect the presence of custom indicators, and auto-hide the native ones? If so, it's not working.

      Attachments

        1. spinbox-custom-correct.png
          4 kB
          Sze Howe Koh
        2. spinbox-custom-wrong.png
          4 kB
          Sze Howe Koh

        Issue Links

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

          Activity

            People

              qt.team.quick.subscriptions Qt Quick and Widgets Team
              skoh-qt Sze Howe Koh
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Gerrit Reviews

                  There are no open Gerrit changes