前言
C++
作为元老级别的开发语言,那些前辈们已经帮助我们总结了很多基于 C++
的开发模式,所以我们对 C++
并不
陌生,但是 QML
作为一种新生的语言,在开发语言中是属于非常年轻的地位,且不知道是什么原因,也许正因为 QML
是一种新生语言,网上对于 QML
相关的资料比较欠缺,而且都是一些比较基础的。所以接触 QML
以来,就需要我们不
断去学习它,写笔记记录下我的种种经验,以便为后来者提供一条正确的参考方向。
我在写 QML
Demo 代码时,发现代码混乱,模块分的不是很清楚,要知道,在 C++
中,我们在开发时,首先想到的是
如何将各模块分的清清楚楚,使各模块有更好的解耦能力。在 QML
中写的 Demo 都混乱还得了,这是不能容忍的,必须
盘它。
不管是什么语言,良好的结构于编码风格是非常有必要的,不管你将任何一种开发语言作为编程语言,这些代码都是给人看
的嘛,程序员一定要让自己的代码成为有价值的代码。
目录
QML 开发模式概述
在 网络研讨会 | Qt Quick 与 Qt Widgets 适用场景及技术分析 的视频中有提到 QML
未来设想的开发模式官方的建议是
Javascript
控制前端的页面逻辑,C++
控制后端的具体逻辑处理,QML
就是纯粹的界面组件组合。
但是 QML
借鉴了大量类似于 web
的风格,比如 QML
和 Javascript
就非常的相似,既然 Qt 官方
借鉴别个,
那么我们也可以借鉴呀,既然 QML
借鉴类似于 Html + Css + Javascript
的组合,由于我的应用项目比较大,那
些例子的开发模式并不能支撑我们直接拿来就用,就先不管 Qt 官方的那些例子吧。
QML 开发
你可能不需要或者不愿意使用 QML + Javascript
的开发模式,那么为了达到我们的需求,我们就只能另辟蹊径了,我
们可以利用 QML
实现类似于 Javascript
的效果
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
id: id_rootWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button {
id: id_btnTestting
text: "测试按钮"
QmlButtonHandle { // 事件处理对象
id: id_btnTesttingHandle
target: id_btnTestting
}
QmlButtonStyle { // 按钮风格
id: id_btnTesttingStyle
}
Component.onCompleted: { // 按钮完成初始化后进行事件绑定
clicked.connect(id_btnTesttingHandle.btnClicked)
released.connect(id_btnTesttingHandle.btnReleased)
}
}
}
import QtQuick 2.0
QtObject {
id: id_btnHandle
property var target: null
function btnClicked() {
if(target !== null) {
console.log(target.text + ": call clicked function for QmlButtonHandle.qml")
}
}
function btnReleased() {
if(target !== null) {
console.log(target.text + ": call released function for QmlButtonHandle.qml")
}
}
}
import QtQuick 2.0
Rectangle {
anchors.fill: parent
color: "red"
radius: 10
}
以上还是看得出来 C++
的习惯还是没有改掉,如果你不喜欢这样的话,你或许可以这样去实现:
我通过同事了解到,Javascript
的开发模式中,他们常常是将 Javascript
的代码嵌入到
Html
中,Html
通过 <script></script>
来支持他们这样使用,我同样也可以借鉴看看
效果嘛。
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
id: id_rootWindow
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Button {
// <variable brief = "Class member variable initialization">
id: id_btnTestting
text: "测试按钮"
// </variable>
// <statement brief = "Member variable definition">
property int var_count: 0
// </statement>
// <signal brief = "Signal definition">
signal requstIncClickedCount()
// </signal>
// <event brief = "Event binding">
onClicked: btnClicked()
onReleased: btnReleased()
onRequstIncClickedCount: incCount()
// <event>
// <styles>
Rectangle {
id: id_btnTesttingStyle
anchors.fill: parent
color: "red"
radius: 10
}
// </styles>
// <event_func brief = "Declaration and implementation of event handling method">
function btnClicked() {
requstIncClickedCount()
console.log(text + ": call clicked function for btnClicked")
}
function btnReleased() {
console.log(text + ": call released function for btnClicked")
}
function incCount() {
++var_count
console.log("var_count: " + var_count)
}
// </event_func>
}
}
QML 与 Javascript 结合开发
Javascript 我不太熟悉,就直接上代码了
/** 全局变量 */
var globalVariable = 0
/** 全局变量: 主窗口标题栏 */
var mainWindowTitle = "Js参数"
/** 全局变量: 测试按钮文本信息 */
var testtingBtnText = "测试按钮"
/**
\brief 输出 Hello World 到控制台,并输出该方法响应次数
*/
function printHelloWorld() {
console.log("function printHelloWorld: [%1] %2".arg(++globalVariable).arg("Hello World"))
}
import QtQuick 2.12
import QtQuick.Controls 2.5
import "JavaScriptObject.js" as JavaScriptObject
ApplicationWindow {
id: id_rootWindow
visible: true
width: 640
height: 480
title: JavaScriptObject.mainWindowTitle
Button {
id: id_btnTestting
text: JavaScriptObject.testtingBtnText
onClicked: JavaScriptObject.printHelloWorld()
}
}
QML 与 C++ 结合开发
这段我就不说了,我之前记录了笔记在 QML之C++混合编程理解
总结
Javascript + QML + C++
的模式来开发,这样能让我们的大模块拆分很多小模块,最终的结果就是每个模块都是很小、耦合度非常底的,这也是我们开发的偷懒大法不是
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步