I want to eventually create a grid that has 2 rows and 9 columns and then within some of those cells, I want to split those to have different items within them etc.
Here, I have grid that only has 2 rows and 1 column and I have used SplitView in the top row to display 3 columns that can be dragged. I want to be able to use this for rows as well so that they can be dragged up and down too. Is it possible to use 2 SplitViews - 1 for rows and 1 for columns? Or is there a better solution to this? I will also eventually want one of the columns to have a fixed sized but the other ones are a default percentage size of window and are resizable.
This is the code I have at the moment, I like how it looks but I want to be able to resize the row height by dragging it up and down. Not sure if SplitView is the best way to go about it:
Rectangle {
id: root
height: 400
width: 600
Grid {
columns: 1
rows: 2
Row {
Rectangle {
width: root.width
height: root.width * 0.5
SplitView {
anchors.fill: parent
orientation: Qt.Horizontal
PinkRect {
width: 200
Layout.maximumWidth: 400
}
PurpleRect {
Layout.minimumWidth: 50
Layout.fillWidth: true
}
OrangeRect {
width: 200
}
}
}
}
Row {
BrownRect {
width: root.width
height: root.width * 0.5
}
}
}
}
You can nest SplitViews
:
Window {
id: root
visible: true
width: 800
height: 600
title: "Test app"
SplitView {
orientation: Qt.Vertical
anchors.fill: parent
SplitView {
orientation: Qt.Horizontal
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
Rectangle {
color: "red"
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
}
Rectangle {
color: "green"
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
}
Rectangle {
color: "blue"
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
}
}
SplitView {
orientation: Qt.Horizontal
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
Rectangle {
color: "blue"
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
}
Rectangle {
color: "green"
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
}
Rectangle {
color: "red"
SplitView.minimumWidth: 150
SplitView.minimumHeight: 150
}
}
}
}