如何在QML文件中显示C++硬编码的9×9二维数组？

要实现C中的9×9数组在QML中展示，需完成两个核心步骤：将C模型暴露给QML上下文，以及在QML中构建网格界面渲染数据。

1. 在main.cpp中注册并暴露SudokuModel到QML上下文 #

在程序入口处，把SudokuModel实例注册为QML可访问的上下文属性，让QML能调用其getValue方法获取数组值。

添加如下main.cpp代码：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "SudokuModel.h"

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

    QQmlApplicationEngine engine;
    // 创建SudokuModel实例并暴露给QML，命名为sudokuModel
    SudokuModel sudokuModel;
    engine.rootContext()->setContextProperty("sudokuModel", &sudokuModel);

    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文件，构建数独网格界面 #

使用Grid布局配合Repeater生成9×9单元格，每个单元格通过调用C++模型的getValue方法获取对应位置的数值，0值显示为空字符串。

修改后的QML代码如下：

import QtQuick
import QtQuick.Window
import QtQuick.Controls 6.0

Window {
    width: 450
    height: 450
    visible: true
    title: qsTr("数独游戏")

    // 9x9网格布局
    Grid {
        anchors.centerIn: parent
        columns: 9
        spacing: 2

        // 生成81个单元格
        Repeater {
            model: 81
            delegate: Rectangle {
                width: 48
                height: 48
                color: (index / 9) % 3 === 0 && index % 3 === 0 ? "#f0f0f0" : "#ffffff"
                border.color: "#333333"

                Text {
                    anchors.centerIn: parent
                    font.pixelSize: 24
                    // 计算当前单元格的行和列，调用C++模型获取值，0显示为空
                    text: sudokuModel.getValue(Math.floor(index / 9), index % 9) === 0 ? "" : sudokuModel.getValue(Math.floor(index / 9), index % 9)
                }
            }
        }
    }
}

代码说明 #

• C++部分：SudokuModel的getValue方法已通过Q_INVOKABLE标记，允许QML直接调用。
• QML部分：通过Repeater生成81个单元格，利用index计算对应行（Math.floor(index/9)）和列（index%9），调用sudokuModel.getValue获取数值，0值转换为空字符串；同时通过背景色区分3×3的数独区块，提升视觉辨识度。

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