Question

我想在我的QML应用程序中添加一个网格，其行和列可以在运行时调整大小。

想想excel表。我可以通过上下拖动顶部/底部边框来调整整行的大小。我可以通过左右拖动左/右边框来调整整个列的大小。这类似于具有BOTH水平和垂直方向的SplitView。

我一直在谷歌搜索答案，但不断得到的结果不是我想要的。

有什么想法吗？

Answer 1

GridView始终是固定单元格。您应该尝试使用TableView

Answer 2

这没什么可做的。只需使用QML绑定和锚定即可实现此目的。

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

}

或者，如果您想通过调整窗口大小来更改GridView＆＃39; width和height，请按以下步骤操作：

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

Qt QML Grid具有可调整大小的行和列

2 个答案: