带有水平标题的 QML TableView - 列宽答案

【问题标题】：QML TableView with Horizontal Header - Column Width带有水平标题的 QML TableView - 列宽
【发布时间】：2021-08-03 12:53:02
【问题描述】：

我正在开发一个跨平台应用程序。现在，我正在开发 Window 10，Qt 5.15.2 MinGw 32bit。在我的应用程序中，我在 qml 端有一个 TableView，在 C++ 端有一个从 QSqlQueryModel 派生的模型。我正在使用 QtQuick 2.15。

TableView 包含来自数据库的数据，但我需要一个 Header 来显示列名，所以我在 TableView 中添加了一个 Row 组件。问题出在函数 columnWidthProvider 上。我从文档中知道，如果我什么都不指定，则调整列的宽度以使列的项目适合其中。但我需要知道该宽度值，以便我可以将其提供给行标题组件内的项目，以便将列与其相关的“名称”对齐。

这是我的以下代码：

TableView {
        id: tableViewid

        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
            bottom: goToLapsButtonId.top
            topMargin: 10
            leftMargin: 10
            rightMargin: 10
            bottomMargin: 10
        }

        columnWidthProvider: function (column) {
            if (column === 0)
                return 0;
        }
        rowHeightProvider: function (column) {}
        topMargin: columnsHeader.implicitHeight

        model: masterController.ui_databaseController.ui_tableModel
        clip: true

        property int selectedRow : -1
        delegate: Rectangle {
            id: modelrect
            implicitWidth: textId.implicitWidth + 50
            implicitHeight: textId.implicitHeight + 10
            Text {
                id: textId
                text: display
                anchors.fill: parent
                color: row == tableViewid.selectedRow ? 'white' : 'black'
                font.bold: row == tableViewid.selectedRow
                font.pixelSize: 14
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }

            color: row == tableViewid.selectedRow ? "#AA0000ff" : "#AAffffff"

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if (tableViewid.selectedRow == row)
                        tableViewid.selectedRow = -1
                    else
                        tableViewid.selectedRow = row
                }
            }
        }

        Row {
            id: columnsHeader
            y: tableViewid.contentY
            z: 2
            Repeater {
                id: headerItems
                model: tableViewid.columns > 0 ? tableViewid.columns : 1
                Label {
                    width: tableViewid.columnWidthProvider(modelData)
                    height: 20
                    text: masterController.ui_databaseController.ui_tableModel.headerData(modelData, Qt.Horizontal)
                    color: '#ffffff'
                    font.pixelSize: 15
                    padding: 10
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter

                    background: Rectangle {
                        color: "#000022"
                    }
                }
            }
        }

        onModelChanged: forceLayout()
    }

关于我应该如何进行的任何建议？我设法做相反的事情，将这个函数用于 columnWidthProvider：

columnWidthProvider: function (column) {
            if (column === 0)
                return 0;

            return headerItems.itemAt(column).implicitWidth + 10
        }

在这种情况下，列名与列值对齐，但如果列内的项目大于列名，则被截断。

提前感谢您的帮助。

【问题讨论】：

This question 可能会对您有所帮助。
@MaximSkvortsov 感谢您的评论，我从该链接中获取了结构，但行标题的列宽仍然存在问题。幸运的是，从该问题的答案中，我发现了更易于配置和使用的 HorizontalHeaderView 元素。

标签： qt qml

【解决方案1】：

我解决了我引入这个我不知道的关于 QML HorizontalHeaderView 的组件的问题，该组件仅在 Qt 5.15 中可用。有了这个组件，我不再需要调整标题列的大小，因为它是由组件自动完成的。

【讨论】：