QML之使用Loader加载QML组件

呵呵，今晚是边看《裸婚时代》边敲代码，那电影看得...！钱真他妈不是个东西.

盼望Meego火起来。

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

1、

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

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

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

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

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

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

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

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

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

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

5、Loader的 onStatusChanged和onLoaded事件

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