使用动态创建的选项卡元素在C 和QML之间绑定



我在 main.qml

中有tabview
TabView {
    id: tabRoot
    objectName: "tabRootObj"
}

我的应用程序在每个新传入的TCP连接上创建新的选项卡。以下代码按需创建新选项卡(基于此答案https://stackoverflow.com/a/27093137/3960195(。

void addTab(QQmlApplicationEngine& engine) {
    root_tab = engine.rootObjects().first()->findChild<QQuickItem*>(QStringLiteral("tabRootObj"));
    QVariant new_tab;
    QQmlComponent component(&engine, QUrl("qrc:/MyTab.qml");
    QMetaObject::invokeMethod(root_tab, "addTab",
        Q_RETURN_ARG(QVariant, new_tab),
        Q_ARG(QVariant, QStringLiteral("Tab name")),
        Q_ARG(QVariant, QVariant::fromValue(&component)));
}

使用每个TCP连接,它还创建了类ConnectionManager的新实例,该实例包含一些可以通过属性访问的统计信息(例如,传输字节计数(。

//ConnectionManager.hpp
class ConnectionManager : public QObject
{
    Q_OBJECT
public:
    // ...
    Q_PROPERTY(QString address READ address NOTIFY ipChanged)
    Q_PROPERTY(int received READ received NOTIFY receivedChanged)
    //...
}
//MyTab.qml
Item {
    property string ip
    property int received
    ...
}

我需要的是将这些属性与MyTab.qml内的属性绑定。问题在于该方法TabView.addTab自行创建MyTab的组件,我无法将ConnectionManager的具体实例注入其上下文。此外,连接manager在创建新连接之前不存在,因此我无法通过rootContext在应用程序的开头中添加它。如何在这个新创建的对象之间创建绑定?

这是我在QML中的第一个项目,因此也许有更好的" QML"方法。在这种情况下,显示"正确"方式的回答也可以接受。

正如我在TabView内使用的Repeater所建议的Grecko所推荐的,并为其定义了一个模型。

带有Repeater的TabView看起来像:

TabView {
    id: tabRoot
    Repeater {
        model: ConnectionModel
        delegate: Tab {
            title: connection.name
            Client {
                address connection.address
                received: connection.received
            }
        }
    }
}

如何在QT文档中轻松找到如何创建模型。假设我有一个名为ConnectionModel的模型类(从QAbstractListModel继承(,它包含一个角色connection(用于在Repeater'S delegate中引用ConnectionManager实例(。我使用了QQmlApplicationEngine.rootContext()->setContextProperty()方法将Repeater与我的模型实例连接起来。下面的示例显示了如何建立连接:

QApplication app(argc, argv);
QQmlApplicationEngine engine;
// Create instace of ConnectionModel
ConnectionModel model;
// Assasign the model instance to the QML context property "ConnectionModel"
engine.rootContext()->setContextProperty("ConnectionModel", &model);
// ...
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();

使用每个新的TCP连接,程序创建了ConnectionManager的新实例。之后,它将调用该方法将新记录插入模型并插入新ConnectionManager的参考。

我希望它对必须在qml中创建动态标签的人有帮助。

最新更新