# 核心元素

元素可以分为视觉元素和非视觉元素。视觉元素（如Rectangle）具有几何形状，通常在屏幕上呈现为一个区域。非视觉元素（如Timer）提供一般功能，通常用于操作视觉元素。

目前，将专注于基本的视觉元素，例如Item, Rectangle, Text, Image 和 MouseArea。但是，通过使用 Qt Quick Controls 2 模块，可以创建由标准平台组件（例如按钮、标签和滑块）构建的用户界面。

# 项(Item)元素

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

Geometry(几何属性) - x和y定义了左上角的位置，width和height定义了元素的展开范围，z定义元素从自然顺序上向上或向下堆放的堆叠顺序。
Layout handling(布局处理) - anchors（左、右、上、下、垂直和水平中心）属性带上可选 margins属性相对于其他元素定位。
Key handling(按键处理) - 首先focus属性来启用键处理，依附Key和KeyNavigation属性来控制键处理。
Transformation(变换) - scale(缩放)和rotate(旋转)变换，用于x,y,z变换的通用transform属性列表，以及一个transformOrigin(变换矩阵原点)点。
Visual(可视化) - opacity控制透明度, visible控制元素的显隐, clip约束元素绘制操作的边界，smooth增强渲染质量。
State definition(状态定义) - states属性列出支持的状态列表，state属性表示当前状态，transitions属性列出动画状态改变。

为了更好地理解不同的属性，在本章中将尝试在呈现的元素上下文中介绍它们。请记住，这些基本属性在每个视觉元素上都可用，并且在这些元素中的作用相同。

提示

Item元素通常用作其他元素的容器，类似于HTML中的div元素。

# 矩形(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
}

提示

有效的颜色值是来自SVG颜色名称(参考http://www.w3.org/TR/css3-color/#svg-color (opens new window))的颜色。可以通过不同方式在QML中指定颜色，最常见的方式是RGB字符串（‘#FF4444’）或颜色名称（例如‘white’）。

用一些JavaScript可以生成随机颜色：

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

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

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

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

提示

没有设置width/height的矩形将不可见。当有几个矩形的宽度（高度）相互依赖，并且组合逻辑出现问题时，经常会发生这种情况。务必小心！

提示

没有创建有角度渐变的可能。为此，最好使用预定义的图像。一种可能性是仅旋转使用了渐变的矩形，但要注意旋转矩形的几何形状不会改变，因此会导致混淆，因为元素的几何形状与可见区域不同。从作者的角度来看，这种情况下使用设计的渐变图像确实更好。

# 文本(Text)元素

要显示文本，可以使用Text元素。它最显着的属性是类型为string的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属性来实现。elide属性允许将省略位置设置为文本的左侧、右侧或中间。

如果您不希望出现省略模式的“...”，但仍想查看全文，还可以使用wrapMode属性包装文本（仅在显式设置宽度时有效）：

Text {
    width: 40; height: 120
    text: 'A very long text'
    // '...' shall appear in the middle
    elide: Text.ElideMiddle
    // red sunken text styling
    style: Text.Sunken
    styleColor: '#FF4444'
    // align text to the top
    verticalAlignment: Text.AlignTop
    // only sensible when no elide mode
    // 只有在没有设置省略模式的时候有效
    // wrapMode: Text.WordWrap
}

Text元素只显示给定的文本，元素占据的剩余空间是透明的。这意味着它不会渲染任何背景装饰，因此可以根据需要提供合理的背景。

提示

请注意，Text项的初始宽度取决于设置的字体和文本字符串。没有设置宽度且没有文本的Text元素将不可见，因为初始宽度将为0。

提示

通常，当想要布局Text元素时，需要区分对齐Text元素边界框内的文本和对齐元素边界框本身。在前一种情况下，使用horizontalAlignment和verticalAlignment属性；而在后一种情况下，操作元素几何图形或使用锚点。

# 图片(Image)元素

Image元素可以显示各种格式（例如PNG、JPG、GIF、BMP、WEBP）的图像。 有关支持的图像格式的完整列表，请参阅 Qt 文档 (opens new window)。除了用于提供图像URL的source属性之外，还包含一个用于控制调整大小行为的fillMode。

Image {
    x: 12; y: 12
    // width: 72
    // 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
}

提示

URL可以是带有正斜杠的本地路径（“./images/home.png”）或网络链接（例如“http://example.org/home.png (opens new window)”)。

提示

使用PreserveAspectCrop(保持纵横比剪切)的Image元素也应该启用裁剪以避免图像数据被渲染到Image边界之外。默认情况下禁用裁剪（clip: false）。需要启用裁剪 (clip: true) 以将绘画限制为元素边界矩形。这可以用于任何视觉元素，但应该谨慎使用 (opens new window)。

提示

使用C++，可以使用QQuickImageProvider创建自己的图像提供程序。这允许快速创建图像并利用线程加载图像。

# 鼠标区域(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
}

MouseArea

提示

这是Qt Quick的一个重要方面：将输入处理与视觉呈现分离。这允许向用户展示的接口元素上带有更大的实际交互区域。

提示

对于更复杂的交互，参考Qt Quick输入处理器 (opens new window)。它们旨在替代诸如MouseArea和Flickable之类的元素，并提供更好的控制和灵活性。这个想法是在每个处理器实例中处理一个交互方面，而不是在单个元素中集中处理来自给定源的所有事件(这是以前的情况)。

← QML语法组件 →