Question

我正在使用ListView来显示数据。为此，我使用Component作为委托，并使用ListModel作为模型在ListView中创建行：

下图是设计的用例：

我使用function根据从C ++收到的数据创建模型。但由于行和列是动态的，并且每个小方框都显示为checkbox，所以我没有得到如何为此填充/创建模型。

ListModel{
    id:myListModel
}

function createModel(){
    for(var rows = 0 ; rows < 10; rows++)
    {
        ListModel.append({}) //How to add data to model like a group based on the row and col ?
    }
}

由于复选框和列的每个小矩形都是动态的，如何将数据附加到ListModel？

请建议。

Answer 1

我在Github上创建了一个基于QAbstractListModel的QML列表模型，您可以引用它并创建自己的QML列表模型。

我为您的案例编写了一个演示，Test类存储了具有两个属性checkBox1和checkBox2的数据，TestModel是Test的列表容器1}}。

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include "QmlListModel.h"

class Test : public QObject
{
    Q_OBJECT
    Q_PROPERTY(bool checkBox1 MEMBER mCheckBox1)
    Q_PROPERTY(bool checkBox2 MEMBER mCheckBox2)
public:
    explicit Test(bool checkBox1 = false,
                  bool checkBox2 = false):
        mCheckBox1(checkBox1),
        mCheckBox2(checkBox2){}

    bool    mCheckBox1;
    bool    mCheckBox2;
};

class TestModel : public QmlListModel<Test>
{
    Q_OBJECT
    QML_LIST_MODEL
public:
    explicit TestModel(){}
};

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    // register the TestModel for QML.
    qmlRegisterType<TestModel>("QmlListModel", 1, 0 , "TestModel");

    TestModel* testModel = new TestModel;

    for(int i = 0; i < 9; ++i){
        testModel->appendData(new Test(false, false));
    }

    QQmlApplicationEngine engine;
    // put the data into QML context, make you can access it.
    engine.rootContext()->setContextProperty("testModel", testModel);
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    return app.exec();
}

#include "main.moc"

如何在QML中使用：

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Window 2.1

Window {
    visible: true
    width: test.width
    height: test.height

    Column {
        id: test
        spacing: 20
        Grid {
            columns: 3; rows: 3; spacing: 20
            Repeater {
                model: testModel
                delegate: Row {
                    CheckBox {
                        checked: checkBox1 // The property name
                        text: "checkBox1"
                        onCheckedChanged: testModel.get(index).checkBox1 = checked
                    }
                    CheckBox {
                        checked: checkBox2
                        text: "checkBox2"
                        onCheckedChanged: testModel.get(index).checkBox2 = checked
                    }
                }
            }
        }
        Button {
            text: "Debug"
            onClicked: {
                for(var i = 0; i < testModel.size(); i++){
                    console.log("index", i, "checkBox1 is", testModel.get(i).checkBox1);
                    console.log("index", i, "checkBox2 is", testModel.get(i).checkBox2);
                }
            }
        }
    }
}

在QML中创建复杂的列表模型

1 个答案: