121 lines
2.4 KiB
Markdown
121 lines
2.4 KiB
Markdown
|
## 前言
|
|||
|
本人发现有关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中的函数,实现了传返回值。
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
}
|
|||
|
```
|
|||
|
另一种就是信号与槽
|