QtQuick.Controls vs QtQuick.Templates for Slider

markugra

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{...}

jpnurmi

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.