如何基于QStandardItemModel实现QML TableView分类型可编辑委托？

我之前做Qt项目时刚好碰到过这个需求，折腾了几次终于摸出了顺畅的实现思路，分C++和QML两部分给你拆解清楚，保证能直接跑通：

核心思路是给每个单元格的QStandardItem添加自定义角色，用来标记该单元格的数据类型，这样QML就能根据这个角色动态选择对应的编辑委托。

步骤1：定义自定义角色 #

先在C++里定义一个枚举，用来区分不同的数据类型：

#include <QStandardItemModel>
#include <QStandardItem>

// 自定义角色，用来标记数据类型
enum CustomRoles {
    DataTypeRole = Qt::UserRole + 1,
    // 如果下拉框选项是动态的，还可以加个ComboOptionsRole存选项列表
    ComboOptionsRole = Qt::UserRole + 2
};

// 注册角色到QML，让QML能直接访问
qRegisterMetaType<CustomRoles>("CustomRoles");
qmlRegisterUncreatableType<CustomRoles>("CustomTypes", 1, 0, "CustomRoles", "Cannot create instance of CustomRoles");

步骤2：构建可编辑的Model #

给每个QStandardItem设置数据、类型标记，同时开启可编辑权限：

QStandardItemModel* createEditableModel(QObject* parent) {
    auto model = new QStandardItemModel(parent);
    model->setColumnCount(3);
    model->setHorizontalHeaderLabels({"布尔值列", "字符串下拉列", "普通文本列"});

    // 第一列：布尔值类型
    auto boolItem = new QStandardItem();
    boolItem->setData(true, Qt::EditRole); // 实际数据
    boolItem->setData("bool", DataTypeRole); // 类型标记
    boolItem->setFlags(Qt::ItemIsEditable | Qt::ItemIsEnabled | Qt::ItemIsSelectable); // 开启编辑

    // 第二列：下拉字符串类型
    auto comboItem = new QStandardItem();
    comboItem->setData("选项A", Qt::EditRole);
    comboItem->setData("combo", DataTypeRole);
    comboItem->setFlags(Qt::ItemIsEditable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);
    // 如果下拉选项是动态的，还可以存到ComboOptionsRole
    // comboItem->setData(QVariant::fromValue(QStringList{"选项A", "选项B", "选项C"}), ComboOptionsRole);

    // 第三列：普通文本类型
    auto textItem = new QStandardItem("初始文本");
    textItem->setData("text", DataTypeRole);
    textItem->setFlags(Qt::ItemIsEditable | Qt::ItemIsEnabled | Qt::ItemIsSelectable);

    model->appendRow({boolItem, comboItem, textItem});
    return model;
}

步骤3：把Model暴露给QML #

在主函数里将Model注入QML上下文：

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

    auto model = createEditableModel(&engine);
    engine.rootContext()->setContextProperty("editableModel", model);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

在QML的TableView中，用Loader根据DataTypeRole的值，动态加载对应类型的编辑组件（复选框、下拉框、文本框）。

完整QML代码 #

import QtQuick 2.15
import QtQuick.Controls 2.15
import CustomTypes 1.0 // 导入自定义角色

TableView {
    width: 600
    height: 400
    model: editableModel

    // 定义列
    columns: [
        TableViewColumn {
            role: "0"
            title: model.headerData(0, Qt.Horizontal)
            width: 150
        },
        TableViewColumn {
            role: "1"
            title: model.headerData(1, Qt.Horizontal)
            width: 200
        },
        TableViewColumn {
            role: "2"
            title: model.headerData(2, Qt.Horizontal)
            width: 250
        }
    ]

    // 动态委托核心：用Loader根据数据类型加载不同组件
    delegate: Loader {
        sourceComponent: {
            const dataType = model.data(index, CustomRoles.DataTypeRole);
            if (dataType === "bool") return boolDelegate;
            else if (dataType === "combo") return comboDelegate;
            else return textDelegate;
        }

        // 布尔值委托：复选框
        Component {
            id: boolDelegate
            CheckBox {
                anchors.fill: parent
                checked: model.data(index, Qt.EditRole)
                onClicked: model.setData(index, checked, Qt.EditRole)
            }
        }

        // 下拉框委托：可选字符串
        Component {
            id: comboDelegate
            ComboBox {
                anchors.fill: parent
                // 如果是动态选项，就绑定model.data(index, CustomRoles.ComboOptionsRole)
                model: ListModel {
                    ListElement { text: "选项A" }
                    ListElement { text: "选项B" }
                    ListElement { text: "选项C" }
                }
                currentText: model.data(index, Qt.EditRole)
                onCurrentTextChanged: model.setData(index, currentText, Qt.EditRole)
            }
        }

        // 普通文本委托：输入框
        Component {
            id: textDelegate
            TextField {
                anchors.fill: parent
                text: model.data(index, Qt.EditRole)
                onTextChanged: model.setData(index, text, Qt.EditRole)
            }
        }
    }
}

1. 必须开启Item的可编辑权限：给QStandardItem设置Qt::ItemIsEditable flag，否则QML里的setData不会生效。
2. 自定义角色的注册：一定要把自定义角色注册到QML，不然QML无法识别DataTypeRole。
3. Qt 6兼容：如果用Qt 6，TableView的列定义要改成TableColumn，role的绑定方式略有不同，但核心的动态委托逻辑完全一致。

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