QML之使用Loader加载QML组件

时间:2023-03-08 16:26:34
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. }