Python 动态实例化 QML 组件

Question

我想使用 Python 将自定义组件动态添加到我的 view.qml，但我不确定我的方法，因为我在结果 window。理想情况下，我希望能够将几行按钮实例化到 ColumnLayout 中。顺便说一下，Button.qml 自定义快速 example/demo 按钮的源代码也包含在下面。它不是 PySide6 库中的 QtQuick Button.qml

我以为我可以从 view.qml 调用函数，但显然不行？我见过另一种涉及使用单独的 Javascript 文件的方法，但我想尽可能避免这样做。

Main.py

import os
from pathlib import Path
import sys
from PySide6.QtCore import  QUrl, QObject
from PySide6.QtGui import QGuiApplication
from PySide6.QtQuick import QQuickView

class CreateWidgets(QObject):
    
    def instantiate_widgets(self, root, widgetsNeeded):
        #for i in widgetsNeeded:
            root.doSomething
    
if __name__ == '__main__':
    app = QGuiApplication(sys.argv)
    view = QQuickView()
    view.setResizeMode(QQuickView.SizeRootObjectToView);

    qml_file = os.fspath(Path(__file__).resolve().parent / 'view.qml')
    view.setSource(QUrl.fromLocalFile(qml_file))
    if view.status() == QQuickView.Error:
        sys.exit(-1)
    
    root = view.rootObject()
    widgetCreator = CreateWidgets()
    widgetCreator.instantiate_widgets(root, 6)
    
    view.show()
    res = app.exec()
    # Deleting the view before it goes out of scope is required to make sure all child QML instances
    # are destroyed in the correct order.
    del view
    sys.exit(res)

view.qml

import QtQuick 2.0
import QtQuick.Layouts 1.12

Item{
    function doSomething(){
        var component = Qt.createComponent("Button.qml");
        if (component.status === Component.Ready) {
            var button = component.createObject(colLayout);
            button.color = "red";
        }
        console.log("Button created");
    }
    ColumnLayout{
        id: colLayout
        Rectangle {
            id: page           
            width: 500; height: 200
            color: "lightgray"  
         }   
    }
}

Button.qml

import QtQuick 2.0

Rectangle { width: 80; height: 50; color: "red"; anchors.fill: parent}

（评论区问题代码参考）

Main.py
import os
import random
import sys
from pathlib import Path

from PySide6.QtCore import Property, QUrl, QObject, Qt
from PySide6.QtGui import QColor, QGuiApplication, QStandardItem, QStandardItemModel
from PySide6.QtQuick import QQuickView

ColorRole = Qt.UserRole
BorderRole = Qt.UserRole

class Manager(QObject):
    def __init__(self, parent=None):
        super().__init__(parent)
        self._model = QStandardItemModel()
        self._model.setItemRoleNames({Qt.DisplayRole: b"display", ColorRole: b"custom", BorderRole: b"custom2"})

    @Property(QObject, constant=True)
    def model(self):
        return self._model

    def add_button(self, text, color, bColor):
        item = QStandardItem(text)
        item.setData(color, ColorRole)
        item.setData(bColor, BorderRole)
        self._model.appendRow(item)


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)

    manager = Manager()

    view = QQuickView()
    view.rootContext().setContextProperty("manager", manager)
    view.setResizeMode(QQuickView.SizeRootObjectToView)

    qml_file = os.fspath(Path(__file__).resolve().parent / "view.qml")
    view.setSource(QUrl.fromLocalFile(qml_file))
    if view.status() == QQuickView.Error:
        sys.exit(-1)

    for i in range(6):
        color = QColor(*random.sample(range(0, 255), 3))
        border = QColor(*random.sample(range(0, 255), 3))
        manager.add_button(f"button-{i}", color, border)

    view.show()
    res = app.exec()
    sys.exit(res)

View.qml

import QtQuick 2.0
import QtQuick.Layouts 1.12

Item {
    ColumnLayout {
        id: colLayout
        anchors.fill: parent
        Repeater{
            model: manager.model
            Button{
                color: model.custom
                text: model.display
                border.color: model.custom2
            }
        }
    }
}

Button.qml

import QtQuick 2.0

Rectangle {
    id: root

    property alias text: txt.text
    width: 80
    height: 50
    color: "red"
    border.color: "black"

    Text{
        id: txt
        anchors.centerIn: parent
    }
}

Answer 1

想法是 Python（或 C++）向 QML 提供信息以创建项目，例如使用模型和 Repeater。

另一方面，如果一个项目将成为 ColumnLayout 的子项，那么它不应使用锚点，因为它们都处理项目的几何形状，因此会发生冲突。

考虑到以上，我添加了更多元素，例如可变文本、可变颜色等来演示逻辑。

import os
import random
import sys
from pathlib import Path

from PySide6.QtCore import Property, QUrl, QObject, Qt
from PySide6.QtGui import QColor, QGuiApplication, QStandardItem, QStandardItemModel
from PySide6.QtQuick import QQuickView

ColorRole = Qt.UserRole


class Manager(QObject):
    def __init__(self, parent=None):
        super().__init__(parent)
        self._model = QStandardItemModel()
        self._model.setItemRoleNames({Qt.DisplayRole: b"display", ColorRole: b"custom"})

    @Property(QObject, constant=True)
    def model(self):
        return self._model

    def add_button(self, text, color):
        item = QStandardItem(text)
        item.setData(color, ColorRole)
        self._model.appendRow(item)


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)

    manager = Manager()

    view = QQuickView()
    view.rootContext().setContextProperty("manager", manager)
    view.setResizeMode(QQuickView.SizeRootObjectToView)

    qml_file = os.fspath(Path(__file__).resolve().parent / "view.qml")
    view.setSource(QUrl.fromLocalFile(qml_file))
    if view.status() == QQuickView.Error:
        sys.exit(-1)

    for i in range(6):
        color = QColor(*random.sample(range(0, 255), 3))
        manager.add_button(f"button-{i}", color)

    view.show()
    res = app.exec()
    sys.exit(res)

import QtQuick 2.0
import QtQuick.Layouts 1.12

Item {
    ColumnLayout {
        id: colLayout
        anchors.fill: parent
        Repeater{
            model: manager.model
            Button{
                color: model.custom
                text: model.display
            }
        }
    }
}

import QtQuick 2.0

Rectangle {
    id: root

    property alias text: txt.text
    width: 80
    height: 50
    color: "red"

    Text{
        id: txt
        anchors.centerIn: parent
    }
}

更新：

每个角色必须有不同的数值，否则 Qt 无法识别它，在你的情况下你可以改变：

BorderRole = Qt.UserRole + 1

Python 动态实例化 QML 组件

Python dynamically instantiate QML Components

python

pyside

qml

pyside6