BlueRoseNote/07-Other/Qt/QtQuick/QtQuick中QML文件间的通讯问题.md

前言

本人发现有关QML文件之间的通讯的资料不多，而且都不太好找，所以在这里总结一下方便后续的开发者

直接导入qml

目录结构：

myapp
|- mycomponents
  |- CheckBox.qml
  |- DialogBox.qml
  |- Slider.qml
|- main
  |- application.qml

那么可以：

  import "../mycomponents"

  DialogBox {
      CheckBox {
          // ...
      }
      Slider {
          // ...
      }
  }

但是创建一个命名空间来导入会更好

 import "../mycomponents" as MyComponents

  MyComponents.DialogBox {
      // ...
  }

qml文件间通讯

3.题回正传，直接上代码（以StackView管理页面为例） (1)page1.qml跳转到page2.qml传值

page1.qml

Rectangle
{
	id:rect1
	...
 	MouseArea {
            id: maStartQuery
            anchors.fill: parent
            onClicked:
            {
                if(!stackView.busy)
                    stackView.push(Qt.resolvedUrl("qrc:///qml/page2.qml"),
                               {name:"张三"})//给page2.qml的name传值“张三”,name必须在page2.qml中定义成属性
            }
        }
	...
}

page2.qml定义如下

Rectangle
{
	id:rect2
	...
  	property string name:""//要传的值
	...
	
}

(2)page2.qml点击"确定"按钮时将结果返回给page1.qml

A.在page1.qml中增加一个函数clickedfunc，当点击page2.qml中"确定"按钮时调用； B.在page2.qml中增加一个属性containerqml，用来记录page1.qml； C.在从page1.qml跳转到page2.qml时，将rect1传给page2.qml的containerqml属性。

page1.qml
Rectangle
{
	id:rect1
	...
 	MouseArea {
            id: maStartQuery
            anchors.fill: parent
            onClicked:
            {
                if(!stackView.busy)
                    stackView.push(Qt.resolvedUrl("qrc:///qml/page2.qml"),
                               {name:"张三",containerqml:rect1})
            }
        }

    //当点击page2.qml中"确定"按钮时调用
　　function clickedfunc(temp)
    {
         console.log("改成了："+temp);
	　stackView.pop();//返回到本页
    }
	...
}

page2.qml
Rectangle
{
	id:rect2
	...
	property variant containerqml: null
  	property string name:""//要传的值
	...
	MouseArea {
            id: btnOK
            anchors.fill: parent
            onClicked:
            {
                containerqml.clickedfunc("李四");//调用page1.qml中的函数，实现了传返回值。
            }
        }
	
}

另一种就是信号与槽