import QtQuick 2.12 //import 声明导入了一个指定的模块版本
import QtQuick.Window 2.12
Window
{
id:testA
visible:true//是否可见
height:200//高度
width:height * 2//宽度
title: qsTr("Hello World")//标题
property int times:15//自定义属性
}
语法
使用// 可以进行单行注释 /**/可以进行多行注释
注意点
①每一个qml文件都需要一个根元素
②一个元素使用它的类型声明,然后使用{}进行包含
③元素拥有属性,他们按照name:value的格式来赋值
④任何在QML文档中的元素都可以使用它们的id进行访问(id是一个任意
的标识符)
⑤元素可以嵌套 一个父元素可以拥有多个子元素 子元素可以通过关键字parent来访问它们的父元素
⑥单行键值对的结尾可加可不加; 若是多个键值对在一行 则需要使用; 分开 x:10;y:10
属性
元素使用它们的元素类型名进行声明,使用它们的属性或者创建自定义属性来定义。一个属性对应一个值 例如 height:200
属性绑定 一个属性依赖于其他的一个或者多个属性 参见上方中的width属性
添加自己定义的属性需要使用property修饰符 参见上方的time属性
基本元素
基础元素对象(Item Element)
元素可以被分为可视化元素与不可视化元素。一个可视化元素(例如矩形框Rectangle)有着几何形状并且可以在屏幕上显示。一个不可视化元素(例如计时器Timer)提供了常用的功能,通常用于操作可视化元素。
可视化元素共有的属性:
Geometry(几何属性) x,y(坐标)定义了元素左上角的位置,width,height(宽和宽)定义元素的显示范围,z(堆叠次序)定义元素之间的重叠顺序。Layouthandling(布局操作) anchors(锚定),包括左(left),右(right),上(top),下(bottom),水平与垂直居中(verticalcenter,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(转变)属性列表来定义状态转变动画。
注意:Item(基本元素对象)通常被用来作为其它元素的容器使用(类似于Qt中的QWidget ???)。
其他基本元素
Rectangle (矩形框元素)
Rectangle
{
id:rect1 //id名
width:parent.width/2;//父对象宽度的一半
height:parent.height/2//父对象高度的一半
x:parent.width/2-width/2 //水平居中
y:parent.height/2-height/2 //垂直居中
color: "#00B000"//背景色
}
Text(文本元素)
Text {
text: "Hello World!"//文字内容
font.family: "Helvetica"//字体
font.pointSize: 24//字体大小
color: "red"//字体颜色
x:rect1.x+10
y:rect1.y+10//字体所在位置
id:text1
}
Image 图像元素
Image {
x: 12;
y: 12
width: 48
height: 118
source: "assets/rocket.png"
}
Image
{
x: 112
y: 12
width: 48
height: 118/2
source: "assets/rocket.png"
fillMode: Image.PreserveAspectCrop
clip: true
}
鼠标区域元素
为了与不同的元素交互,你通常需要使用MouseArea(鼠标区域)元素。这是一个矩形的非可视化元素对象,你可以通过它来捕捉鼠标事件。当用户与可视化端口交互时,mouseArea通常被用来与可视化元素对象一起执行命令。
import QtQuick 2.12
import QtQuick.Window 2.12
Window{
id:testA
visible:true
width:100
height:200
title: qsTr("Hello World")
Rectangle
{
id:rect1
width:parent.width/2;
height:parent.height/2
x:parent.width/2-width/2
y:parent.height/2-height/2
color: "#00B000"
}
Text {
text: "Hello World!"
font.family: "Helvetica"
font.pointSize: 24
color: "red"
x:rect1.x+10
y:rect1.y+10
id:text1
}
MouseArea
{
anchors.fill: parent;//可点击区域就是父对象的大小 此处是Window
id:windowArea
acceptedButtons: Qt.LeftButton| Qt.RightButton;//处理鼠标左键和右键
onReleased://鼠标松开 改变文字
{
text1.text = "Released Button"
}
onPressed://鼠标按下
{
if(mouse.button == Qt. LeftButton){
text1.text = "Left Button"
}
else if(mouse.button == Qt.RightButton){
text1.text = "Right Button"
}
}
}
}
组件
一个组件是一个可以重复使用的元素。一个组件就是一个基础组件。一个以组件为基础的组件在组件中创建了一个QML元素,并且将组件以元素类型来命名(例如Button.qml)。
定义组件的文件首字母要大写
import QtQuick 2.0
Rectangle
{
id:rect1
width:parent.width/2;
height:parent.height/2
x:parent.width/2-width/2
y:parent.height/2-height/2
color: "#00ff00"
property alias text: text1.text//将属性导出给外部使用
Text {
text: "Hello QML!"
font.family: "Helvetica"
font.pointSize: 24
color: "yellow"
x:rect1.x+10
y:rect1.y+10
id:text1
}
}
property alias text: text1.text//将 属性导出给外部使用 text属性名绑定的是text1的text属性
以上文件命名为 FRect.qml
引用此qml文件
import QtQuick 2.12
import QtQuick.Window 2.12
Window{
id:testA
visible:true
width:100
height:200
title: qsTr("Hello World")
FRect
{
visible: true
}
}
如上图 引用元素名称和qml文件名保持一致即可。且是大写字母开头。
bug
使用Qt Creator编写qml程序的时候。发现有时候qml程序发生改动了之后。且进行了编译之后并没有效果。解决办法:
在.pro文件中添加这行:UI_DIR=./UI