文章目录

大风车color:whitehorizontalAlignment:

parent.width}

1、import语句导入一个模块。

qt6可以不写版本号自动加载最高版本的模块。

4、元素声明形式为type{

6、QML文档中的任意元素可以通过使用其id不带引号的标识符进行访问。

7、元素可以嵌套这意味着父元素可以有子元素。

子元素可以使用parent关键字访问父元素。

100;

thisLabel.timesKeyNavigation.tab:

thisLabel//

{increment()}Keys.onEscapePressed:

{text

1、id是用于引用QML文件在QML中称为“document”中的元素。

id在文档中必须是唯一的不能重置为其他值。

类似于C的引用。

2、属性可以设置值具体取决于其类型。

如果没有为属性指定值将使用默认初始值。

4、可以使用property限定符向元素添加新属性后跟类型、名称和可选的初始值property类型名称值。

6、基于int的值将自动转换为字符串类型。

每次次times属性更改时都会更新文本。

7、编写grouped

property的另一种方法是font{family:“Ubuntu”;

核心元素

视觉元素如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

要显示文本可以使用Text元素。

它最显著的属性是字符串类型的text属性。

元素根据给定的文本和使用的字体例如font.family、font.pixelSize等计算其初始宽度和高度。

要更改文本的颜色只需使用color属性。

Text

可以使用horizontalAlignment和verticalAlignment属性对齐文本。

使用style和styleColor属性允许以轮廓、凸起和凹陷模式渲染文本。

elide属性允许将省略符位置设置为文本的左侧、右侧或中间。

如果不希望省略符模式的“…”出现但仍希望看到全文可以使用wrapMode属性包装文本仅在显式的设置了宽度时有效)。

Image

Image元素能够以各种格式例如PNG、JPG、GIF、BMP、WEBP显示图像。

有关支持的图像格式的完整列表请参阅Qt文档。

除了提供图像URL的source属性外它还包含一个控制大小调整行为的fillMode。

Image

MouseArea这是一个矩形的不可见项可以在其中捕获鼠标事件。

Rectangle

组件是可重用的元素。

QML提供了创建组件的不同方法。

目前最简单的形式是基于文件的组件

在文件中放置QML元素并为该文件提供元素名例如Button.qml来创建的。

然后就可以像Qt

Button.qml

平移通过改变x、y位置完成简单的平移。

旋转值以度0-360表示。

缩放大于1表示放大小于1表示缩小。

在展示示例之前介绍一个小助手ClickableImage元素。

一个带有鼠标区域的图像。

ClickableImage.qml

1.0;}}ClickableImage{x:50;y:68;id:qq1source:

../../images/qq.pngonClicked:{x10;}}ClickableImage{x:150;y:68;id:qq2source:

../../images/qq.pngonClicked:{rotation10;}}ClickableImage{x:250;y:68;id:qq3source:

../../images/qq.pngonClicked:{rotation10;scale0.1;}}

定位器

Quick模块提供以下功能Row、Column、Grid和Flow。

RedSquare.qml

Row元素将其子项彼此相邻放置从左到右或从右到左具体取决于layoutDirection属性。

同样spacing用于分隔子项。

import

Grid元素在网格中排列其子元素。

通过设置rows和columns属性可以约束行或列的数量。

属性flow和layoutDirection用于控制项添加到网格的顺序而spacing控制分隔子项的空间量。

import

#ea7025]Grid{//columns默认值为4anchors.centerIn:

8spacing:

4Repeater{model:16Rectangle{id:rectproperty

int

Math.floor(Math.random()*3)color:

root.colorArray[colorIndex]width:

56;

parenttext:Cell/*parent.index*/rect.Positioner.indexcolor:white}}}}

QML可以用锚来布局项目。

锚定的概念是Item的基础可用于所有可视化QML元素。

文本元素除了top、bottom、left、right、horizontalCenter、verticalCenter锚外还有baseline锚每个锚都有一个偏移。

对于top、bottom、left、right锚它们称为边距。

对于horizontalCenter、verticalCenter和baseline它们称为偏移。

import

parent.horizontalCenteranchors.horizontalCenterOffset:

Input

允许用户输入一行文本。

元素支持输入约束如validator、inputMask、echoMode。

可以在文本输入中单击以更改焦点。

使用KeyNavigation属性可以通过键盘更改焦点。

TLineEditV1.qml

200;height:50Rectangle{anchors.fill:

parentcolor:lightsteelblueborder.color:

gray}property

inputTextInput{id:inputanchors.fill:

2focus:true//wrapMode:Text.WordWrap}

}使用tab键进行导航。

焦点不会更改为input2。

仅使用focus:true是不够的。

问题是当焦点转移到input2元素时TlineEditV1内的顶级项接收到焦点并且没有将焦点转发到TextInput。

为了防止这种情况QML提供了FocusScope。

import

input.font.pixelSize10input.color:

whitefocus:trueKeyNavigation.tab:

input2}TLineEditV1{id:input2text:

Text

16y:input1.yinput1.height12height:

input.font.pixelSize10input.color:

input1}

允许基于某些按键执行代码。

例如要移动和缩放一个正方形我们可以使用上、下、左和右键来平移元素使用加号和减号键来缩放元素。

import

100;height:100color:greenborder.color:

square.x

function(event){switch(event.key){case

Qt.Key_Plus:square.scale0.2;break;case

Qt.Key_Minus:square.scale-0.2;break;}}

完整代码链接