企业网站的功能可分为前台和后台两个部分,天津网,怎么简单制作一个网页,查看wordpress版本对应的php文章目录一、Qt Quick应用程序概述二、QML程序实现三、QML代码解析一、Qt Quick应用程序概述 在现代的软件开发中有一个内在的冲突#xff0c;用户界面的改变速度远远高于我们的后端服务。在传统的技术中我们开发的前端需要与后端保持相同的步调。当一个项目在开发时用户想要改…
文章目录一、Qt Quick应用程序概述二、QML程序实现三、QML代码解析一、Qt Quick应用程序概述 在现代的软件开发中有一个内在的冲突用户界面的改变速度远远高于我们的后端服务。在传统的技术中我们开发的前端需要与后端保持相同的步调。当一个项目在开发时用户想要改变用户界面或者在一个项目中开发一个用户界面的想法就会引发这个冲突。敏捷项目需要敏捷的方法。 Qt Quick 提供了一个类似HTML声明语言的环境应用程序作为你的用户界面前端the front-end在你的后端使用本地的C代码。这样允许你在两端都游刃有余。
下面是一个简单的Qt Quick UI的例子
import QtQuick 2.0Rectangle {width: 240; height: 1230Rectangle {width: 40; height: 40anchors.centerIn: parentcolor: #FFBB33}
}这种声明语言被称作QML它需要在运行时启动。Qt提供了一个典型的运行环境叫做qmlscene但是想要写一个自定义的允许环境也不是很困难我们需要一个快速视图quick view并且将QML文档作为它的资源。剩下的事情就只是展示我们的用户界面了。
二、QML程序实现
实现了一个简单的窗口程序在其中居中显示一个红色矩形矩形中间显示 “hello world” 文字并且点击矩形区域时会退出程序。
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr(QML)Rectangle {width: 200height: 200color: redanchors.centerIn: parentText {id: text_nametext: qsTr(hello world)horizontalAlignment: Text.AlignHCenteranchors.centerIn: parent}MouseArea {anchors.fill: parentonClicked: {Qt.quit();}}}
}QML调用
#include QGuiApplication
#include QQmlApplicationEngineint main(int argc, char *argv[])
{QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;const QUrl url(QStringLiteral(qrc:/main.qml));QObject::connect(engine, QQmlApplicationEngine::objectCreated,app, [url](QObject *obj, const QUrl objUrl) {if (!obj url objUrl)QCoreApplication::exit(-1);}, Qt::QueuedConnection);engine.load(url);return app.exec();
}三、QML代码解析
2.1 导入模块部分
import QtQuick 2.12
import QtQuick.Window 2.12QtQuick 2.12导入基础的 QML 类型如 Rectangle、Text、MouseArea 等。QtQuick.Window 2.12提供 Window 类型用于创建顶层窗口。 2.2 Window 元素
Window {visible: truewidth: 640height: 480title: qsTr(QML)Window一个顶层窗口元素。visible: true窗口启动时可见。width/height窗口大小 640x480。title窗口标题为 “QML”使用 qsTr() 是为了支持国际化翻译。 2.3 Rectangle 矩形元素
Rectangle {width: 200height: 200color: redanchors.centerIn: parentRectangle创建一个 200x200 的红色矩形。color: “red”矩形填充颜色为红色。anchors.centerIn: parent使该矩形在其父元素 Window 中水平和垂直居中显示。 2.4 Text 文本元素
Text {id: text_nametext: qsTr(hello world)horizontalAlignment: Text.AlignHCenteranchors.centerIn: parent
}Text在矩形中显示文本。id: text_name为该文本对象取名可用于后续引用。text: qsTr(“hello world”)显示内容为 “hello world”同样支持国际化。horizontalAlignment: Text.AlignHCenter水平方向对齐方式设为居中注意对齐生效前提是设置了宽度否则可以忽略。anchors.centerIn: parent让文字在矩形中居中。 注意这里的 parent 是 Rectangle所以 Text 是居中在红色矩形里。
2.5 MouseArea 鼠标区域
MouseArea {anchors.fill: parentonClicked: {Qt.quit();}
}MouseArea用于处理鼠标交互。anchors.fill: parent填充整个矩形区域即鼠标点击矩形任何地方都会触发。onClicked: Qt.quit()点击后调用 Qt.quit()程序退出。
