Using anchors with Qml GridLayout

506 Views Asked by At

I am trying to use GridLayout with some widgets inside and anchor the layout under some Text label. When I use anchors.top: textEdit.bottom the whole app falls and I can't figure out why. This qml code, works ok:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Item {
    id: lcuMain

    property int outerSpacing: 10
    property int innerSpacing: 5

    ConfigFileModel {
        id:configFileModel
    }

    ConfigFileSettings {
        id: configFileSettings
    }

    Component.onCompleted: {
        configFileModel.reload()
    }

    Text {
        id: title
        anchors {
            left: parent.left
            leftMargin: outerSpacing
        }
        text: "Configuration files"
    }

    ComboBox {
        id: comboBox
        anchors {
            top: title.bottom
            topMargin: innerSpacing
            left: title.left
            right: reloadButton.left
            rightMargin: innerSpacing
        }
        model: configFileModel
        textRole: "fileName"
    }

    Button {
        id: reloadButton
        anchors {
            right: parent.right
            rightMargin: outerSpacing
            verticalCenter: comboBox.verticalCenter
        }
        width: height
    }

    Text {
        id: configOptionsText
        anchors {
            top: reloadButton.bottom
            topMargin: outerSpacing
            left: parent.left
            leftMargin: outerSpacing
        }
        text: "Configuration Options"
    }

    GridLayout {
        id: grid
        columns: 3

        Text {
            id: logLevelText
            text: "Log level"
        }
        ComboBox {
            id: logLevelComboBox
            //Layout.alignment: Qt.AlignRight
            model: ["debug", "info", "warning", "error", "critical", "off"]
        }

        Button {
            id: setLogLevelButton
            //Layout.alignment: Qt.AlignRight
            Layout.maximumWidth: height
            Layout.maximumHeight: width
            text: "Set"
        }
    }
}

but the app looks like this

UI

The row with "Log level" Text, ComboBox and "Set" Button is inside grid layout and I would like to position it under the Text "Configuration Options". Tried to use anchors like this:

GridLayout {
    id: grid
    columns: 3
    anchors: {
        top: configOptionsText.top
        left: parent.left
        right: parent.right
    }
...
}

however, the app crashes. Actually, any anchors or positioning of the gridLayout I tried is resulting in crash of the app. Please, any idea what am I doing wrong?

0

There are 0 best solutions below