Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QtQuick.Controls vs QtQuick.Templates for Slider



  • Hi there,

    I am customizing a number of controls for my application and so far I followed the example using the QtQuick.Templates, mostly to derive from the AbstractButton template. I tried to do the same for Slider now and noticed that the availableHeight (readonly) is 0 when deriving from the Templates whereas it has a positive value when deriving from Controls. To be clear I am just using the example code that is provided by the documentation for customizing Sliders (see below). In the documentation I cannot find a difference between the usage for the two modules, am I missing something? Not that it is crucial, since I can just derive from Controls, but I thought it is better "Style" to derive from the Templates.

    Here's the code:

    import QtQuick 2.6
    import QtQuick.Controls 2.1
    import QtQuick.Templates 2.1 as T
    
    T.Slider {
        id: control
        value: 0.5
    
        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"
        }
        Component.onCompleted: {
            console.log("available H/W: "+control.availableHeight+"  "+control.availableWidth)
            console.log("implicit H/W: "+control.implicitHeight+"  "+control.implicitWidth)
        }
    }
    

    That prints:
    qml: available H/W: 0 404
    qml: implicit H/W: 0 0
    qml: available H/W: 0 404
    qml: implicit H/W: 0 0
    for T.Slider{...}

    and

    qml: available H/W: 26 404
    qml: implicit H/W: 41 200
    qml: available H/W: 26 404
    qml: implicit H/W: 41 200
    for Slider{...}



  • When you implement a template, you need to specify how the implicit size is calculated. For example, the ready-made styles calculate it like this:

    implicitWidth: Math.max(background ? background.implicitWidth : 0,
                           (handle ? handle.implicitWidth : 0) + leftPadding + rightPadding)
    implicitHeight: Math.max(background ? background.implicitHeight : 0,
                            (handle ? handle.implicitHeight : 0) + topPadding + bottomPadding)
    

    Unless you are implementing a general purpose style that anyone can take and customize, you can probably simplify that a lot. You can, for example, assume that the background and handle items always exist because you define then right below. Furthermore, it's up to you to decide whether you want to support paddings.


Log in to reply