QT Quick是QT提供的一种高级用户界面工具包,包含对QML完美支持,QTQuick设计器,QML与C++混合编程技术。Qt Quick 就是使用 QML 构建的一套类库。
Qml模块本身并没有涉及图形显示,所有的图形处理都由Qt Quick模块完成。
本文福利,莬费领取Qt开发学习资料包、技术视频,内容包括(C++语言基础,C++设计模式,Qt编程入门,QT信号与槽机制,QT界面开发-图像绘制,QT网络,QT数据库编程,QT项目实战,QSS,OpenCV,Quick模块,面试题等等)↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓
QMl是一种高效的开发UI 的语言。QML(Qt Meta-Object Language,Qt元对象语言)是一种声明式编程语言,并且它是Qt框架的一个组成部分。QML的主要功能是让开发人员快速、便捷地开发出用户界面,这些界面包括了桌面应用、移动设备和嵌入式就用的界面。并且,QML还能够与JavaScript无缝整合一起开发使用,即在QML代码中可以直接使用JavaScript文件。
# view.qml
import QtQuick 2.0
Rectangle {
width: 200
height: 200
color: "green"
Text {
text: "Hello World"
anchors.centerIn: parent
}
}
创建QML项目
只想测试QML相关内容,希望可以快速显示界面效果,这时可以创建 Qt Quick Ul项目。Qt QuickUl项目中只包含QML和JavaScript代码,没有添加任何C++代码。
创建Qt Quick项目
// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
}
每一个 QML 有且只有一个根元素,类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素,在这个例子中就是一个 Window 对象。
#include <QtQml>
import QtQml 2.14
qmake .pro文件:
QT += qml
QML Basic Types
QML对象类型是指具有properties, signals, methods等的对象。
- bool:true/false
Item {
focus: true
clip: false
}
- double
Item {
property double number: 32155.2355
}
- enumeration:<Type>.<value>
Text { horizontalAlignment: Text.AlignRight }
- int:e.g. 0, 10, or -20。
Item { width: 100; height: 200 }
- list
import QtQuick 2.0
Item {
width: 100; height: 100
states: [
State { name: "activated" },
State { name: "deactivated" }
]
Component.onCompleted: {
console.log("Name of first state:", states[0].name)
for (var i = 0; i < states.length; i++)
console.log("state", i, states[i].name)
}
}
如果列表仅包含一个对象,则可以省略方括号:
import QtQuick 2.0
Item {
width: 100; height: 100
states: State { name: "activated" }
}
- real:带小数点的数字
Item { width: 100.45; height: 150.82 }
- string
Text { text: "Hello world!" }
- url
Image { source: "pics/logo.png" }
Image {
source: "pics/logo.png"
Component.onCompleted: {
// This prints 'false'. Although "pics/logo.png" was the input string,
// it's been converted from a string to a URL, so these two are not the same.
console.log(source == "pics/logo.png")
// This prints 'true' as Qt.resovledUrl() converts the string into a
// URL with the correctly resolved path
console.log(source == Qt.resolvedUrl("pics/logo.png"))
// This prints the absolute path, e.g. "file:///path/to/pics/logo.png"
console.log(source.toString())
}
}
- var:可以引用任何数据类型的通用属性类型。
Item {
property var aNumber: 100
property var aBool: false
property var aString: "Hello world!"
property var anotherString: String("#FF008800")
property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
property var aRect: Qt.rect(10, 10, 10, 10)
property var aPoint: Qt.point(10, 10)
property var aSize: Qt.size(10, 10)
property var aVector3d: Qt.vector3d(100, 100, 100)
property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
property var anObject: { "foo": 10, "bar": 20 }
property var aFunction: (function() { return "one"; })
}
- date:“YYYY-MM-DDThh:mm:ss.zzzZ”
MyDatePicker { minDate: "2000-01-01 0:0"; maxDate: "2020-12-31 23:59" }
- point:描述x和y属性,“x,y”
CustomObject { myPointProperty: "0,20" }
CustomObject { myPointProperty: Qt.point(0, 20) }
- rect:x, y, width and height。“x, y, width x height”
CustomObject { myRectProperty: "50,50,100x100" }
CustomObject { myRectProperty: Qt.rect(50, 50, 100, 100) }
Rectangle {
width: childrenRect.width
height: childrenRect.height
Rectangle { width: 100; height: 100 }
}
- size:width和height。“width x height”
Image { sourceSize: "150x50" }
Image { sourceSize: Qt.size(150, 50) }
Column {
Image { id: image; source: "logo.png" }
Text { text: image.sourceSize.width + "," + image.sourceSize.height }
}
QML object types
- Component:(组件)组件是可重用、封装的 QML 类型,具有明确定义的接口。
- QtObject
- Binding
- Connections
- Timer
quick组件
如表是Qt Quick Controls 1.1 提供的组件
本文福利,莬费领取Qt开发学习资料包、技术视频,内容包括(C++语言基础,C++设计模式,Qt编程入门,QT信号与槽机制,QT界面开发-图像绘制,QT网络,QT数据库编程,QT项目实战,QSS,OpenCV,Quick模块,面试题等等)↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