|本文大概阅读时间6分钟。
|版权说明：原创文章，如需转载，请标明文章出处。https://blog.csdn.net/weixin_40192195/article/details/109093723
QML作为Qt Quick的开发语言，简单易学，本文案例部分来源于Qt官方文档，只做小的修改，增加部分注释。
注释：// 单行注释，/**/多行注释
import 导入模块语句
import QtQuick 2.5
Item： 元素的类型声明块,基础元素对象，所有元素继承于它，相当于容器
Rectangle：矩形元素对象
Rectangle{
width: 100
height: 100
x:100
y:100
border.color: "black"
border.width: 5
radius: 5
color: "red"
gradient: Gradient{
GradientStop{position: 0.0;color: "lightsteelblue"}
GradientStop{position: 1.0;color: "blue"}
}
}
Text：文本元素
Text {
font.family: "Ubuntu"
font.pixelSize: 20
color: "red"
text: "Text"
}
Image：图像元素
Image {
width: 130
height: 230 //图像尺寸重新定义
source: "images/soccer_ball.png" //图片源文件
fillMode: Image.PreserveAspectFit //显示合适尺寸的大小
}
MouseArea：鼠标区域
Rectangle {
width: 100; height: 100
color: "green"
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button == Qt.RightButton) //右键蓝色
parent.color = 'blue';
else
parent.color = 'red'; //左键红色
}
}
}
Rectangle {
id: container
width: 600; height: 200
Rectangle {
id: rect
width: 50; height: 50
color: "red"
opacity: (600.0 - rect.x) / 600 //随着拖拽，透明度发生变化
MouseArea {
anchors.fill: parent
drag.target: rect
drag.axis: Drag.XAxis //延x轴拖拽
drag.minimumX: 0
drag.maximumX: container.width - rect.width //定义最大的拖拽长度
}
}
}
不同元素的都有自己特定的属性，本文只讲述共有的可视化属性。
id:root 元素的属性，不同的元素拥有不同的属性
width: height: 元素所占窗口的宽高
x: y: 元素左上角的x轴和y轴坐标
scale 缩放，通过比例进行（0-1）
rotation 旋转，通过角度进行（0-360）
Rectangle{
id:rect1
width: 100
height: 100
x:100
y:100
border.color: "black"
border.width: 5
radius: 5
color: "red"
gradient: Gradient{
GradientStop{position: 0.0;color: "lightsteelblue"}
GradientStop{position: 1.0;color: "blue"}
}
MouseArea{
anchors.fill: parent
onClicked: {
rect1.scale -= 0.1 //设置缩放比例
rect1.rotation += 20 //设置旋转角度
}
}
}
anchors 锚定，锚定其他元素的位置
top、bottom、left、right 上下左右
verticalcenter、horizontalcenter 水平和垂直居中
Item {
Rectangle {
id: pic
width: 100
height: 100
color: "red"
}
Text {
id: label
anchors.horizontalCenter: pic.horizontalCenter //中心垂直
anchors.top: pic.bottom //文本的顶部是矩形的底部
anchors.topMargin: 5 //顶部间距 5
text: "Lable"
}
}
Rectangle {
id: pic
width: 100
height: 100
color: "red"
}
Text {
id: label
anchors.verticalCenter: pic.verticalCenter //水平中心对齐
anchors.left: pic.right //文本的顶左边是矩形的右边
anchors.leftMargin: 5 //左边间距 5
text: "Lable"
}
key、keyNavigation 按键定位属性进行focus焦点操作
focus: true
Keys.onLeftPressed: rect1.x -= 5 //rect1为rectangle的id
Keys.onRightPressed: rect1.x += 5 //按右键向右移动
clip 裁剪，元素边界的绘制
opacity 控制透明度,拖拽部分已讲述
visible 控制元素的显示
Rectangle {
id: pic
width: 100
height: 100
color: "red"
MouseArea{
anchors.fill: parent
onClicked: {
pic2.visible = !pic2.visible //鼠标点击第一个图，第二图消失
}
}
}
Rectangle {
id: pic2
width: 100
height: 100
color: "blue"
anchors.horizontalCenter: pic.horizontalCenter //中心垂直
anchors.top: pic.bottom //文本的顶部是矩形的底部
anchors.topMargin: 5 //顶部间距 5
MouseArea{
anchors.fill: parent
onClicked: {
pic.opacity -= 0.2 //鼠标点击第二个图，第一图透明度增加
}
}
}
states 当前元素的状态列表
Rectangle {
id: root
width: 100; height: 100
state: "red_color"
states: [
State {
name: "red_color"
PropertyChanges { target: root; color: "red" }
},
State {
name: "blue_color"
PropertyChanges { target: root; color: "blue" }
}
]
MouseArea{
anchors.fill: parent
onClicked: { //点击后根据状态进行改变颜色
parent.state=(parent.state=="red_color"?"blue_color":"red_color")
}
}
}
