Tableview列自动拟合

Question

我有一个使用PyQt5的应用程序，它在QML中有一个tableview，它从一个dataframe获取数据

每次使用新的dataframe加载更新数据时，我都需要列宽自动适应内容的宽度。我在论坛上没有发现关于这个问题的任何新的答案，旧的答案非常令人困惑，我不敢相信在2021年，没有一个简单的解决方案可以解决桌上治疗中如此常见的问题

我拥有的QML代码如下：

TableView {
  id: tableView
  antialiasing: true
  width: parent.width
  height: parent.height
  columnWidthProvider: function (column) { return 200; }
  rowHeightProvider: function (column) { return 60; }
  leftMargin: rowsHeader.implicitWidth
  topMargin: columnsHeader.implicitHeight
  rightMargin: columnsHeader.implicitHeight
  Layout.fillHeight: true
  model: table_model
  delegate: Rectangle {
    color: "transparent"
    Text {
      text: display
      anchors.fill: parent
      anchors.margins: 10
      horizontalAlignment: Text.AlignHCenter
      color: {
        if (temaescolhido.currentText == 'Claro') return 'Black'
          return 'White'
      }
      font.pixelSize: 15
      verticalAlignment: Text.AlignVCenter
    }
  }
  Rectangle { // mask the headers
    z: 3
    color: "transparent"
    y: tableView.contentY
    x: tableView.contentX
    width: tableView.leftMargin
    height: tableView.topMargin
  }
  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.headData(modelData, Qt.Horizontal)
        color: 'green'
        font.bold: true
        font.pixelSize: 15
        padding: 10
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        background: Rectangle { color: "#adadad" }
      }
    }
  }
  Column {
    id: rowsHeader
    x: tableView.contentX
    z: 2
    Repeater {
      model: tableView.rows > 0 ? tableView.rows : 1
      Label {
        width: 35
        height: tableView.rowHeightProvider(modelData)
        text: table_model.headData(modelData, Qt.Vertical)
        color: 'green'
        font.bold: true
        font.pixelSize: 15
        padding: 10
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        background: Rectangle { color: "#adadad" }
      }
    }
  }

  ScrollIndicator.horizontal: ScrollIndicator { }
  ScrollIndicator.vertical: ScrollIndicator { }
}

Answer 1

新的TableView的想法是设置代理的implicitWidth和implicitHeight，然后TableView应该自动调整行和列的大小

以下是一个简单的例子：

import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt.labs.qmlmodels 1.0

ApplicationWindow {
    id: window
    visible: true
    width: 500
    height: 500

    Row {
        id: buttons
        Button {
            text: "Press To Add Data"
            onClicked: {
                var index = myTableModel.rowCount + 1
                myTableModel.insertRow(0, {
                    "col 0": (1000000+index).toString(),
                    "col 1": index.toString().repeat(index)
                })
            }
        }

        Item {
            // button spacer
            width: 5
            height: 5
        }

        Button {
            text: "Press To Clear Data"
            onClicked: {
                myTableModel.removeRow(0)
            }
        }
    }

    TableView {
        id: tableView

        y: buttons.height
        height: parent.height - buttons.height
        width: parent.width

        columnSpacing: 0
        rowSpacing: 0
        clip: true

        model: TableModel {
            id: myTableModel
            TableModelColumn { display: "col 0" }
            TableModelColumn { display: "col 1" }

            rows: [
                {
                    "col 0": "0",
                    "col 1": "1"
                },
                {
                    "col 0": "2",
                    "col 1": "3"
                },
                {
                    "col 0": "4",
                    "col 1": "5"
                }
            ]
        }

        delegate: Rectangle {
            implicitWidth: childrenRect.width
            implicitHeight: childrenRect.height
            border.width: 1

            Text {
                padding: 5
                text: display
            }
        }
    }
}