找回密码
 立即注册
Qt开源社区 门户 查看内容

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

2019-8-11 14:36| 发布者: admin| 查看: 1115| 评论: 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。
----------------------------------------------------------------------------------------------------------------------

鲜花

握手

雷人

路过

鸡蛋

公告
可以关注我们的微信公众号yafeilinux_friends获取最新动态,或者加入QQ会员群进行交流:190741849、186601429(已满) 我知道了