Как создать tableview (5.12) с заголовками столбцов?

ProgramBox

Как создать tableview (5.12) с заголовками столбцов?

Post author:admin
Запись опубликована:8 февраля, 2023
Post category:Вопросы по программированию

#qt #qml #tableview

#qt #qml #просмотр таблицы #tableview

Вопрос:

Я создаю таблицу, используя новый 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
        }

}

1. Как сказано в документах Qt: вы указываете заголовок и размер заголовка столбца, добавляя столбец TableViewColumn , поэтому вам просто нужно добавить один или несколько элементов TableViewColumn

2. @folibis это старый TableView, OP использует новый.

3. Ах, ладно, не обратил внимания. Как насчет реализации headerData в модели?

Ответ №1:

В настоящее время 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" }
            }
        }
    }

Полный пример вы найдете здесь .

1. Спасибо @eyllanesc за решение. Что такое modelData в файле qml?

2. @anujchauhan Если вы заметили, что модель ретранслятора — это число, поэтому оно эквивалентно списку от 0 до n-1, где n — число, которое указывает, поэтому данные равны 0, 1, 2, …, n-1, а modelData — это именно это. Таким образом, вам не нужно ничего определять, modelData будет создан автоматически. Читать doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html#repeaters

3. Большое спасибо @eyllanesc Теперь я могу получить заголовок столбца с вашей помощью.

4. Есть еще одна функция, которую я пытаюсь реализовать. Как я могу выбрать полную строку щелчком мыши или нажатием клавиши enter и при выборе цвета строки должен измениться? Есть идеи о том, как реализовать эту функцию?

5. @anujchauhan, я еще не знаю selectionModel для этого TableView, поэтому вам придется реализовать эту логику самостоятельно.

Ответ №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. Я так много раз приходил к ответу eyllanesc из-за моей борьбы с новым TableView (qt 5.12 ), поэтому я хочу поблагодарить вас и поделиться тем, что помогло мне еще больше. Это видео: Шон Ратледж — TableView и DelegateChooser: новое в Qt 5.12 в рамках Qt Virtual Tech Summit 2019

Обсуждаемый код

Это немного длинновато, но он охватывает

различия между старым и новым TableView
как создать универсальную модель для представлений
заголовки с изменяемым размером
разное представление для каждого типа столбца — DelegateChooser
сортируемые столбцы
изменение порядка столбцов