QML TableView单元格按回车编辑后锁定的实现方法

问题根源分析 #

现有代码存在以下关键问题导致功能失效：

1. 模型未区分可编辑状态：所有单元格都被标记为可编辑，无法实现"编辑后锁定"逻辑；
2. 数据更新未通知视图：setData修改数据后未调用dataChanged，QML视图无法感知数据变化；
3. 回车未触发编辑流程：QML delegate未监听回车键事件，无法触发单元格进入编辑模式；
4. 编辑提交逻辑错误：直接修改display属性无法同步到C++模型，需通过模型的setData完成数据提交。

分步修改方案 #

1. C++模型（Grid类）修改 #

新增状态记录数组区分固定/可编辑单元格，完善模型通知机制：

Grid.h

#ifndef GRID_H
#define GRID_H

#include <QAbstractTableModel>

class Grid : public QAbstractTableModel
{
    Q_OBJECT
public:
    explicit Grid(QObject *parent = nullptr);

    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    int columnCount(const QModelIndex &parent = QModelIndex()) const override;

    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
    bool setData(const QModelIndex &index, const QVariant &value, int role = Qt::EditRole) override;

    Qt::ItemFlags flags(const QModelIndex &index) const override;

private:
    int gridData[9][9];
    bool isFixed[9][9]; // 标记单元格是否为固定（不可编辑）
};

#endif // GRID_H

Grid.cpp

#include "Grid.h"

Grid::Grid(QObject *parent) : QAbstractTableModel(parent)
{
    int initialValues[9][9] = {
        {7, 0, 2, 0, 5, 0, 6, 0, 0},
        {0, 0, 0, 0, 0, 3, 0, 0, 0},
        {1, 0, 0, 0, 0, 9, 5, 0, 0},
        {8, 0, 0, 0, 0, 0, 0, 9, 0},
        {0, 4, 3, 0, 0, 0, 7, 5, 0},
        {0, 9, 0, 0, 0, 0, 0, 0, 8},
        {0, 0, 9, 7, 0, 0, 0, 0, 5},
        {0, 0, 0, 2, 0, 0, 0, 0, 0},
        {0, 0, 7, 0, 4, 0, 2, 0, 3}
    };

    for (int row = 0; row < 9; ++row) {
        for (int col = 0; col < 9; ++col) {
            gridData[row][col] = initialValues[row][col];
            // 初始值不为0的单元格标记为固定
            isFixed[row][col] = (initialValues[row][col] != 0);
        }
    }
}

int Grid::rowCount(const QModelIndex &) const
{
    return 9;
}

int Grid::columnCount(const QModelIndex &) const
{
    return 9;
}

QVariant Grid::data(const QModelIndex &index, int role) const
{
    int row = index.row();
    int col = index.column();

    switch (role) {
    case Qt::DisplayRole:
        return gridData[row][col] == 0 ? QVariant() : gridData[row][col];
    }

    return QVariant();
}

bool Grid::setData(const QModelIndex &index, const QVariant &value, int role)
{
    if (role == Qt::EditRole && !isFixed[index.row()][index.column()]) {
        if (!checkIndex(index))
            return false;

        int val = value.toInt();
        // 只接受1-9的有效值
        if (val >=1 && val <=9) {
            gridData[index.row()][index.column()] = val;
            // 编辑完成后标记为固定，禁止再次编辑
            isFixed[index.row()][index.column()] = true;
            // 通知视图数据已更新
            emit dataChanged(index, index, {Qt::DisplayRole});
            return true;
        }
    }
    return false;
}

Qt::ItemFlags Grid::flags(const QModelIndex &index) const
{
    Qt::ItemFlags baseFlags = QAbstractTableModel::flags(index);
    // 固定单元格不可编辑，否则允许编辑
    return isFixed[index.row()][index.column()] ? baseFlags : (baseFlags | Qt::ItemIsEditable);
}

2. QML代码修改 #

添加回车键监听触发编辑，修正提交逻辑确保数据同步到模型：

TableView {
    id: tableView
    anchors.fill: parent
    clip: true

    model: Grid {} // 需与C++注册的类型名一致

    delegate: Rectangle {
        implicitWidth: 50
        implicitHeight: 50
        
        border {
            color: "white"
            width: 1
        }

        Rectangle {
            width: 1
            height: parent.height
            color: model.column % 3 == 0 ? "black" : "transparent"
        }

        Rectangle {
           width: parent.width
           height: 1
           color: model.row % 3 == 0 ? "black" : "transparent"
        }

        color: model.row % 2 ? "lightpink" : "lightblue"

        Text {
            anchors.centerIn: parent
            text: display
            font.pointSize: 12
        }

        // 监听回车键，触发编辑模式
        Keys.onPressed: {
            if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                // 仅模型允许编辑的单元格可进入编辑
                if (tableView.model.flags(tableView.model.index(model.row, model.column)) & Qt.ItemIsEditable) {
                    tableView.edit(model.index);
                    event.accepted = true;
                }
            }
        }

        TableView.editDelegate: TextField {
            anchors.fill: parent
            text: display || "" // 处理初始值为0的空显示
            horizontalAlignment: TextInput.AlignHCenter
            verticalAlignment: TextInput.AlignVCenter

            Component.onCompleted: selectAll()

            // 回车提交编辑
            onAccepted: {
                tableView.commitData(model);
                tableView.closeEditor();
            }
        }
    }
}

关键说明 #

• 固定单元格逻辑：初始值非0的单元格标记为isFixed，flags方法据此返回是否可编辑；编辑完成后将单元格设为isFixed实现锁定；
• 数据同步：setData修改数据后必须调用dataChanged，否则QML视图不会更新；
• 编辑触发：通过Keys.onPressed监听回车键，调用tableView.edit()进入编辑模式；
• 提交逻辑：使用tableView.commitData()将数据提交到模型，由setData处理实际数据修改。

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