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

QML SpinBox: Customization example is broken

XMLWordPrintable

      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.

        1. spinbox-custom-correct.png
          spinbox-custom-correct.png
          4 kB
        2. spinbox-custom-wrong.png
          spinbox-custom-wrong.png
          4 kB
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

            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

              Created:
              Updated:
              Resolved:

                There are no open Gerrit changes