QML Loader数据更改问题

Question

QT 5.1.2使用QML的Loader加载.qml,怎么在不同的qml中互相更改内容,比如:
a.qml:

import QtQuick 2.0
Item {
    width: 100
    height: 100
    Rectangle {
        id:rect
        width: 100
        height: 100
        color: "red"
    }
}

b.qml

import QtQuick 2.0
Item {
    width: 100
    height: 100
    Rectangle {
        id:rect
        width: 100
        height: 100
        color: "blue"
    }
}

m.qml:

import QtQuick 2.4
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick 2.1
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.1
import Qt.labs.settings 1.0
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow{
    visible: true
    width: 680
    height: 480
    Loader{
        id:loadera
        source: "a.qml"
    }
    Loader{
        id:loaderb
        source: "b.qml"
        anchors.left: loadera.right
    }
    Button{
        onClicked: {
            //更改颜色
        }
    }
}

我要怎么在m.qml的Button中修改a.qml以及b.qml的颜色或者某个参数

Answer 1

你可以使用property alias来导出qml文件内部相应的属性，然后在另一个qml文件里就可以对其进行相应的修改。

a.qml

import QtQuick 2.0
Item {
    property alias color: rect.color
    width: 100
    height: 100
    Rectangle {
        id:rect
        width: 100
        height: 100
        color: "red"
    }
}

b.qml

import QtQuick 2.0
Item {
    property alias color: rect.color
    width: 100
    height: 100
    Rectangle {
        id:rect
        width: 100
        height: 100
        color: "blue"
    }
}

m.qml

import QtQuick 2.4
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick 2.1
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.1
import Qt.labs.settings 1.0
import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow{
    visible: true
    width: 680
    height: 480
    Loader{
        id:loadera
        source: "a.qml"
    }
    Loader{
        id:loaderb
        source: "b.qml"
        anchors.left: loadera.right
    }
    Button{
        onClicked: {
            //更改颜色
            loadera.item.color = "yellow";
            loaderb.item.color = "green";
        }
    }
}