如何创建带有列标题的表格视图（5.12）？答案

【问题标题】：How to create a tableview (5.12 )with column headers?如何创建带有列标题的表格视图（5.12）？
【发布时间】：2019-08-31 18:30:39
【问题描述】：

我正在使用新的 qml tableview (Qt 5.12) 创建一个表。我能够在 C++ 中创建一个模型，并且能够以表格格式填充模型以及滚动条。如何将列标题添加到此表？代码：

import QtQuick 2.12
import QtQuick.Controls 2.5
import Qt.labs.qmlmodels 1.0
//import QtQuick.Controls.Styles 1.4
import TableModel 0.1
Rectangle {
    id:table
    border.width: 3
    border.color: 'dark blue'
    QtObject{
        id:internals
        property int rows:0
        property int col:0
        property int colwidth:0
        property var columnName:[]
    }

    function setRows(num){ internals.rows = num}
    function setCols(num){ internals.col =  num}
    function setColWidth(num){internals.colwidth = num}

    function setColNames(stringlist){
        if(stringlist.length > 1)
            internals.col = stringlist.length

    dataModel.setColumnName(stringlist);
    }

    function addRowData(stringlist){
        var len = stringlist.length

         if(len >0)
         {
             dataModel.addData(stringlist)
         }
    }

    TableModel {
        id:dataModel
    }

    TableView{
            id:tbl
            anchors.top: headerCell
            anchors.fill: parent
            //columnSpacing: 1
            //rowSpacing: 1
            clip: true

           ScrollBar.horizontal: ScrollBar{}
           ScrollBar.vertical: ScrollBar{}

            model:dataModel

            Component{
                id:datacell
                Rectangle {
                    implicitWidth: 100
                    implicitHeight: 20
                    color: 'white'
                    border.width: 1
                    border.color: 'dark grey'
                    Text {
                        id:txtbox
                        anchors.fill: parent
                        wrapMode:                           Text.NoWrap
                        clip:                               true
                        verticalAlignment:                  Text.AlignVCenter
                        horizontalAlignment:                Text.AlignHCenter
                        text: display
                    }
                }
            }

        }

        function init(){
            console.log("Calling init")
            tbl.delegate= datacell
        }

}

【问题讨论】：

正如 Qt 文档中所说：您通过添加 TableViewColumn 来提供列标题的标题和大小，因此您只需添加一个或多个 TableViewColumn 项目跨度>
@folibis 是旧的 TableView，OP 正在使用新的。
啊，好吧，没注意。在模型中实现headerData 怎么样？

标签： qt qml tableview

【解决方案1】：

目前 TableView 没有标题，所以你应该创建它，在这种情况下使用 Row、Column 和 Repeater。

另一方面，您必须实现 headerData 方法，并且必须执行 Q_INVOKABLE。

class TableModel : public QAbstractTableModel
{
    Q_OBJECT

public:
    // ...
    Q_INVOKABLE QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override;
    // ...

TableView {
    id: tableView
    model: table_model
    // ...
    Row {
        id: columnsHeader
        y: tableView.contentY
        z: 2
        Repeater {
            model: tableView.columns > 0 ? tableView.columns : 1
            Label {
                width: tableView.columnWidthProvider(modelData)
                height: 35
                text: table_model.headerData(modelData, Qt.Horizontal)
                color: '#aaaaaa'
                font.pixelSize: 15
                padding: 10
                verticalAlignment: Text.AlignVCenter

                background: Rectangle { color: "#333333" }
            }
        }
    }
    Column {
        id: rowsHeader
        x: tableView.contentX
        z: 2
        Repeater {
            model: tableView.rows > 0 ? tableView.rows : 1
            Label {
                width: 60
                height: tableView.rowHeightProvider(modelData)
                text: table_model.headerData(modelData, Qt.Vertical)
                color: '#aaaaaa'
                font.pixelSize: 15
                padding: 10
                verticalAlignment: Text.AlignVCenter

                background: Rectangle { color: "#333333" }
            }
        }
    }

您可以找到here 的完整示例。

【讨论】：

感谢@eyllanesc 提供的解决方案。qml 文件中的modelData 是什么？
@anujchauhan 如果您注意到中继器的型号是一个数字，那么它相当于一个 0 到 n-1 的列表，其中 n 是表示的数字，所以数据是 0、1、 2, ..., n-1 和 modelData 就是这样。所以你不必定义任何东西，modelData 会自动创建。阅读doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html#repeaters
非常感谢@eyllanesc，在您的帮助下，我现在可以获取列标题了。
还有一个我正在尝试实现的功能。如何通过鼠标单击或按下回车键来选择完整的行并且选择行的颜色应该改变？关于如何实现此功能的任何想法？
@anujchauhan 我还不知道这个 TableView 的 selectionModel 所以你必须自己实现这个逻辑。

【解决方案2】：

如果您使用的是 Qt 5.15，则可以使用 HorizontalHeaderView 作为列标签。

https://doc.qt.io/qt-5/qml-qtquick-controls2-horizontalheaderview.html

还有 VerticalHeaderView 用于行标签。

https://doc.qt.io/qt-5/qml-qtquick-controls2-verticalheaderview.html

【讨论】：

【解决方案3】：

我是 QML 的新手。在与 new TableView (qt 5.12+) 的斗争中，我多次得到 eyllanesc 的答案，所以我要感谢你并分享对我有更大帮助的东西。就是这个视频： Shawn Rutledge - TableView and DelegateChooser: new in Qt 5.12 2019 年 Qt 虚拟技术峰会的一部分

The discussed code

有点长，但他盖住了

新旧TableView的区别
如何为视图创建通用模型
可调整大小的标题
每种列类型的不同表示 - DelegateChooser
可排序的列
列重新排序

【讨论】：