QML使用loader加载qml文件到QML

转自： http://blog.chinaunix.net/uid-26126915-id-4366840.html

QML的Loader元素经常备用来动态加载QML组件。可以使用source属性或者sourceComponent属性加载。这个元素最有用的地方是它能在qml组件需要的时候再创建，即延迟创建QML的时间。

 

1、

[css] view plain copy

1. main.qml  
2. ------------------------------------  
3. import QtQuick 1.0  
4.   
5. Item {  
6.     property bool isFirst : false;  
7.     width: 200  
8.     height: 200  
9.   
10.     Loader {  
11.         id: pageLoader  
12.     }  
13.   
14.     MouseArea {  
15.         anchors.fill: parent  
16.         onClicked: changePage();  
17.     }  
18.   
19.     function changePage() {  
20.         if(isFirst) {  
21.             pageLoader.source = "Page1.qml"  
22.         } else {  
23.             pageLoader.source = "Page2.qml"  
24.         }  
25.   
26.         isFirst = !isFirst;  
27.     }  
28.   
29. }  
30.   
31.   
32. Page1.qml  
33. -------------------------------------  
34. import QtQuick 1.0  
35.   
36. Rectangle {  
37.     width: 100  
38.     height: 62  
39.     Text {  
40.         anchors.centerIn: parent  
41.         text: "Page1 Test"  
42.     }  
43. }  
44.   
45.   
46. Page2.qml  
47. ---------------------------------------  
48. import QtQuick 1.0  
49.   
50. Rectangle {  
51.     width: 100  
52.     height: 62  
53.     Text {  
54.         anchors.centerIn: parent  
55.         text: "Page1 Test"  
56.     }  
57. }  

 

2、上面的代码就能界面在Page1和Page2之间切换了，别忘了还能使用sourceComponent属性:

[css] view plain copy

1. main.qml  
2. --------------------------------------  
3. import QtQuick 1.0  
4.   
5. Item {  
6.     property bool isFirst : false;  
7.     width: 200  
8.     height: 200  
9.   
10.     Loader {  
11.         id: pageLoader  
12.         sourceComponent: rect  
13.     }  
14.   
15.     MouseArea {  
16.         anchors.fill: parent  
17.         onClicked: changePage();  
18.     }  
19.   
20.     function changePage() {  
21.         if(isFirst) {  
22.             pageLoader.source = "Page1.qml"  
23.         } else {  
24.             pageLoader.source = "Page2.qml"  
25.         }  
26.   
27.         isFirst = !isFirst;  
28.     }  
29.   
30.     Component {  
31.         id: rect  
32.         Rectangle {  
33.             width: 200  
34.             height: 50  
35.             color: "red"  
36.             Text {  
37.                 text: "Default Page"  
38.                 anchors.fill: parent  
39.             }  
40.         }  
41.     }  
42.   
43. }  

上面的代码实现了默认加载组件功能.

 

 

3、接收来自加载的qml发出的信号

使用Connections元素可以接收到任何发送自加载组件的信号。

 

[css] view plain copy

1. main.qml  
2. ---------------------------------------  
3. import QtQuick 1.0  
4.   
5. Item {  
6.     property bool isFirst : false;  
7.     width: 200  
8.     height: 200  
9.   
10.     Loader {  
11.         id: pageLoader  
12.         source: "Page1.qml"  
13.     }  
14.   
15.   
16.     Connections {  
17.         target: pageLoader.item  
18.         onMessage: console.log(msg);  
19.     }  
20.   
21. }  
22.   
23. Page1.qml  
24. ----------------------------------------------  
25. import QtQuick 1.0  
26.   
27. Rectangle {  
28.     id: myItem  
29.     signal message(string msg)  
30.     width: 100; height: 100  
31.   
32.     MouseArea {  
33.         anchors.fill: parent  
34.         onClicked: myItem.message("clicked!");  
35.     }  
36. }  

 

 

4、加载与被加载组件中都有相同的事件，那么需要设置Loader的属性focus为true，且设置被加载组件 focus: true才能让事件不被传播到被加载组件。

 

[css] view plain copy

1. main.qml  
2. -------------------------------------  
3. import QtQuick 1.0  
4.   
5. Item {  
6.     property bool isFirst : false;  
7.     width: 200  
8.     height: 200  
9.   
10.     Loader {  
11.         id: pageLoader  
12.         source: "Page2.qml"  
13.         focus: true  
14.     }  
15.     
16.     Keys.onPressed: {  
17.         console.log("Captured: ", event.text);  
18.          event.accepted = true;  
19.     }  
20.   
21. }  
22.   
23.   
24. Page2.qml  
25. ---------------------------------  
26. import QtQuick 1.0  
27.   
28. Rectangle {  
29.     width: 100  
30.     height: 62  
31.     Text {  
32.         anchors.centerIn: parent  
33.         text: "Page2 Test"  
34.     }  
35.     focus: true  
36.     Keys.onPressed: {  
37.         console.log("Loaded item captured: ", event.text);  
38.         event.accepted = true;  
39.     }  
40. }  

 如果在Page2.qml中去掉event.accepted = true;那么main.qml和Page2.qml都会接收到按键事件，也就是说按键事件会传播到main.qml中

 

5、Loader的 onStatusChanged和onLoaded事件

 

[css] view plain copy

1. main.qml  
2. -------------------------------------  
3. import QtQuick 1.0  
4.   
5. Item {  
6.     property bool isFirst : false;  
7.     width: 200  
8.     height: 200  
9.   
10.     Loader {  
11.         id: pageLoader  
12.         source: "Page2.qml"  
13.         focus: true  
14.         onStatusChanged:  console.log(pageLoader.status == Loader.Ready)  
15.         onLoaded: console.log("Loaded")  
16.     }  
17.   
18.     MouseArea {  
19.         anchors.fill: parent  
20.         onClicked: changePage();  
21.     }  
22.   
23.     function changePage() {  
24.         if(isFirst) {  
25.             pageLoader.source = "Page1.qml"  
26.         } else {  
27.             pageLoader.source = "Page2.qml"  
28.         }  
29.   
30.         isFirst = !isFirst;  
31.     }  
32.   
33.     Component {  
34.         id: rect  
35.         Rectangle {  
36.             width: 200  
37.             height: 50  
38.             color: "red"  
39.             Text {  
40.                 text: "Default Page"  
41.                 anchors.fill: parent  
42.             }  
43.         }  
44.     }  
45.   
46.     Keys.onPressed: {  
47.         console.log("Captured: ", event.text);  
48.          event.accepted = true;  
49.     }  
50.   
51. }