Using Loader object in a Layout QML

Question

I want to use a loader object in a ColumnLayout object in this form:

Item{
width: 500
height: 300
focus: true
Keys.onLeftPressed: state = "matrix"
ColumnLayout{
    id: panel
    anchors.fill: parent

    RowLayout{
        Layout.minimumHeight: 30

        Text {
            Layout.fillWidth: true
            text: "some"
        }
        Slider{
            Layout.fillWidth: true
        }
        Button {
            text: "otro"
        }
    }
    Loader {
        id: load
        Layout.fillWidth: true
        height: 30
        width: 30
    }
}
states: [
    State {
        name: "matrix"
        PropertyChanges {
            target: load
            sourceComponent: tab

        }
    }
]
Component {
    id:tab
    Rectangle {
        color: "red"
        height: 30
        width: 30
    }
}
}

I use a key event for change the state property, but "tab" component don't load in the root item. Can any one help me fix this problem?

Answer 1

A Loader cannot have the layout.fillWidth. It must be set when the component load :

Item{
    width: 500
    height: 300
    focus: true
    Keys.onLeftPressed: state = "matrix"
    ColumnLayout{
        id: panel
        anchors.fill: parent

        RowLayout{
            Layout.minimumHeight: 30

            Text {
                Layout.fillWidth: true
                text: "some"
            }
            Slider{
                Layout.fillWidth: true
            }
            Button {
                text: "otro"
            }
        }
        Loader { id: load } // no property here
    }
    states: [
        State {
            name: "matrix"
            PropertyChanges {
                target: load
                sourceComponent: tab;
                Layout.fillWidth: true;  // the layout is set here
            }
        }
    ]
    Component {
        id:tab
        Rectangle {
            color: "red"
            width:30
            height:30;
        }
    }
}