Question

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

我尝试使用较旧的tableview实现，但现在想使用Qt 5.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: 'light grey'
            anchors.rightMargin: 1
            Text {
                id: textItem
                anchors.fill: parent
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: styleData.textAlignment
                anchors.leftMargin: 12
                text: styleData.value
                elide: Text.ElideRight
                color: textColor
                renderType: Text.NativeRendering
            }
        }
    }

    resources: {
        var temp =[]
        console.log("Column Cout"+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]
                                                   }))
        }
        //  var objct = temp[temp.length-1]
        // objct.width = tblview.width - ((internals.col -1)*internals.colwidth)
        return temp
    }
    Component{
        id:columnComponent
        TableViewColumn{width: internals.colwidth}
    }

Answer 1

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

对于代表，请使用DelegateChooser和DelegateChoice。

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

在添加之前，我建议您先看看storagemodel manual test。引用委托代码：

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

如何创建一个模型作为listModel的Tableview（Qt5.12），可以容纳可变数量的列？

1 个答案: