Question

我正在使用新的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
        }

}

Answer 1

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

The discussed code

它有点长，但他涵盖了

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

Answer 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

Answer 3

当前TableView没有标题，因此您应该创建它，在这种情况下，请使用行，列和中继器。

另一方面，您必须实现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。

如何创建带有列标题的tableview（5.12）？

3 个答案: