Qt5.15 Quick.Controls2.15下替代TableViewColumn实现带排序表格方案咨询

Quick Controls 2.x确实移除了TableViewColumn，但你可以通过**自定义表头+SortFilterProxyModel**实现和QTableView一致的展示、排序功能，以下是针对你的场景的具体实现方案：

核心思路 #

1. 用Qt自带的SortFilterProxyModel作为C++模型的代理，无需修改原有模型代码即可处理排序逻辑。
2. 用TableView搭建表格框架，手动定义每一列的显示委托（Delegate）。
3. 自定义表头组件，实现点击列名切换排序顺序的交互。

完整实现示例 #

1. 对接已有C++模型 #

假设你已有基于QAbstractTableModel的C++模型，只需在main.cpp中注册到QML即可：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "YourExistingModel.h" // 替换为你的模型头文件

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    // 注册模型到QML，命名空间和版本可自定义
    qmlRegisterType<YourExistingModel>("com.yourcompany", 1, 0, "YourExistingModel");

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

2. QML表格实现（带排序） #

在main.qml中完成表格布局、排序逻辑和样式定义：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml.Models 2.15  // 引入SortFilterProxyModel
import com.yourcompany 1.0  // 对应注册的C++模型命名空间

ApplicationWindow {
    width: 800
    height: 600
    visible: true
    title: "带排序的表格"

    // 实例化C++模型和排序代理
    YourExistingModel {
        id: sourceModel
    }

    SortFilterProxyModel {
        id: sortProxy
        sourceModel: sourceModel
        sortRole: Qt.DisplayRole  // 基于显示文本排序，可根据模型自定义角色调整
        sortOrder: Qt.AscendingOrder
    }

    TableView {
        id: tableView
        anchors.fill: parent
        model: sortProxy

        // 定义列（已知列数，手动配置每一列）
        TableViewColumn {
            delegate: Text {
                text: model.display
                padding: 10
                horizontalAlignment: Text.AlignLeft
            }
            width: 100  // 第一列宽度
        }
        TableViewColumn {
            delegate: Text {
                text: model.display
                padding: 10
                horizontalAlignment: Text.AlignLeft
            }
            width: 150  // 第二列宽度
        }
        // 按需求继续添加剩余列...

        // 自定义表头，实现点击排序
        headerDelegate: Rectangle {
            height: 40
            color: "#f0f0f0"
            border.color: "#cccccc"

            RowLayout {
                anchors.fill: parent
                spacing: 0

                Repeater {
                    model: tableView.columns
                    Button {
                        Layout.fillWidth: true
                        Layout.height: parent.height
                        text: sourceModel.headerData(index, Qt.Horizontal)
                        flat: true
                        onClicked: {
                            // 切换排序逻辑
                            if (sortProxy.sortColumn === index) {
                                sortProxy.sortOrder = sortProxy.sortOrder === Qt.AscendingOrder 
                                    ? Qt.DescendingOrder 
                                    : Qt.AscendingOrder
                            } else {
                                sortProxy.sortOrder = Qt.AscendingOrder
                            }
                            sortProxy.sort(index, sortProxy.sortOrder)
                        }

                        // 显示排序箭头（无需图片资源）
                        Text {
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.rightMargin: 8
                            text: sortProxy.sortColumn === index 
                                ? (sortProxy.sortOrder === Qt.AscendingOrder ? "↑" : "↓") 
                                : ""
                            visible: sortProxy.sortColumn === index
                            font.pixelSize: 12
                        }
                    }
                }
            }
        }

        // 表格行隔行变色样式
        rowDelegate: Rectangle {
            color: index % 2 === 0 ? "#ffffff" : "#f8f8f8"
            border.color: "#eeeeee"
        }
    }
}

关键说明 #

1. SortFilterProxyModel优势：完全隔离排序逻辑与原有C++模型，不用修改模型代码，支持任意列的升序/降序切换。
2. 列定义灵活性：因为已知列数，可针对每列单独配置宽度、对齐方式（比如数字列右对齐），满足不同数据类型的展示需求。
3. 表头交互：通过Repeater遍历列生成可点击按钮，点击时切换排序顺序并调用代理模型的sort()方法，逻辑清晰易懂。
4. 样式定制：通过headerDelegate和rowDelegate可快速定制表头、行的背景色、边框等，和QTableView的样式定制逻辑一致。

如果你的C++模型已经重写了sort()方法，也可以直接调用模型的sort()替代代理模型，但用代理模型的方式更灵活，不会侵入原有业务代码。

内容的提问来源于stack exchange，提问作者kira20