QT 5.1.2 QML 多个Loader子布局参数设置以及交互

直接正题

//a.qml

import QtQuick 2.0

Item {

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:200

y:200

color: "red"

}

}

//b.qml

Item {

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:200

y:200

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"

}

Button{

onClicked: {

//更改颜色

}

}

}

我想在m.qml中的Button的按键事件中修改两个Loader加载的子布局的内容,有两种方式:

(1).第一种 id模式

//a.qml

import QtQuick 2.0

Item {

//使用property alias定义对象

property alias color: rect.color

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:150

y:150

color: "red"

}

}

//b.qml

import QtQuick 2.0

Item {

//使用property alias定义对象

property alias color: rect.color

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:150

y:150

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"

}

Button{

onClicked: {

//更改颜色

//loadera.item中的item是Loader的方法 获取子布局的对象

loadera.item.color = "yellow";

loaderb.item.color = "green"

}

}

}

(2).第二种模式:值模式

//a.qml

import QtQuick 2.0

Item {

property alias col: "red"

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:200

y:200

color: col

}

}

//b.qml

import QtQuick 2.0

Item {

property alias col: "blue"

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:200

y:200

color: col

}

}

//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"

}

Button{

onClicked: {

//更改颜色

console.log("loadera rect at "+loadera.item.color)

loadera.item.color = "yellow";

loaderb.item.color = "green"

}

}

}

 其实上面两种模式都一样,都是使用  property alias 的做法,这个能在子布局里面也互相调用,比如:

//a.qml

import QtQuick 2.0

Item {

property alias col: "red"

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:200

y:200

color: col

MouseArea{

anchors.fill: parent;

onClicked: {

loaderb.item.col = "green"

}

}

}

}

//b.qml

import QtQuick 2.0

Item {

property alias col: "blue"

width: 400

height: 400

Rectangle {

id:rect

width: 100

height: 100

x:200

y:200

color: col

MouseArea{

anchors.fill: parent;

onClicked: {

loadera.item.col = "yellow"

}

}

}

}

//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"

}

Button{

onClicked: {

//更改颜色

console.log("loadera rect at "+loadera.item.color)

loadera.item.color = "yellow";

loaderb.item.color = "green"

}

}

}

好文链接

 您阅读本篇文章共花了：