QML 在不同文件中创建组件

Question

我正在处理一个小问题：我有 3 个文件：main.qml、actions.qml 和 edit.qml。这个想法是，在编辑中我应该做一些事情，这将在按下按钮后在操作中的滚动中创建一行（有点像历史记录）。一个最小的例子如下所示：

main.qml

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

Item {
    id: main
    width: 1920
    height: 1080
    focus: true

    Rectangle {
        radius: 5
        border.color: "black"
        opacity: 0.6
        anchors.fill: acts
        color: "steelblue"
        visible: acts.visible
    }

    Actions {
        id: acts
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.margins: 50
        width: parent.width * 0.3
        visible: true
    }

    Rectangle {
        radius: 5
        border.color: "black"
        opacity: 0.6
        anchors.fill: edit
        color: "lightcoral"
        visible: edit.visible
    }

    Edit {
        id: edit
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 200
        width: parent.width * 0.3
        height: 100
        visible: true
    }
}

动作.qml

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

Item {
    ScrollView {
            id: scrollarea
            Layout.fillWidth: true
            anchors.top: parent.top
            Layout.preferredHeight: parent.height * 0.9

            ColumnLayout {
                id: actions
                objectName: "actions"
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
}

编辑.qml

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

Item {
    Button {
            text: "Press me"
            onClicked: {
                var component;
                var sprite;
                component = Qt.createComponent("action.qml");
                sprite = component.createObject(actions, {"objectName": "ActionRow"});
            }
        }
}

动作.qml

import QtQuick 2.0
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

RowLayout {
    id: act
    spacing: parent.width * 0.02
    Layout.fillWidth: true

    
    RadioButton {
        Layout.fillWidth: true
        Layout.preferredWidth: 10
    }

    
    Button {
        Layout.fillWidth: true
        Layout.preferredWidth: 20
        text: "X"
        onClicked: {
            act.destroy()
        }
    }

    
    Label {
        Layout.fillWidth: true
        Layout.preferredWidth: 300
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
    }
}

如果我将这 3 个文件放在一起，它可以正常工作，但如果我尝试将其分开，则会导致引用错误（而且我更喜欢将其分开，以便将来更容易编辑），是否可以执行我的操作我想做什么？只是为了一些额外的上下文，我在后台使用 PyQt5 将所有这些放在一起。

Answer 1

您没有指定，但我假设您收到的错误是由于 Edit.qml 正在引用

actions

这是 Actions.qml 中定义的 ColumnLayout，因此无法在此处访问。

解决这个问题最直接的方法是使用信号。将与

actions

相关的函数移至 Actions.qml 中，其他任何操作都不需要知道操作是什么。

• main.qml

Item {
    Actions {
        id: acts
    }

    Edit {
        onEditClicked() {
            acts.addAction();
        }
    }
}

• 编辑.qml

Item {
    signal editClicked()

    Button {
        onClicked: editClicked();
    }
}

• 动作.qml

Item {
    function addItem() {
        var component;
        var sprite;
        component = Qt.createComponent("action.qml");
        sprite = component.createObject(actions, {"objectName": "ActionRow"});
    }

    ScrollView {
        ColumnLayout {
            id: actions
        }
    }
}

我建议的另一个更改是避免按照您的方式手动创建对象。 （这是完全合法的代码，但维护起来要困难得多。）ListView（或Repeater）将自动生成由模型表示的项目。 （最简单的模型类型只是对您想要的项目数量进行计数。）因此您可以将 Actions.qml 更改为如下所示：

Item {
    property int numActions: 0

    function addItem() {
        numActions++;
    }

    ListView {
        model: numActions
        delegate: Action { }
    }
}