Qt QML Grid with resizable rows and columns

Question

I would like to add a grid to my QML application whose rows and columns can be resized at runtime.

Think excel sheet. I can resize an entire row by dragging the top/bottom border up and down. I can resize an entire column by dragging the right/left border left and right. This is similar to a SplitView that has BOTH horizontal and vertical orientation.

I have been googling for an answer but keep getting results that aren't what I am looking for.

Any ideas?

Answer 1

A GridView is always fixed-cellsize. You should try using a TableView

Answer 2

There is nothing much to do in this. Just use QML binding and anchoring to achieve this.

import QtQuick 2.0

Item {
    width: 500; height: 500

    GridView {
        id: gridView
        width: 300; height: 200
        cellWidth: 80; cellHeight: 80

        Component {
            id: contactsDelegate
            Text {
                id: contactInfo
                text: modelData
            }
        }

        model: 5
        delegate: contactsDelegate
    }

    Rectangle {
        id: add
        width: 100
        height: 20
        border.color: "red"
        anchors {
            top: parent.top
            topMargin: 10
            right: parent.right
            rightMargin: 5
        }
        Text {
            anchors.fill: parent
            text: "Add Item"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: gridView.model++
        }
    }

    Rectangle {
        id: newWidth
        width: 100
        height: 20
        border.color: "red"
        anchors {
            top: add.bottom
            topMargin: 10
            right: parent.right
            rightMargin: 5
        }
        Text {
            anchors.fill: parent
            text: "New Width"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: gridView.width += 100
        }
    }

    Rectangle {
        width: 100
        height: 20
        border.color: "red"
        anchors {
            top: newWidth.bottom
            topMargin: 10
            right: parent.right
            rightMargin: 5
        }
        Text {
            anchors.fill: parent
            text: "New Height"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: gridView.height += 100
        }
    }

}

Or if you want to change the GridView's width and height by resizing the window, do it as follows:

import QtQuick 2.0

Item {
    width: 500; height: 500

    GridView {
        id: gridView
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            bottomMargin: 35
        }
        clip: true
        cellWidth: 80; cellHeight: 80

        Component {
            id: contactsDelegate
            Text {
                id: contactInfo
                text: modelData
            }
        }

        model: 5
        delegate: contactsDelegate
    }

    Rectangle {
        id: add
        width: 100
        height: 20
        border.color: "red"
        anchors {
            bottom: parent.bottom
            bottomMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
        Text {
            anchors.fill: parent
            text: "Add Item"
        }

        MouseArea {
            anchors.fill: parent
            onClicked: gridView.model++
        }
    }
}