qml基础语法
文章目录
- 基础语法
-
- 例子
- 属性
-
- 例子
- 核心元素
-
- 元素
- item
- Rectangle
- Text
-
- 例子
- Image
-
- 例子
- MouseArea
- 例子
- Component（组件）
- 例子
- 简单变换
-
- 例子
- 定位器
-
- Column
- Row
- Grid
- Flow
- Repeater
- 布局
- Input
- Keys
基础语法
QML是一种用于描述对象如何相互关联的声明式语言。
QtQuick是一个基于QML的框架。
例子
import QtQuick
import QtQuick.Window
Rectangle {
id:root
width: 220;height: 260
color:"#4A4A4A"
Image {
id: image
x:(parent.width-width)/2; y:20
source: "../../images/pinwheel.png"
}
Text {
y:image.height+image.y+20
text: "大风车"
color:"white"
horizontalAlignment: Text.AlignHCenter
width: parent.width
}
}
注解
1、import语句导入一个模块。qt6可以不写版本号，自动加载最高版本的模块。
2、对于单行注释，可以使用//，对于多行注释，可以通过/* */进行注释。就像在C/C++和JavaScript中一样。
3、每个QML文件都需要有一个唯一的根元素，就像HTML一样。
4、元素声明形式为：type{ }。
5、元素可以有属性，形式为:name:value。
6、QML文档中的任意元素可以通过使用其id（不带引号的标识符）进行访问。
7、元素可以嵌套，这意味着父元素可以有子元素。子元素可以使用parent关键字访问父元素。
属性
属性是一个简单的键值对，例如：width: 100; text: 'Greetings’ ; color: ‘#FF0000’ 。
属性具有类型，并且可以具有初始值。
例子
import QtQuick
import QtQuick.Window
Rectangle
{
width:300;height:300;
Text{
// (1) identifier
id: thisLabel
// (2) set x- and y-position
x: 24; y: 16
// (3) bind height to 2 * width
height: 2 * width
// (4) custom property
property int times: 24
// (5) property alias
property alias anotherTimes: thisLabel.times
// (6) set text appended by value
text: "thisLable " + anotherTimes
// (7) font is a grouped property
font.family: "Ubuntu"
font.pixelSize: 24
// (8) KeyNavigation is an attached property
KeyNavigation.tab: thatLabel
// (9) signal handler for property changes
onHeightChanged: console.log('height:', height)
// focus is need to receive key events
focus: false
// change color based on focus value
color: focus ? "red" : "black"
}
Text {
id: thatLabel
text: "thatLabel " + thisLabel.times
KeyNavigation.tab: thisLabel
// focus is need to receive key events
focus: !thisLabel.focus
// (1) handler for text changes. Need to use function to capture parameters
onTextChanged: (text)=>/*function(text)*/ { console.log("text changed to:", text) }
// change color based on focus value
color: focus ? "red" : "black"
Keys.onSpacePressed: {increment()}
Keys.onEscapePressed: {text = ''}
//JS函数
function increment(){
thisLabel.times+=1
}
}
}
点击tab键可以切换焦点。
按下空格键可以递增times变量。
注解
1、id是用于引用QML文件（在QML中称为“document”）中的元素。id在文档中必须是唯一的，不能重置为其他值。（类似于C++的引用。）
2、属性可以设置值，具体取决于其类型。如果没有为属性指定值，将使用默认初始值。
3、属性可以依赖于一个或多个其他属性。这称为绑定。
4、可以使用property限定符向元素添加新属性，后跟类型、名称和可选的初始值（property＜类型＞＜名称＞：＜值＞）。
5、声明属性的另一种重要方式是使用别名关键字（property alias＜名称＞：＜引用＞）。
6、基于int的值将自动转换为字符串类型。每次次times属性更改时都会更新文本。
7、编写grouped property的另一种方法是font{family:“Ubuntu”; pixelSize:24}。
8、快速切换焦点。
9、可以为属性提供处理程序。属性更改后被调用。
核心元素
元素
元素可以分为视觉元素和非视觉元素。
- 视觉元素（如Rectangle）具有几何形状，
- 非视觉元素（Timer）提供一般功能，通常用于控制视觉元素。
item
Item是所有视觉元素的基础元素，因此所有其他视觉元素都从Item继承。它本身并不绘制任何东西，但定义了所有视觉元素的共同属性：
几何属性（Geometry）：
- x、y：用于定义元素展开的左上角位置
- z：用于定义堆叠顺序。
- width、 height：用于表示范围
布局处理： - anchors：（左、右、上、下、垂直和水平中心）相对于其他元素进行定位。
- 可选项margins
- 键处理
- Key和KeyNavigation属性用于控制键处理
- focus属性用启用键处理。
变换 - scale和rotate变换以及x、y、z变换的通用transform属性列表，以及transformOrigin。
视觉 - opacity用于控制透明度，visible用于显示/隐藏元素，clip用于限制对元素边界的绘制操作，smooth用于增强渲染质量。
状态定义 - states用于动画化状态更改。
- 包含所有支持的状态列表、当前state属性和transitions列表属性。
Rectangle
Rectangle扩展了Item，为其添加填充颜色。此外，还支持border.color和border.width。要创建圆角矩形，可以使用radius属性。
Rectangle {
id: rect1
x: 12; y: 12
width: 76; height: 96
color: "lightsteelblue"
}
Rectangle {
id: rect2
x: 112; y: 12
width: 76; height: 96
border.color: "lightsteelblue"
border.width: 4
radius: 8
}
除了填充颜色和边框，矩形还支持自定义渐变：
Rectangle {
id: rect3
x: 212; y: 12
width: 76;
height: 96
gradient: Gradient {
GradientStop { position: 0.0; color: "lightsteelblue" }
GradientStop { position: 1.0; color: "slategray" }
}
border.color: "slategray"
}
Text
要显示文本，可以使用Text元素。它最显著的属性是字符串类型的text属性。元素根据给定的文本和使用的字体（例如font.family、font.pixelSize等）计算其初始宽度和高度。要更改文本的颜色，只需使用color属性。
例子
Text {
text: "The quick brown fox"
color: "#303030"
font.family: "Ubuntu"
font.pixelSize: 28
}
- 可以使用horizontalAlignment和verticalAlignment属性对齐文本。使用style和styleColor属性，允许以轮廓、凸起和凹陷模式渲染文本。
- elide属性允许将省略符位置设置为文本的左侧、右侧或中间。
- 如果不希望省略符模式的“…”出现，但仍希望看到全文，可以使用wrapMode属性包装文本（仅在显式的设置了宽度时有效)。
Image
Image元素能够以各种格式（例如PNG、JPG、GIF、BMP、WEBP）显示图像。有关支持的图像格式的完整列表，请参阅Qt文档。除了提供图像URL的source属性外，它还包含一个控制大小调整行为的fillMode。
例子
Image {
x: 12; y: 12
// width: 64
// height: 72
source: "assets/triangle_red.png"
}
Image {
x: 12+64+12;
y: 12
// width: 72
height: 72/2
source: "assets/triangle_red.png"
fillMode: Image.PreserveAspectCrop
clip: true
}
MouseArea
MouseArea这是一个矩形的不可见项，可以在其中捕获鼠标事件。
例子
Rectangle {
id: rect1
x: 12; y: 12
width: 76; height: 96
color: "lightsteelblue"
MouseArea {
id: area
width: parent.width
height: parent.height
onClicked: rect2.visible = !rect2.visible
}
Rectangle {
id: rect2
x: 112; y: 12
width: 76; height: 96
border.color: "lightsteelblue"
border.width: 4
radius: 8
}
Component（组件）
组件是可重用的元素。QML提供了创建组件的不同方法。目前，最简单的形式是基于文件的组件：
在文件中放置QML元素并为该文件提供元素名（例如Button.qml）来创建的。然后就可以像Qt Quick模块中的其他元素一样使用该组件。
例子
Button.qml
import QtQuick
Item {
id:root
property alias text:label.text
signal clicked
Rectangle {
// our inlined button ui
id: button
x: 12; y: 12
width: 116; height: 26
color: "lightsteelblue"
border.color: "slategrey"
Text {
id:label
anchors.centerIn: parent
text: "Start"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.clicked()
}
}
}
}
import QtQuick
import QtQuick.Window
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Button{
text:"开始"
onClicked: {
text1.text="按钮被点击"
}
}
Text { // text changes when button was clicked
id: text1
x: 12;
y: 76
width: 116;
height: 26
text: "waiting ..."
horizontalAlignment: Text.AlignHCenter
}
}
简单变换
包括平移、旋转和缩放操作。
- 平移：通过改变x、y位置完成简单的平移。
- 旋转：值以度（0-360）表示。
- 缩放：大于1表示放大，小于1表示缩小。
在展示示例之前，介绍一个小助手：ClickableImage元素。一个带有鼠标区域的图像。
例子
ClickableImage.qml
import QtQuick
Image {
id: root
signal clicked
MouseArea {
anchors.fill: parent
onClicked: root.clicked()
}
}
import QtQuick
import QtQuick.Window
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
MouseArea{
anchors.fill: parent
onClicked:
{
qq1.x = 50;
qq2.rotation = 0;
qq3.rotation = 0;
qq3.scale = 1.0;
}
}
ClickableImage
{
x:50;y:68;
id:qq1
source: "../../images/qq.png"
onClicked:
{
x+=10;
}
}
ClickableImage
{
x:150;y:68;
id:qq2
source: "../../images/qq.png"
onClicked:
{
rotation+=10;
}
}
ClickableImage
{
x:250;y:68;
id:qq3
source: "../../images/qq.png"
onClicked:
{
rotation+=10;
scale+=0.1;
}
}
}
定位器
QML中有许多用于定位的元素。这些称为定位器，其中Qt Quick模块提供以下功能：Row、Column、Grid和Flow。
// RedSquare.qml
import QtQuick
Rectangle {
width: 48
height: 48
color: "#ea7025"
border.color: Qt.lighter(color)
}
Column
// ColumnExample.qml
import QtQuick
DarkSquare {
id: root
width: 120
height: 240
Column {
id: column
anchors.centerIn: parent
spacing: 8
RedSquare { }
GreenSquare { width: 96 }
BlueSquare { }
}
}
Row
Row元素将其子项彼此相邻放置，从左到右或从右到左，具体取决于layoutDirection属性。同样，spacing用于分隔子项。
import QtQuick
BrightSquare {
id: root
width: 400; height: 120
Row {
id: row
anchors.centerIn: parent
spacing: 20
BlueSquare { }
GreenSquare { }
RedSquare { }
}
}
Grid
Grid元素在网格中排列其子元素。通过设置rows和columns属性，可以约束行或列的数量。属性flow和layoutDirection用于控制项添加到网格的顺序，而spacing控制分隔子项的空间量。
import QtQuick
BrightSquare {
id: root
width: 160
height: 160
Grid {
id: grid
rows: 2
columns: 2
anchors.centerIn: parent
spacing: 8
RedSquare { }
RedSquare { }
RedSquare { }
RedSquare { }
}
}
Flow
import QtQuick
BrightSquare {
id: root
width: 160
height: 160
Flow {
anchors.fill: parent
anchors.margins: 20
spacing: 20
RedSquare { }
BlueSquare { }
GreenSquare { }
}
}
Repeater
import QtQuick
DarkSquare{
id:root
width: 252;height: 252
property var colorArray:["#00bde3", "#67c111", "#ea7025"]
Grid{//columns默认值为4
anchors.centerIn: parent
anchors.margins: 8
spacing: 4
Repeater{
model:16
Rectangle{
id:rect
property int colorIndex: Math.floor(Math.random()*3)
color: root.colorArray[colorIndex]
width: 56; height:56
Text {
anchors.centerIn: parent
text:"Cell"+/*parent.index*/rect.Positioner.index
color:'white'
}
}
}
}
}
布局
QML可以用锚来布局项目。锚定的概念是Item的基础，可用于所有可视化QML元素。
- 文本元素除了top、bottom、left、right、horizontalCenter、verticalCenter锚外，还有baseline锚
- 每个锚都有一个偏移。对于top、bottom、left、right锚，它们称为边距。对于horizontalCenter、verticalCenter和baseline，它们称为偏移。
import QtQuick
import QtQuick.Window
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
GreenSquare {
// BlueSquare {
// anchors.fill: parent
// anchors.margins: 8
// text: '(1)'
// }
// BlueSquare{
// text: '(2)'
// anchors.left: parent.left
// y:8
// anchors.margins: 8
// }
// BlueSquare{
// text: '(3)'
// anchors.left: parent.right
// }
// BlueSquare{
// id:blue1
// text: '(4-1)'
// y:8
// anchors.horizontalCenter: parent.horizontalCenter
// anchors.margins: 8
// height:25
// }
// BlueSquare{
// text: '(4-2)'
// anchors.top: blue1.bottom
// anchors.horizontalCenter: parent.horizontalCenter
// anchors.margins: 8
// height:25
// width:75
// }
// BlueSquare{
// text: '(5)'
// anchors.centerIn: parent
// }
BlueSquare{
text: '(6)'
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: -12
anchors.verticalCenter: parent.verticalCenter
}
}
}
Input
- 允许用户输入一行文本。元素支持输入约束，如validator、inputMask、echoMode。
- 可以在文本输入中单击以更改焦点。使用KeyNavigation属性可以通过键盘更改焦点。
TLineEditV1.qml
FocusScope{
width: 200;height:50
Rectangle{
anchors.fill: parent
color:'lightsteelblue'
border.color: "gray"
}
property alias text: input.text
property alias input: input
TextInput{
id:input
anchors.fill: parent
anchors.margins: 2
focus:true
//wrapMode:Text.WordWrap
}
}
使用tab键进行导航。焦点不会更改为input2。仅使用focus:true是不够的。问题是，当焦点转移到input2元素时，TlineEditV1内的顶级项接收到焦点，并且没有将焦点转发到TextInput。为了防止这种情况，QML提供了FocusScope。
import QtQuick
import QtQuick.Window
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
// Rectangle{
// width:200;height:80;
// color: "linen"
// TextInput {
// id: input1
// x: 8; y: 8
// width: 96; height: 20
// focus: true
// text: "Text Input 1"
// KeyNavigation.tab: input2
// }
// TextInput {
// id: input2
// x: 8; y: 36
// width: 96; height: 20
// text: "Text Input 2"
// KeyNavigation.tab: input1
// }
// }
TLineEditV1{
id:input1
text: "Text input 1"
input.font.pixelSize: 16
height: input.font.pixelSize+10
input.color: 'white'
focus:true
KeyNavigation.tab: input2
}
TLineEditV1{
id:input2
text: "Text input 2"
input.font.pixelSize: 16
y:input1.y+input1.height+12
height: input.font.pixelSize+10
input.color: 'white'
KeyNavigation.tab: input1
}
}
Keys
允许基于某些按键执行代码。例如，要移动和缩放一个正方形，我们可以使用上、下、左和右键来平移元素，使用加号和减号键来缩放元素。
import QtQuick
import QtQuick.Window
Rectangle {
width: 400; height: 200
Rectangle{
id:square
width: 100;height:100
color:'green'
border.color: Qt.lighter(color)
}
focus: true
Keys.onLeftPressed: square.x -= 8
Keys.onRightPressed: square.x += 8
Keys.onUpPressed: square.y -= 8
Keys.onDownPressed: square.y += 8
Keys.onPressed: function(event){
switch(event.key)
{
case Qt.Key_Plus:square.scale+=0.2;break;
case Qt.Key_Minus:square.scale-=0.2;break;
}
}
}
完整代码链接