Provides a table view of items to display data from a model. 更多...
| import 语句： | import QtQuick 2.15 |
| Since: | Qt 5.12 |
| 继承： |
A TableView has a model that defines the data to be displayed, and a delegate that defines how the data should be displayed.
TableView inherits Flickable . This means that while the model can have any number of rows and columns, only a subsection of the table is usually visible inside the viewport. As soon as you flick, new rows and columns enter the viewport, while old ones exit and are removed from the viewport. The rows and columns that move out are reused for building the rows and columns that move into the viewport. As such, the TableView support models of any size without affecting performance.
A TableView displays data from models created from built-in QML types such as ListModel and XmlListModel , which populates the first column only in a TableView. To create models with multiple columns, either use TableModel or a C++ model that inherits QAbstractItemModel .
The following example shows how to create a model from C++ with multiple columns:
#include <qqml.h> #include <QAbstractTableModel> class TableModel : public QAbstractTableModel { Q_OBJECT QML_ELEMENT QML_ADDED_IN_MINOR_VERSION(1) public: int rowCount(const QModelIndex & = QModelIndex()) const override { return 200; } int columnCount(const QModelIndex & = QModelIndex()) const override { return 200; } QVariant data(const QModelIndex &index, int role) const override { switch (role) { case Qt::DisplayRole: return QString("%1, %2").arg(index.column()).arg(index.row()); default: break; } return QVariant(); } QHash<int, QByteArray> roleNames() const override { return { {Qt::DisplayRole, "display"} }; } };
And then how to use it from QML:
import QtQuick 2.12 import TableModel 0.1 TableView { anchors.fill: parent columnSpacing: 1 rowSpacing: 1 clip: true model: TableModel {} delegate: Rectangle { implicitWidth: 100 implicitHeight: 50 Text { text: display } } }
For prototyping and displaying very simple data (from a web API, for example), TableModel 可以被使用：
import QtQuick 2.14 import Qt.labs.qmlmodels 1.0 TableView { anchors.fill: parent columnSpacing: 1 rowSpacing: 1 clip: true model: TableModel { TableModelColumn { display: "name" } TableModelColumn { display: "color" } rows: [ { "name": "cat", "color": "black" }, { "name": "dog", "color": "brown" }, { "name": "bird", "color": "white" } ] } delegate: Rectangle { implicitWidth: 100 implicitHeight: 50 border.width: 1 Text { text: display anchors.centerIn: parent } } }
TableView recycles delegate items by default, instead of instantiating from the delegate whenever new rows and columns are flicked into view. This approach gives a huge performance boost, depending on the complexity of the delegate.
When an item is flicked out, it moves to the reuse pool , which is an internal cache of unused items. When this happens, the TableView::pooled signal is emitted to inform the item about it. Likewise, when the item is moved back from the pool, the TableView::reused 信号发射。
Any item properties that come from the model are updated when the item is reused. This includes
index
,
row
，和
column
, but also any model roles.
注意： Avoid storing any state inside a delegate. If you do, reset it manually on receiving the TableView::reused 信号。
If an item has timers or animations, consider pausing them on receiving the TableView::pooled signal. That way you avoid using the CPU resources for items that are not visible. Likewise, if an item has resources that cannot be reused, they could be freed up.
If you don't want to reuse items or if the
delegate
cannot support it, you can set the
reuseItems
特性到
false
.
注意： While an item is in the pool, it might still be alive and respond to connected signals and bindings.
The following example shows a delegate that animates a spinning rectangle. When it is pooled, the animation is temporarily paused:
Component { id: tableViewDelegate Rectangle { implicitWidth: 100 implicitHeight: 50 TableView.onPooled: rotationAnimation.pause() TableView.onReused: rotationAnimation.resume() Rectangle { id: rect anchors.centerIn: parent width: 40 height: 5 color: "green" RotationAnimation { id: rotationAnimation target: rect duration: (Math.random() * 2000) + 200 from: 0 to: 359 running: true loops: Animation.Infinite } } } }
When a new column is flicked into view, TableView will determine its width by calling the columnWidthProvider function. TableView does not 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.
注意：
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 column width can be 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 或 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
从
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.
注意： 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(); } } }
All new items that are instantiated from the delegate are parented to the
contentItem
采用
z
值，
1
. You can add your own items inside the Tableview, as child items of the Flickable. By controlling their
z
value, you can make them be on top of or underneath the table items.
Here is an example that shows how to add some text on top of the table, that moves together with the table as you flick:
TableView { id: tableView topMargin: header.implicitHeight Text { id: header text: "A table header" } }
|
columnSpacing : real |
This property holds the spacing between the columns.
默认值为
0
.
|
columnWidthProvider : var |
This property can hold a function that returns the column width for each column in the model. It is called whenever
TableView
needs to know the width of a specific column. The function takes one argument,
column
, for which the
TableView
needs to know the width.
Since Qt 5.13, if you want to hide a specific column, you can return
0
width for that column. If you return a negative number,
TableView
calculates the width based on the delegate items.
另请参阅 rowHeightProvider and Row heights and column widths .
|
[read-only] columns : int |
This property holds the number of columns in the table.
注意： columns is usually equal to the number of columns in the model, but can temporarily differ until all pending model changes have been processed.
If the model is a list, columns will be
1
.
This property is read only.
|
contentHeight : real |
This property holds the table height required to accommodate the number of rows in the data model. This is usually not the same as the
height
的
view
, which means that the table's height could be larger or smaller than the viewport height. As a
TableView
cannot always know the exact height of the table without loading all rows in the model, the
contentHeight
is usually an estimate based on the initially loaded table.
If you know what the height of the table will be, assign a value to
contentHeight
, to avoid unnecessary calculations and updates to the
TableView
.
另请参阅 contentWidth and rowHeightProvider .
|
contentWidth : real |
This property holds the table width required to accommodate the number of columns in the model. This is usually not the same as the
width
的
view
, which means that the table's width could be larger or smaller than the viewport width. As a
TableView
cannot always know the exact width of the table without loading all columns in the model, the
contentWidth
is usually an estimate based on the initially loaded table.
If you know what the width of the table will be, assign a value to
contentWidth
, to avoid unnecessary calculations and updates to the
TableView
.
另请参阅 contentHeight and columnWidthProvider .
|
delegate : Component |
The delegate provides a template defining each cell item instantiated by the view. The model index is exposed as an accessible
index
property. The same applies to
row
and
column
. Properties of the model are also available depending upon the type of
Data Model
.
A delegate should specify its size using implicitWidth and implicitHeight 。 TableView lays out the items based on that information. Explicit width or height settings are ignored and overwritten.
注意：
Delegates are instantiated as needed and may be destroyed at any time. They are also reused if the
reuseItems
property is set to
true
. You should therefore avoid storing state information in the delegates.
另请参阅 Row heights and column widths and Reusing items .
This property holds the model that provides data for the table.
The model provides the set of data that is used to create the items in the view. Models can be created directly in QML using TableModel , ListModel , XmlListModel ，或 ObjectModel , or provided by a custom C++ model class. The C++ model must be a subclass of QAbstractItemModel or a simple list.
另请参阅 数据模型 .
|
reuseItems : bool |
This property holds whether or not items instantiated from the
delegate
should be reused. If set to
false
, any currently pooled items are destroyed.
另请参阅 Reusing items , TableView::pooled ，和 TableView::reused .
|
rowHeightProvider : var |
This property can hold a function that returns the row height for each row in the model. It is called whenever
TableView
needs to know the height of a specific row. The function takes one argument,
row
, for which the
TableView
needs to know the height.
Since Qt 5.13, if you want to hide a specific row, you can return
0
height for that row. If you return a negative number,
TableView
calculates the height based on the delegate items.
另请参阅 columnWidthProvider and Row heights and column widths .
|
rowSpacing : real |
This property holds the spacing between the rows.
默认值为
0
.
|
[read-only] rows : int |
This property holds the number of rows in the table.
注意： rows is usually equal to the number of rows in the model, but can temporarily differ until all pending model changes have been processed.
This property is read only.
若
syncView
被设置在
TableView
, this property controls synchronization of flicking direction(s) for both tables. The default is
Qt.Horizontal | Qt.Vertical
, which means that if you flick either table in either direction, the other table is flicked the same amount in the same direction.
This property and syncView can be used to make two tableViews synchronize with each other smoothly in flicking regardless of the different overshoot/undershoot, velocity, acceleration/deceleration or rebound animation, and so on.
A typical use case is to make several headers flick along with the table.
另请参阅 syncView and headerView.
|
syncView : TableView |
If this property of a TableView is set to another TableView , both the tables will synchronize with regard to flicking, column widths/row heights, and spacing according to syncDirection .
若 syncDirection contains Qt.Horizontal, current tableView's column widths, column spacing, and horizontal flicking movement synchronizes with syncView's.
若 syncDirection contains Qt.Vertical, current tableView's row heights, row spacing, and vertical flicking movement synchronizes with syncView's.
另请参阅 syncDirection .
|
TableView.view : TableView |
This attached property holds the view that manages the delegate instance. It is attached to each instance of the delegate.
This signal is emitted after an item has been added to the reuse pool. You can use it to pause ongoing timers or animations inside the item, or free up resources that cannot be reused.
This signal is emitted only if the
reuseItems
特性为
true
.
注意：
相应处理程序是
onPooled
.
另请参阅 Reusing items , reuseItems ，和 reused .
This signal is emitted after an item has been reused. At this point, the item has been taken out of the pool and placed inside the content view, and the model properties such as index, row, and column have been updated.
Other properties that are not provided by the model does not change when an item is reused. You should avoid storing any state inside a delegate, but if you do, manually reset that state on receiving this signal.
This signal is emitted when the item is reused, and not the first time the item is created.
This signal is emitted only if the
reuseItems
特性为
true
.
注意：
相应处理程序是
onReused
.
另请参阅 Reusing items , reuseItems ，和 pooled .
Responding to changes in the model are batched so that they are handled only once per frame. This means the TableView delays showing any changes while a script is being run. The same is also true when changing properties, such as rowSpacing or leftMargin .
This method forces the TableView to immediately update the layout so that any recent changes take effect.
Calling this function re-evaluates the size and position of each visible row and column. This is needed if the functions assigned to rowHeightProvider or columnWidthProvider return different values than what is already assigned.
