使用动态宽度列的QML TableView

Question

使用动态宽度列的QML TableView

4

我在PySide2 Qt 5.13.0中创建了一个TableView。我希望TableView可以填充父项的宽度，但是除非我拖动表格，否则它不会调整列的大小。从程序开始时，我希望列变得更宽。

main.py

import sys

from PySide2.QtCore import QUrl
from PySide2.QtQml import QQmlApplicationEngine, qmlRegisterType
from PySide2.QtWidgets import QApplication

from table_model import TableModel

import qml_rc  # noqa: F401


if __name__ == "__main__":
    app = QApplication(sys.argv)

    engine = QQmlApplicationEngine()

    qmlRegisterType(TableModel, "TableModel", 1, 0, "TableModel")

    engine.load(QUrl("qrc:/main.qml"))

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec_())

main.qml

import QtQuick 2.13
import QtQuick.Controls 2.13

import TableModel 1.0

ApplicationWindow {
    visible: true

    Component.onCompleted: {
        showMaximized()
    }

    TableView {
        id: tableView
        clip: true
        anchors.fill: parent
        model: TableModel {}
        topMargin: columnsHeader.implicitHeight
        columnWidthProvider: function () { return tableView.width / tableView.model.columnCount(); }

        delegate: Rectangle {
            implicitWidth: tableView.columnWidthProvider()
            implicitHeight: 40

            Text {
                text: display
            }
        }

        Row {
            id: columnsHeader
            y: tableView.contentY
            z: 2

            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1

                Rectangle {
                    width: tableView.columnWidthProvider()
                    height: 60
                    clip: true

                    Label {
                        id: headerText
                        width: parent.width
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: tableView.model.headerData(modelData, Qt.Horizontal)
                        elide: Text.ElideRight
                        clip: true
                    }
                }
            }
        }
    }
}

table_model.py

from typing import Any, Optional

from PySide2.QtCore import QAbstractTableModel, QModelIndex, QObject, Qt

from table import Table


class TableModel(QAbstractTableModel):
    def __init__(self, parent: QObject = None) -> None:
        super().__init__(parent)
        self._model_data = Table(
            ["This", "Is", "A", "Test", "Of", "Headers"],
            [
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
                ["A", 1, 2, "B", "C", "D"],
                ["E", 3, 4, "F", "G", "H"],
                ["I", 5, 6, "J", "K", "L"],
                ["M", 7, 8, "N", "O", "P"],
            ])

    def rowCount(self, parent=QModelIndex()) -> int:
        return len(self._model_data.rows)

    def columnCount(self, parent=QModelIndex()) -> int:
        return len(self._model_data.headers)

    def data(self, index: QModelIndex, role=Qt.DisplayRole) -> Optional[Any]:
        if role != Qt.DisplayRole:
            return None

        if not self.checkIndex(index, QAbstractTableModel.CheckIndexOption.IndexIsValid):
            return None

        return self._model_data.rows[index.row()][index.column()]

    def headerData(self, section: int, orientation, role) -> Optional[str]:
        if role != Qt.DisplayRole:
            return None

        if section < 0 or section >= len(self._model_data.headers):
            return None

        return self._model_data.headers[section]

    def reset_with_data(self, model_data: Table) -> None:
        self.beginResetModel()
        self._model_data = model_data
        self.endResetModel()

table.py


from dataclasses import dataclass
from typing import Any, List


@dataclass
class Table:
    headers: List[str]
    rows: List[List[Any]]

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC>

运行：

pipenv run pyside2-rcc -o qml_rc.py qml.qrc
pipenv run python main.py

- roundtheworld

1

提供一个[MRE]，您指示正在使用ColumnLayout，但在您的代码中我没有看到它。 - eyllanesc

更新完整示例。 - roundtheworld

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eyllanesc · Accepted Answer

正如文档所指出的：

Row heights and column widths

When a new column is flicked into view, TableView will determine its width by calling the columnWidthProvider function. TableView itself will never store row height or column width, as it's designed to support large models containing any number of rows and columns. Instead, it will ask the application whenever it needs to know.

TableView uses the largest implicitWidth among the items as the column width, unless the columnWidthProvider property is explicitly set. Once the column width is found, all other items in the same column are resized to this width, even if new items that are flicked in later have larger implicitWidth. Setting an explicit width on an item is ignored and overwritten.

Note: The calculated width of a column is discarded when it is flicked out of the viewport, and is recalculated if the column is flicked back in. The calculation is always based on the items that are visible when the column is flicked in. This means that it can end up different each time, depending on which row you're at when the column enters. You should therefore have the same implicitWidth for all items in a column, or set columnWidthProvider. The same logic applies for the row height calculation.

If you change the values that a rowHeightProvider or a columnWidthProvider return for rows and columns inside the viewport, you must call forceLayout. This informs TableView that it needs to use the provider functions again to recalculate and update the layout.

Since Qt 5.13, if you want to hide a specific column, you can return 0 from the columnWidthProvider for that column. Likewise, you can return 0 from the rowHeightProvider to hide a row. If you return a negative number, TableView will fall back to calculate the size based on the delegate items.

Note: The size of a row or column should be a whole number to avoid sub-pixel alignment of items.

The following example shows how to set a simple columnWidthProvider together with a timer that modifies the values the function returns. When the array is modified, forceLayout is called to let the changes take effect:
TableView {
    id: tableView

    property var columnWidths: [100, 50, 80, 150]
    columnWidthProvider: function (column) { return columnWidths[column] }

    Timer {
        running: true
        interval: 2000
        onTriggered: {
            tableView.columnWidths[2] = 150
            tableView.forceLayout();
        }
    }
}

^{(强调是我)}

因此，在这种情况下，当TableView的宽度发生变化时，您应该调用forceLayout()。在我的情况下（Qt 5.13.1，PySide2 5.13.1，Linux），我还必须为ApplicationWindow设置宽度和高度：

import QtQuick 2.13
import QtQuick.Controls 2.13

import TableModel 1.0

ApplicationWindow {
    visible: true

    Component.onCompleted: {
        showMaximized()
    }

    width: 640
    height: 480


    TableView {
        id: tableView
        clip: true
        anchors.fill: parent
        model: TableModel{}
        topMargin: columnsHeader.implicitHeight

        columnWidthProvider: function (column) { 
            return tableView.model ? tableView.width/tableView.model.columnCount() : 0
        }

        onWidthChanged: tableView.forceLayout()

        delegate: Rectangle {
            implicitWidth: tableView.columnWidthProvider(column)
            implicitHeight: 40
            Text {
                text: display
            }
        }

        Row {
            id: columnsHeader
            y: tableView.contentY
            z: 2
            Repeater {
                model: tableView.columns > 0 ? tableView.columns : 1
                Rectangle {
                    width: tableView.columnWidthProvider(modelData)
                    height: 60
                    clip: true

                    Label{
                        id: headerText
                        width: parent.width
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: tableView.model ? tableView.model.headerData(modelData, Qt.Horizontal): 0
                        elide: Text.ElideRight
                        clip: true
                    }
                }
            }
        }
    }
}