enjoy life and code

QtQuick/QML 中 TableView 改变 columnWidth 和 rowHeight 的问题 - TableView 刷新布局的方法

最近在项目中使用到了 QML 的 TableView 因为需要动态调整每一个 Cell 大小。所以需要用到刷新。

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

如果需要动态调整大小则需要在 TableView下添加

rowHeightProvider: function (row) {
        return xxxWidth;

并使用 forceLayout() 具体文档可以点这里

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.

这里说明了会重新计算高宽,但是细节就是 each visible row and column.,这导致不可见的 cell 不会重新计算。

结果就是 originX originY 会变得不可预期。

如果有任何其他控件使用 TableView 的 contentX, contentY ,那么就无法正确计算。
因为 contentX 是根据 originX 计算的。


  1. TableView.forceLayout(): 只会刷新可视的界面
  2. 重设 visible:不会刷新
  3. model 里的 layoutChanged()也只会刷新可视的界面


重置 model,代码如下,重置将 contentX 后重新移动到原来的位置。参照文档实际上 TableView 只有1fps,所以通常不会有什么视觉上的影响。

Responding to changes in the model are batched so that they are handled only once per frame.
var firstIndex = table_view.contentX / (tableCellWidth);
table_view.model = null;
table_view.model = table_model;
table_view.contentX = (tableCellWidth) * firstIndex;