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

Posted 2023-02-21

【中文标题】如何创建带有列标题的表格视图（5.12）？

【英文标题】：How to create a tableview (5.12 )with column headers?

【发布时间】：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 怎么样？

【参考方案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，则可以使用 Horizo​​ntalHeaderView 作为列标签。

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

可排序的列

列重新排序