qml之界面跳转,传参,销毁,去掉标题栏,JS交互

2019-8-11 14:36| 发布者: admin| 查看: 1116| 评论: 0

摘要: qml 是一种动态加载的解释性语言，可以通过替换qml来达到实现不同界面的动态更新。接下来介绍下：qml的界面跳转，传参，销毁，去掉标题栏这篇项目的源码，放在github上面，点击这里到github上面去获取源码界面跳转我 ...

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())
}
}
}

Q:如果你问那么多的控件，我还不知道里面有哪些属性怎么破？

这个我目前的做法是了解一些最常用的，毕竟属性太多了，有哪些属性，可以通过帮助文档进行查看就在

传参

上面说到：使用 component.createObject(appWindow) 来进行加载界面，其实加载的同时也可以传递参数。
// 传递给另外一个界面需要使用 `{key:value}` 这种map的方式
component.createObject(appWindow,{viewData: data})
另外一个界面，需要有个 viewData 的property
import 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。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

收藏分享邀请

帐号		自动登录	找回密码
密码			立即注册

账号		自动登录	找回密码
密码			立即注册