QML Defines reusable types issue.

fromis_9

Hi. I want to define my own QML types like Class of C++, and use it in other QML files. So I make my custom slider like below:

// HeaderSlider.qml

import QtQuick 2.9
import QtQuick.Controls
import QtQuick.Layouts 6.0
 
Item { 
    property alias header: header
    property alias valueText: valueText
    property alias from: slider.from
    property alias to: slider.to
    property alias stepSize: slider.stepSize
    property alias value: slider.value
    property alias enabled: slider.enabled
    property alias slider: slider
    RowLayout { anchors.fill: parent
        Label { width: parent.width * 0.25; Layout.fillWidth: true
            id: header
        }
        Slider { width: parent.width * 0.5; Layout.fillWidth: true
            id: slider
        }
        Label { width: parent.width * 0.25; Layout.fillWidth: true
            id: valueText
            text: slider.value
        }
    }
}

And I use this type in my mainwindow:

// MainWindow.qml
import QtQuick 2.9
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window 2.15

Window {
    minimumWidth: 200
    minimumHeight: 400
    ScrollView { anchors.fill: parent
        Column { anchors.fill: parent
            HeaderSlider { Layout.fillWidth: true; Layout.fillHeight: true
                header.text: "Exposure"
                from: 1
                to: 3000
                stepSize: 1
                value: cam.exposure
                slider.onValueChanged: cam.exposure = value
            }
            HeaderSlider { Layout.fillWidth: true; Layout.fillHeight: true
                header.text: "Gain"
                from: 0
                to: 24
                stepSize: 1
                value: cam.gain
                slider.onValueChanged: cam.gain = value
            }
        }
    }
}

but when I run this code, the HeaderSlider's width and height are not fitted to ScrollView's size, so the bindings for components' width in HeaderSlider are not worked.
How can I fix it?

sierdzio

@fromis_9 said in QML Defines reusable types issue.:

Column { anchors.fill: parent
HeaderSlider { Layout.fillWidth: true; Layout.fillHeight: true

Column is not a layout, so Layout.fillWidth will not work! Use ColumnLayout instead.