QML Book 第四章 入门 2

4.2. 基本元素

元素可以分为可视和非可视元素。可视元素(如 Rectangle)具有几何形状，通常显示屏幕上的一块区域。非可视元素(如 Timer)提供特定的功能，通常用于操作可视元素。

现在我们将专注于几个基础的可视化元素，例如Item（基础元素对象），Rectangle（矩形框），Text（文本），Image（图像）和 MouseArea（鼠标区域）。

4.2.1. Item 元素

Item 元素是所有可视元素的基类，所有其它的可视元素都继承自 Item。它自身没有进行任何绘制操作，但是定义了所有可视元素的共有属性：

分类	属性值
几何属性	x，y 定义了元素左上角的位置，width，height 定义元素的显示范围，z 定义元素之间的堆叠顺序
布局管理	anchors (left, right, top, bottom, vertical and horizontal center) 与 margins 一起定义了元素与其它元素之间的位置关系
按键管理	附加属性 key（按键）和 keyNavigation（按键定位）属性来控制按键操作，处理输入焦点（focus）可用操作
转换	scale 和 rotate 转换，通用的 x,y,z 属性列表 transform，旋转基点设置（transformOrigin）
可视化	opacity 控制透明度，visible 控制元素是否显示，clip 用来限制元素边界的绘制，smooth 用来提高渲染质量
状态机	states 提供了元素当前所支持的状态列表，当前属性的改变也可以使用 transitions 属性列表来定义状态转变动画

为了更好地理解不同的属性，我们将尝试在本章的介绍中介绍它们。请记住，这些基本属性可在每个可视元素上使用，并在这些元素之间工作。

** 注意 **
Item 元素通常被用来作为其它元素的容器使用，这有点类似于 HTML 语言中的 div 元素。

4.2.2. Rectangle 元素

Rectangle 元素继承自 Item，并添加了填充颜色。另外 Rectangle 通过 border.color 和 border.width 属性来支持边框属性。我们还可以使用 radius 属性来创建圆角的矩形。

背景色、边框以及圆角

** 提示 **
有效的颜色值是 SVG 颜色名称的颜色（具体可以请参见 http://www.w3.org/TR/css3-color/#svg-color ）。 我们可以以不同的方式在 QML 中给颜色变量赋值，但最常见的方式是 RGB 字符串（如 “＃FF4444”）或颜色名称（如 “white”）。

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

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 176; height: 96
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "slategray" }
    }
    border.color: "slategray"
}

渐变

从上例中我们可以看到：渐变由一系列的渐变停顿（GradientStop）来定义。每个停顿都有一个位置和颜色属性，GradientStop 的位置属性用于标记 y 轴上的位置（其中 0 表示顶部，1 表示底部）， GradientStop 的颜色属性标记在该位置的颜色。

** 提示 **
没有设置 width 或 height 的矩形将是不可见的。当我们有几个矩形宽度（高度）取决于彼此并且组合逻辑中出现问题时，会发生这种情况。 所以要小心！

** 提示 **
不能创建有角度的渐变。为此，最好使用预定义的图像。一种可能的方法是旋转带渐变的矩形，但要注意的是，旋转的矩形的形状不会改变，因此元素的几何形状与可见区域不相同会导致混淆。从作者的角度来看，在这种情况下使用设计好的渐变图像真的是更好的选择。

本文参考链接：Quick Starter