Hello,
I'm struggling to grasp the concept behind QtQuick.Layouts.
I want to create a 3 column UI that fills up the window without setting fixed sizes. Then in each column there should be multiple rows with no fixed widths.
So far, I have been unable to achieve this with the code below, instead it shows 3 red, green, blue columns next to each other. Is there some Layout limitation in place or the whole solution is wrong and I should use other means to achieve this?
All the examples I found use a fixed width/height, but that doesn't work for my goal.
Thank you!
view.qml
Import QtQuick 2.2
Import QtQuick.Layouts 1.0
RowLayout {
spacing: 2
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "red"
ColumnLayout {
spacing: 2
Rectangle {
Layout.fillWidth: true
height: 32
color: "black"
}
Rectangle {
Layout.fillWidth: true
height: 32
color: "yellow"
}
Rectangle {
Layout.fillWidth: true
height: 32
color: "pink"
}
Rectangle {
Layout.fillWidth: true
height: 32
color: "brown"
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "green"
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "blue"
}
}
Import QtQuick 2.2
Import QtQuick.Layouts 1.0
RowLayout {
spacing: 2
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "red"
ColumnLayout {
spacing: 2
Rectangle {
Layout.fillWidth: true
height: 32
color: "black"
}
Rectangle {
Layout.fillWidth: true
height: 32
color: "yellow"
}
Rectangle {
Layout.fillWidth: true
height: 32
color: "pink"
}
Rectangle {
Layout.fillWidth: true
height: 32
color: "brown"
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "green"
}
Rectangle {
Layout.fillWidth: true
Layout.fillHeight: true
color: "blue"
}
}
To copy to clipboard, switch view to plain text mode
Bookmarks