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

QML Slider: (Lack of) implicitWidth affects background height when anchors are used

    XMLWordPrintable

Details

    • cda435941e (qt/qtdeclarative/dev) cda435941e (qt/tqtc-qtdeclarative/dev) 5be302fa9b (qt/qtdeclarative/6.4)

    Description

      This uses a slightly modified version of the example at
      https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-slider

      import QtQuick 2.15
      import QtQuick.Window 2.15
      import QtQuick.Controls 2.15
      
      Window {
          width: 640
          height: 80
          visible: true
      
          Slider {
              id: control
              value: 0.5
              anchors.fill: parent
      
              background: Rectangle {
                  x: control.leftPadding
                  y: control.topPadding + control.availableHeight / 2 - height / 2
                  // implicitWidth: 200
                  implicitHeight: 4
                  width: control.availableWidth
                  height: implicitHeight
                  radius: 2
                  color: "#bdbebf"
      
                  Rectangle {
                      width: control.visualPosition * parent.width
                      height: parent.height
                      color: "#21be2b"
                      radius: 2
                  }
              }
      
              handle: Rectangle {
                  x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                  y: control.topPadding + control.availableHeight / 2 - height / 2
                  implicitWidth: 26
                  implicitHeight: 26
                  radius: 13
                  color: control.pressed ? "#f0f0f0" : "#f6f6f6"
                  border.color: "#bdbebf"
              }
          }
      }
      

       

      Outcomes

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

       

      Workarounds

      Either of these actions will produce slider-custom-bg-correct.png in Qt 6.x:

      • Replace "anchors.fill: parent" with "width: parent.width; height: parent.height", OR
      • Explicitly specify an implicitWidth

       

      Side comments

      Calling the skinny slide the `background` isn't intuitive. Really, `background` should refer to the "bounding rect" while the skinny slide should be a separate item called `groove` (for consistency with QSlider).

      Attachments

        1. slider-custom-bg-correct.png
          4 kB
          Sze Howe Koh
        2. slider-custom-bg-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

              fabiankosmale Fabian Kosmale
              skoh-qt Sze Howe Koh
              Vladimir Minenko Vladimir Minenko
              Alex Blasche Alex Blasche
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: