QML中的元素可以分为可视元素和非可视元素。可视元素(如Rectangle)具有几何形状，通常在屏幕上显示一个区域。非可视元素(如Timer)提供一般功能，通常用于操作可视元素。这里，我们重点关注基础的视觉元素，如Item, Rectangle, Text, Image 和 Mouse Area。通过使用Qt Quick Controls 2模块，可以创建由标准平台组件(如按钮、标签和滑块)构建的用户界面。

Item元素

Item是所有视觉元素的基本元素，因为所有其他视觉元素都继承自 Item，Item本身不绘制任何东西，而是定义了所有视觉元素所有通用的属性：

  • Geometry - x和y用于定义左上角的位置，width和height扩展元素的宽度和高度，z元素定义自然顺序，向上或向下堆叠的顺序。
  • Layout handling -anchors(左，右，上，下，垂直和水平中心)定位元素相对于其他元素的位置关系和可选边距**margins**。
  • Key handling - 附加Key和Key Navigation属性来控制键处理，并首先启用焦点属性来启用键处理。
  • Transformation - scale和rotate变换以及 x,y,z 变换的通用变换属性列表，以及变换原点。
  • Visual - opacity控制透明度，visible显示/隐藏元素，clip限制元素边界的绘制操作，smooth提高渲染质量。
  • State definition -states列表属性，该属性具有受支持的状态列表、当前状态属性和用于动画状态更改的过渡列表属性。

为了更好地理解不同的属性，我们将尝试在本章中介绍元素的上下文中介绍它们，请记住，这些基本属性适用于每个视觉元素，并且在这些元素中的作用相同。 :::success Item 元素通常用作其他元素的容器，类似于 HTML 中的 div 元素 :::

Rectangle元素

Rectangle扩展了 Item并为其添加填充颜色。此外，它还支持由 border.color 和 border.width 定义的边框。要创建圆角矩形，您可以使用 radius 属性。

  1. import QtQuick
  2. import QtQuick.Window
  3. Window{
  4.     Rectangle {
  5.         id: rect1
  6.         x: 12; y: 12
  7.         width: 76; height: 96
  8.         color: "lightsteelblue"
  9.     }
  11.     Rectangle{
  12.         id: rect2
  13.         x: 112; y: 12
  14.         width: 76; height: 96
  15.         border.color: "lightsteelblue"
  16.         border.width: 4
  17.         radius: 8
  18.     }
  19. }

运行结果如下：
image.png :::success 有效的颜色值是来自SVG颜色名称的颜色参见: ::: :::success 你可以在QML中以不同的方式提供颜色，但最常见的方式是RGB字符串(‘ #FF4444 ‘)或颜色名称(如’ white ‘)。 ::: 可以使用一些 Javascript 创建随机颜色：color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1 )
除了填充颜色和边框，矩形还支持自定义渐变：

  1. import QtQuick
  2. import QtQuick.Window
  4. Window{
  5.     Rectangle {
  6.         id: rect1
  7.         x: 12; y: 12
  8.         width: 176; height: 96
  9.         gradient: Gradient {
  10.             GradientStop { position: 0.0; color: "lightsteelblue" }
  11.             GradientStop { position: 1.0; color: "slategray" }
  12.         }
  13.         border.color: "slategray"
  14.     }
  15. }

image.png
梯度是由一系列梯度停点定义的。每个停点都有一个位置和颜色。位置标记了y轴上的位置(0 =顶部，1 =底部)。渐变停止的颜色标记了该位置的颜色。 :::success 没有设置宽度/高度的矩形将不可见。这种情况经常出现在有几个宽度(高度)相互依赖的矩形，或者当你的组合逻辑出了问题。所以要小心处理! ::: :::success 无法创建有角度的渐变。为此，最好使用预定义的图像。一种可能性是仅使用旋转渐变的矩形，但要注意旋转矩形的几何形状不会改变，因此会导致混淆，因为元素的几何形状与可见区域不同。从作者的角度来看，使用设计的渐变图像确实更好。 :::

Text元素

要显示文本，可以使用text元素。它最值得注意的属性是string类型的text属性。元素根据给定的文本和使用的字体计算其初始宽度和高度。可以使用字体属性组(例如：font.family, font.pixelSize, …)。要改变文本的颜色，只需使用color属性。

  1. Text {
  2.     text: "The quick brown fox"
  3.     color: "#303030"
  4.     font.family: "Ubuntu"
  5.     font.pixelSize: 28
  6. }

image.png
文本可以使用水平对齐(horizontalAlignment)和垂直对齐(verticalAlignment)属性对齐到每一边和中心。为了进一步增强文本渲染，您可以使用 style 和 style Color 属性，它允许您以轮廓、凸起和凹陷模式渲染文本。
对于较长的文本，您通常希望定义一个中断位置，例如A very ... long text，这可以使用 elide 属性来实现。elide 属性允许您将elide 位置设置为文本的左侧、右侧或中间。
如果您不希望出现 elide 模式的“…”但仍想查看全文，您还可以使用wrap Mode 属性包装文本（仅在显式设置宽度时有效)。

  1. Text {
  2.     width: 40; height: 120
  3.     text: 'A very long text'
  4.     // '...' shall appear in the middle
  5.     elide: Text.ElideMiddle
  6.     // red sunken text styling
  7.     style: Text.Sunken
  8.     styleColor: '#FF4444'
  9.     // align text to the top
  10.     verticalAlignment: Text.AlignTop
  11.     // only sensible when no elide mode
  12.     // wrapMode: Text.WordWrap
  13. }

