一 基本语法
QML将用户界面分解成一些更小的元素,多个元素可以结合为一个组件。QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript或C++来提供修饰,或者增加更加复杂的逻辑。QML主要用于描述用户界面,区别于描述文本文档JavaScript。
QML的元素组织是基于层次结构的,子元素总是会继承一些父元素的特性,如坐标系统、鼠标点击区域等。
简单实例程序:
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle {
// name this element root
id: root
// properties: <name>: <value>
width: 400; height: 400
Image {
id: image
source: ':/a.png'
width: 200; height: 200
fillMode: Image.Pad
anchors.fill: parent
}
}
Text {
// un-named element
// reference element by id
y: rocket.y + rocket.height + 20
// reference root element
width: root.width
horizontalAlignment: Text.AlignHCenter
text: 'Rocket'
}
}
二 基本元素
元素可以被分为可视化元素与非可视化元素。一个可视化元素(例如矩形框Rectangle)有着几何形状并且可以在屏幕上显示。一个非可视化元素(例如计时器Timer)提供了常用的功能,通常用于操作可视化元素。
常用的几个基础的可视化元素有:Item(基础元素对象),Rectangle(矩形框),Text(文本),Image(图像)和MouseArea(鼠标区域)。
Item(基础元素对象)是所有可视化元素的基础对象,所有其它的可视化元素都继承自Item。
Item(基本元素对象)通常被用来作为其它元素的容器使用,它自身不会有任何绘制操作,但是定义了所有可视化元素共有的属性:
Geometry(几何属性) | x,y(坐标)定义了元素左上角的位置,width,height(长和宽)定义元素的显示范围,z(堆叠次序)定义元素之间的重叠顺序。 |
Layout handling(布局操作) | anchors(锚定),包括左(left),右(right),上(top),下(bottom),水平与垂直居中(vertical center,horizontal center),与margins(间距)一起定义了元素与其它元素之间的位置关系。 |
Key handlikng(按键操作) | 附加属性key(按键)和keyNavigation(按键定位)属性来控制按键操作,处理输入焦点(focus)可用操作。 |
Transformation(转换) | 缩放(scale)和rotate(旋转)转换,通用的x,y,z属性列表转换(transform),旋转基点设置(transformOrigin)。 |
Visual(可视化) | 不透明度(opacity)控制透明度,visible(是否可见)控制元素是否显示,clip(裁剪)用来限制元素边界的绘制,smooth(平滑)用来提高渲染质量。 |
State definition(状态定义) | states(状态列表属性)提供了元素当前所支持的状态列表,当前属性的改变也可以使用transitions(转变)属性列表来定义状态转变动画。 |
实例代码:
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
/*
Rectangle(矩形框)是基本元素对象的一个扩展,增加了一个颜色来填充它。它还支持边界的定义,
使用border.color(边界颜色),border.width(边界宽度)来自定义边界。你可以使用radius(半径)属性来创建一个圆角矩形。
*/
Rectangle{
id:rect1 //设置id名称
x:20; y:20 //设置x,y的位置
width: 80 ; height: 90 //设置宽和高
color: "lightsteelblue" //设置颜色
}
Rectangle{
id:rect2
x:120; y:20
width: 80; height: 90
border.color: "cadetblue" //设置边框颜色
border.width: 10 //设置边框宽度
radius: 10 //设置半径
}
Rectangle{
id:rect3
x:220; y:20
width: 80; height: 90
//设置渐变色:一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。
//位置标记了y轴上的位置(0 = 顶,1 = 底)。GradientStop(倾斜点)的颜色标记了颜色的位置。
// 注意:一个矩形框如果没有width/height(宽度与高度)将不可见
gradient: Gradient{
//渐变停止
GradientStop{position: 0.0; color: "cyan"}
GradientStop{position: 1.0; color: "darkorchid"}
}
//设置边框颜色
border.color: "fuchsia"
}
//显示文本的元素Text
Text {
id: text //设置id
text: "this is show text ,it is very strong ," //设置需要显示的文本
x:0; y:120
width: 300; height: 90 //设置宽度高度,不设置的话控件不会显示
color: "lightskyblue"
//设置字体属性
font.pixelSize: 50
font.family: "windows"
font.bold: true
//设置文本右边对齐
horizontalAlignment: Text.AlignRight
//设置文字外框效果
style: Text.Sunken
styleColor: "gold"
//设置显示长文本的展示方式
//elide: Text.ElideMiddle //显示长文本时,在中间用省略号 ... 代替
wrapMode: Text.WordWrap //换行展示所有文本
}
//显示图像,默认情况下裁剪是被禁用的(clip:false)。你需要打开裁剪(clip:true)来约束边界矩形的绘制。这对任何可视化元素都是有效的。
//使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器,这允许你动态创建图像并且使用线程加载。
Image {
clip: true //启用图片剪裁
id: image
x:300; y:120
width: 200; height: 200
//设置图片文件路径,可以是本地资源、电脑本地图片、网络图片
//source: "qrc:/image/q.png" //Qt工程本地地址
//网络图片地址
source: "https://ts3.cn.mm.bing.net/th?id=OIP-C.NUsPzvX20YVoSLo6kIgvQgHaLZ&w=201&h=310&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
//图片填充模式:避免裁剪图像数据被渲染到图像边界外
fillMode: Image.PreserveAspectCrop //保证图片始终在图像显示区域内
}
//鼠标区域元素MouseArea
Rectangle{
id:rect4
x:0; y:320
width: 100; height: 100
color: "lightpink"
//设置鼠标点击响应区域: 这里输入处理与可视化显示分开,可以对交互区域进行控制,这点非常的重要
MouseArea{
id:area
//设置鼠标点击响应区域的宽高度为父控件的宽高度
width: rect4.width
height: rect4.height
//鼠标点击响应函数: 点击鼠标时,隐藏rect2,再次点击显示rect2
onClicked: rect2.visible=!rect2.visible
}
}
}
三 组件
一个组件是一个可以重复使用的元素,QML提供几种不同的方法来创建组件。
常见的一个 .qml文件就是一个基础组件。一个以文件为基础的组件在文件中创建了一个QML元素,并且将文件以元素类型来命名(例如Button.qml)。你可以像任何其它的QtQuick模块中使用元素一样来使用这个组件。之后在其他代码中把Button.qml作为一个Button(按钮)来使用。
特别注意:只有根元素的属性外部可以访问。
新建一个组件 QButton.qml文件,代码内容如下:
import QtQuick
//新建一个Button.qml文件作为组件,
//Item {
Rectangle{
property alias text: label.text
signal clicked
id:button
x:20; y:20
width: 150; height: 150
color: "bisque"
border.color: "chartreuse"
Text {
id:label
anchors.centerIn: parent
text: "开始"
}
MouseArea{
anchors.fill: parent
onClicked: {
//status.text="按钮被点击"
button. clicked()
}
}
}
//Text {
// id: status
// x:20; y:30
// text: "等待...."
// horizontalAlignment: Text.AlignHCenter
//}
//}
在main.qml文件中使用QButton.qml
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Button{
id:button
x:40; y:40
text: "开始"
onClicked: {
status.text="按钮被点击"
}
}
Text {
id: status
x:20; y:0
text: "等待...."
horizontalAlignment: Text.AlignHCenter
}
}
运行效果: