第五章：快速入门

本章介绍的QML, 是在Qt 6中使用的一种声明式用户界面语言。我们将讨论QML语法，它是各种元素构成的树，接着将会介绍最重要的一些基本元素。稍后，我们将简要介绍如何创建自定义元素(称为组件)，以及如何使用属性操作来转换元素。最后，我们将看看如何在布局中安排元素，最后看看可供用户输入的元素。

这里）。您可以在 QML 中以不同的方式设置颜色，但最常见的方式是 RGB 字符串（“#FF4444”）或颜色名称（例如“白色”）。
可以使用一些 JavaScript 创建随机颜色：

1. color: Qt.rgba( Math.random(), Math.random(), Math.random(), 1 ) 
   

   ---

除了填充颜色和边框外，矩形还支持自定义渐变：

1. Rectangle { 
   

   ---

2. id: rect1 
   

   ---

3. x: 12; y: 12 
   

   ---

4. width: 176; height: 96 
   

   ---

5. gradient: Gradient { 
   

   ---

6. GradientStop { position: 0.0; color: "lightsteelblue" } 
   

   ---

7. GradientStop { position: 1.0; color: "slategray" } 
   

   ---

8. } 
   

   ---

9. border.color: "slategray" 
   

   ---

10. } 
    

    ---

渐变由一系列渐变色标定义。每个停靠点都有位置和颜色。该位置标记 y 轴上的位置（0 = 顶部，1 = 底部）。 GradientStop 的颜色标记了该位置的颜色。

注意
没有设置width/height的矩形将不可见。当有几个矩形宽度（高度）属性相互依赖或某些逻辑出现问题时，通常会发生这种情况。所以小心！

注意
无法创建有角度的渐变。为此，最好使用预定义的图像。一种可行方法是仅使用渐变旋转矩形，但请注意旋转矩形的坐标系不会改变，因此会导致混乱，因为元素的几何形状与可见区域不同。从作者的角度来看，在这种情况下使用经过设计的渐变图像是更好的方法。

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

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. } 
    

    ---

注意
URL可以是本地形式( “./images/home.png” ) ，也可以是远程网页形式(e.g. “http://example.org/home.png ”)

注意
使用 PreserveAspectCrop 的Image元素还应该启用剪辑，以避免图像数据被渲染到Image边界之外。默认情况下，剪辑被禁用（clip: false）。需要启用剪辑 (clip: true) 以将绘画约束到元素边界内。这可以用于任何视觉元素，但应谨慎使用。

注意
使用 C++，您可以使用 QQuickImageProvider 创建自己的图像提供程序。这允许您动态创建图像并使用线程加载图像。

Qt Quick输入处理。它们试图用于代替 MouseArea 和 Flickable 等元素，并提供更好的控制和灵活性。这个想法是在每个处理程序实例中处理一个交互方面，而不是像以前那样，将来自一个特定来源的所有事件集中在一个元素中处理。