image.png
Text元素只显示给定的文本，它所占用的剩余空间是透明的。这意味着它不会渲染任何背景装饰，所以如果需要的话，就由您来提供一个合理的背景。 :::success 请注意，Text项的初始宽度取决于所设置的字体和文本字符串。没有设置宽度且没有文本的Text元素将不可见，因为初始宽度将为0。 ::: :::success 通常，当您想要布局Text元素时，您需要区分对齐Text元素边界框内的文本和对齐元素边界框本身。在前者中，希望您使用水平对齐(horizontal Alignment)和垂直对齐(vertical Alignment)属性，而在后者中，您希望操纵元素几何形状或使用锚(anchors)。 :::

Image元素

Image元素能够以各种格式（例如 PNG、JPG、GIF、BMP、WEBP）显示图像。有关支持的图像格式的完整列表，请查阅 Qt 文档。除了用于提供图像 URL 的源属性外，它还包含一个填充模式，用于控制调整大小行为。

  1. Image {
  2.     x: 12; y: 12
  3.     // width: 72
  4.     // height: 72
  5.     source: "assets/triangle_red.png"
  6. }
  7. Image {
  8.     x: 12+64+12; y: 12
  9.     // width: 72
  10.     height: 72/2
  11.     source: "assets/triangle_red.png"
  12.     fillMode: Image.PreserveAspectCrop
  13.     clip: true
  14. }

image.png

示例中的图片来来自：QTERSION\Src\qtwebengine\src\3rdparty\chromium\components\security_interstitials\core\browser\resources\images\1x

:::success URL 可以是带有正斜杠的本地路径（“./images/home.png”）或网络链接（例如“http://example.org/home.png”）。 ::: :::success 使用 Preserve Aspect Crop 的图像元素也应该启用裁剪以避免图像数据被渲染到图像边界之外。默认情况下禁用剪辑（clip: false）。
您需要启用裁剪 (clip: true) 以将绘画限制为元素边界矩形。这可以用于任何视觉元素，但应谨慎使用（打开新窗口）。 ::: :::success 您可以使用使用 C++ 的 QQuick Image Provider 创建自己的图像提供给程序。这允许您即时创建图像并利用线程加载图像。 :::

MouseArea元素

要与这些元素进行交互，您通常会使用鼠标区域(MouseArea)。它是一个矩形的隐形项目，您可以在其中捕获鼠标事件。当用户与可视部分交互时，鼠标区域通常与可视项一起使用以执行命令。

  1. Rectangle {
  2.     id: rect1
  3.     x: 12; y: 12
  4.     width: 76; height: 96
  5.     color: "lightsteelblue"
  6.     MouseArea {
  7.         id: area
  8.         width: parent.width
  9.         height: parent.height
  10.         onClicked: rect2.visible = !rect2.visible
  11.     }
  12. }
  14. Rectangle {
  15.     id: rect2
  16.     x: 112; y: 12
  17.     width: 76; height: 96
  18.     border.color: "lightsteelblue"
  19.     border.width: 4
  20.     radius: 8
  21. }

动画.gif :::success 这是 Qt Quick 的一个重要特征：输入处理与视觉呈现分离。这允许您向用户显示一个界面元素，其中实际交互区域可以更大。 ::: :::success 有关更复杂的交互，请参阅Qt快速输入处理程序Qt Quick Input Handlers(打开新窗口)。
它们的目的是用来代替鼠标区域和闪烁等元素，并提供更优的控制和更大的灵活性。
其思想是在每个处理程序实例中处理一个交互方面，而不是像以前那样将来自给定源的所有事件的处理集中在单个元素中处理。 :::