如何创建一个TableView (Qt5.12)，模型为ListModel，可以容纳可变的列数？

Question

我正在创建一个具有多行和多列的表。如何使用QML TableView创建具有多行和多列的表？

我尝试使用较早的TableView实现，但现在希望使用QT5.12中提供的新TableView创建相同的实现。下面是我以前的实现的示例代码

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

Answer 1

我建议使用从C++派生的QAbstractTableModel模型，如示例中所示。

对于委托，请使用DelegateChooser和DelegateChoice。

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

• QTBUG-73964
• QTBUG-74965

在添加之前，我建议查看一下贮藏室模型人工试验。引用委托代码：

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