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

【问题标题】：Qt QML Grid with resizable rows and columns具有可调整大小的行和列的 Qt QML Grid
【发布时间】：2015-11-07 00:15:18
【问题描述】：

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

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

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

有什么想法吗？

【问题讨论】：

标签： qt qml

【解决方案1】：

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

【讨论】：

非常感谢。这正是我正在寻找的。问题是我正在使用 Qt Creator Designer 并且这个类由于某种原因没有出现在 QML 类型中。我已经导入了 QtQuick.Controls 1.4，但这仍然没有出现。是否可以使用拖放界面来创建这些？
很高兴我能帮上忙。我不了解Designer，我从不使用它。我认为您应该自己编写代码。如果您需要帮助，可以回复我。

【解决方案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 的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++
        }
    }
}

【讨论】：