qml界面参数传递、返回

weixin_44820280

已于 2022-03-07 08:49:33 修改

阅读量1.8k

点赞数

文章标签： c8051f120 单片机 fpga开发 qt5

于 2022-03-03 14:55:26 首次发布

本文链接：https://blog.csdn.net/weixin_44820280/article/details/123253576

版权

这篇博客介绍了在Qt Quick QML中如何实现在页面之间的值传递，特别是在平级页面间使用StackView进行导航时，如何通过组件生命周期方法和自定义信号来实现参数的传递和返回值的获取。文中详细展示了page1.qml和Numberkey.qml的代码示例，包括如何设置初始值、接收返回值以及在确定按钮点击时调用父页面的函数。

摘要由CSDN通过智能技术生成

背景

：设计设置界面时需要在键盘上设置数值，设定完返回时需要知道返回值是什么。如果用上下级关系实现可能很方便，但是会重复加载按键模块，觉得这样不好。想用stackView.push（url,{初始值，设定后的值}）这样的方式。
1 想过用带参数信号的方式传递，因为两个模块是平级的关系，上级菜单不识别参数名，报错。
2 在网上参考资料使用另外一种
https://blog.csdn.net/happyrabbit456/article/details/56670809?

（以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/Numberkey.qml”),
{number:“100”})//给page2.qml的number为键盘显示的初始值，还想要得到按键后的值，
}
}
…
}

Numberkey.qml定义如下

Rectangle
{
id:rect2
…
property int number:""//要传的值
…
}
(2)Numberkey.qml点击"确定"按钮时将结果返回给page1.qml

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

page1.qml
Rectangle
{
id:rect1
…
label{
text：100
}
MouseArea {
id: maStartQuery
anchors.fill: parent
onClicked:
{
if(!stackView.busy)
stackView.push(Qt.resolvedUrl(“qrc:///qml/Numberkey.qml”),
{number:100,containerqml:rect1})
}
}

//当点击Numberkey.qml中"确定"按钮时调用，此函数在page1中定义

function clickedfunc(temp)
{
label.text= temp
　stackView.pop();//返回到本页
}
…
}

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

追加方法

还有一种


```cpp
Page {
    width: 800
    height: 480
    id:settingpage
   title: qsTr("设置")
   Rectangle {
       color: "#333"
       anchors.fill: parent
   }
   header:  Rectangle {
       width:  parent.width
       height: 40
      Button{
      text:"<-"
      onClicked:   mainStack.pop()
      }
   }

   property int value
   Component{
       id:number_input
       NumberKey{
           id:input
           title: "预置张数"
           Component.onCompleted: input.number=value
           Component.onDestruction: {
               value=input.number
               console.log("Destruction Beginning!")
              }
        }
   }

注意上面的Component.onCompleted:在模块建立的时候执行一次。
Component.onDestruction:在模块销毁的时候执行一次，本例子中在pop后执行