如何创建一个 TableView (Qt5.12) 模型作为 ListModel 可以承载可变数量的列? [英] How to create a TableView (Qt5.12) with model as ListModel that can host variable number of columns?

问题描述

我正在创建一个多行多列的表格.如何使用 QML TableView 创建多行多列的表格?

I am creating a Table with multiple rows and multiple columns. How can I use QML TableView to create a table with multiple rows and columns?

我尝试使用较旧的 TableView 实现，但现在想使用 Qt 5.12 中提供的新 TableView 创建相同的实现.下面是我的旧实现的示例代码

I tried with an older implementation of TableView but now want to create the same using the new TableView provided in Qt 5.12. Below is the example code of my older implementation

QtObject {
    id: internals
    property int rows: 0
    property int col: 0
    property int colwidth: 0
    property var columnName: []
}    
ListModel {
    id: libModel
}
TableView {
    id: tblview
    height: parent.height
    width: parent.width
    model: libModel

    style: TableViewStyle {
        itemDelegate: Rectangle {
            border.width: 1
            border.color: 'lightgrey'
            Text {
                id: textItem
                anchors.fill: parent
                text: styleData.value
            }
        }
    }

    resources: {
        var temp = []
        console.log("Column Count" + internals.col)
        for (var i = 0; i < internals.col; i++) 
            console.log("Creating a column")
            temp.push(columnComponent.createObject(tblview, {
                "role" : internals.columnName[i],
                "title" : internals.columnName[i]
            }))
        }
        return temp
    }
    Component {
        id: columnComponent
        TableViewColumn {
            width: internals.colwidth
        }
    }
}

推荐答案

我建议使用从 QAbstractTableModel，如示例.

对于代表，使用 DelegateChooser 和 DelegateChoice.

For delegates, use DelegateChooser and DelegateChoice.

不幸的是，关于TableView 和DelegateChooser 的文档仍然需要改进:

Unfortunately the documentation regarding TableView and DelegateChooser still needs to be improved:

• QTBUG-73964
• QTBUG-74965

在添加之前，我建议您查看 存储模型手动测试.引用委托代码:

Until that is added, I would recommend taking a look at the storagemodel manual test. Quoting the delegate code:

TableView {
    id: table
    anchors.fill: parent
    anchors.margins: 10
    clip: true
    model: StorageModel { }
    columnSpacing: 1
    rowSpacing: 1
    delegate: DelegateChooser {
        role: "type"
        DelegateChoice {
            roleValue: "Value"
            delegate: Rectangle {
                color: "tomato"
                implicitWidth: Math.max(100, label.implicitWidth + 8)
                implicitHeight: label.implicitHeight + 4

                Rectangle {
                    x: parent.width - width
                    width: value * parent.width / valueMax
                    height: parent.height
                    color: "white"
                }

                Text {
                    id: label
                    anchors.baseline: parent.bottom
                    anchors.baselineOffset: -4
                    anchors.left: parent.left
                    anchors.leftMargin: 4
                    text: valueDisplay + " of " + valueMaxDisplay + " " + heading
                }
            }
        }
        DelegateChoice {
            roleValue: "Flag"
            // We could use a checkbox here but that would be another component (e.g. from Controls)
            delegate: Rectangle {
                implicitWidth: checkBox.implicitWidth + 8
                implicitHeight: checkBox.implicitHeight + 4
                Text {
                    id: checkBox
                    anchors.baseline: parent.bottom
                    anchors.baselineOffset: -4
                    anchors.left: parent.left
                    anchors.leftMargin: 4
                    text: (checkState ? "☑ " : "☐ ") + heading
                }
            }
        }
        DelegateChoice {
            // roleValue: "String" // default delegate
            delegate: Rectangle {
                implicitWidth: stringLabel.implicitWidth + 8
                implicitHeight: stringLabel.implicitHeight + 4
                Text {
                    id: stringLabel
                    anchors.baseline: parent.bottom
                    anchors.baselineOffset: -4
                    anchors.left: parent.left
                    anchors.leftMargin: 4
                    text: display
                }
            }
        }
    }

这篇关于如何创建一个 TableView (Qt5.12) 模型作为 ListModel 可以承载可变数量的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！