qml 是一种动态加载的解释性语言,可以通过替换qml来达到实现不同界面的动态更新。 接下来介绍下:qml的界面跳转,传参,销毁,去掉标题栏 这篇项目的源码,放在github上面,点击这里到github上面去获取源码 界面跳转我们有界面 first.qml 和 second.qml import QtQuick 2.5 import QtQuick.Window 2.2 Window { id: appWindow visible:true width: 640 height: 480 Component.onCompleted: { //在这个界面加载完毕的时候去加载另一个界面 loadView("qrc:/main.qml") } function loadView (viewFile, data) { // 注意这里是创建在堆上的,所以需要手动调用释放内存的函数 destroy var component = Qt.createComponent(viewFile) if (component.status === Component.Ready) { // 这里就会加载界面,这里的入参为parent ,表示父亲元素,且认为必传吧 component.createObject(appWindow) }else{ console.error("Error loading view:", component.errorString()) } } }
传参上面说到:使用 component.createObject(appWindow) 来进行加载界面,其实加载的同时也可以传递参数。// 传递给另外一个界面需要使用 `{key:value}` 这种map的方式 component.createObject(appWindow,{viewData: data}) 另外一个界面,需要有个 viewData 的propertyimport QtQuick 2.0 import QtQuick.Controls 1.2 Rectangle{ id: view width: 640 height: 480 // 这里需要 加一个变量用于界面数据传递 property var viewData Button { id:test x: 8 y: 8 text: "打印传递过来的值" onClicked: { //这里就可以打印出传递过来的数据 print(viewData[0]) } } } 这里要约定好,因为认为传递过来的data是个数组,所以可以使用 [0] [1] 进行取值,如果不是则直接使用值销毁//在加入的界面, 增加一个按钮,做关闭用Button { id:des x: 98 y: 8 text: "关闭" onClicked: { //这个view 是最外层的id view.destroy(); } } 如果是采用动态创建 Qt.createComponent ,则需要使用必须使用使用 destroy 来进行销毁去掉标题栏Window {flags:Qt.FramelessWindowHint } 标题栏是Window自动产生的,所以需要给他设置一个参数即可 通过JS来统一管理可以将所有的功能函数,都统一放置在同一个地方,qml界面只存放界面相关的逻辑 创建 testjs.js 文件functionfunc() { console.log("hello js") // 可以直接调用界面的控件,而不报异常,因为是解析型语法,而且在QT里面还有自动补全的功能 text1.text="hello js" } 然后可以通过界面直接调用 // 这里需要导入JS的文件,在刚才的second.qml 中加入 import "qrc:/testJs.js" as JS Rectangle{ //xxx[查看上面] Button { id:invokeJs y: 8 text: "调用JS的函数" anchors.left: des.right anchors.leftMargin: 10 onClicked: { // 调用js 的相关方法 JS.func() } } Text { id: text1 x: 240 y: 59 text: qsTr("Text") font.pixelSize: 12 } } ---------------------------------------------------------------------------------------------------------------------- 我们尊重原创,也注重分享,文章来源于微信公众号:程序员学习分享录,建议关注公众号查看原文。如若侵权请联系qter@qter.org。 ---------------------------------------------------------------------------------------------------------------------- |