qmlgridgrid-layoutsplitview

QML Grid using SplitView to drag the rows up and down and columns left and right?


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
            }
        }
    }
}

Solution

  • 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
            }
        }
    
    }
    }