本文已参与「新人创作礼」活动，一起开启掘金创作之路。

QML基本元素可以分为可视元素和不可视元素。
可视元素：具有几何坐标，会在屏幕上占据一块显示区域
不可视元素：通常提供一种功能，这些功能作用于可视元素
介绍一些最基本的可视元素：item、Rectangle、Text、image、MouseArea

1，item
item是所有可视元素中最基本的一个，它是所有可视元素的父元素，它的作用是定义所有可视元素的通用属性

几何：x和y用于定义元素左上角的坐标，width和height则定义了元素的范围，z定义了元素上下的层叠关系

布局：anchors（具有left、right、top、bottom、vert ical、horizontal center等）用于定位元素相对于其他元素的margins位置

键盘处理：Key和Keynavigation属性用于控制键盘；focus属性用于启用键盘处理，也就是获取焦点

变形：提供 scale 和 rotate 变形以及更一般的针对 x、 y、 z 坐标值变换以及 transformOrigin点的 transform属性列表。

可视化：opacity属性用于控制透明度，visible属性用于控制显示/隐藏元素；clip属性用于剪切元素；smooth属性用于增强渲染质量

状态定义：提供一个由状态组成的列表states和当前状态state属性；同时还有一个transitions列表，用于设置状态切换是的动画效果

2，Rectangle
Rectangle 继承了 Item，并在 Item的基础之上增加了填充色属性、边框相关的属性。为了定义圆角矩形，Rectangle 还有一个 radius 属性。下面的代码定义了一个宽 100 像素、高 150 像素，浅金属蓝填充，红色 4 像素的边框的矩形：

Rectangle { 
    id: rect 
    width: 100  
     height: 150 
    color: "lightsteelblue" 
    border { 
        color: "#FF0000" 
        width: 4 
    } 
    radius: 8 
}

Rectangle 除了 color 属性之外，还有一个 gradient 属性，用于定义使用渐变色填充。例如：

Rectangle { 
    width: 100 
    height: 150 
    gradient: Gradient { 
        GradientStop { position: 0.0; color: "red" } 
        GradientStop { position: 0.33; color: "yellow" } 
        GradientStop { position: 1.0; color: "green" } 
    } 
    border.color: "slategray" 
}

3，Text
如果需要显示文本，你需要使用 Text 元素。Text 元素最重要的属性当然就是 text 属性。这个属性类型是 string。一个没有设置宽度或者文本的文本元素（Text Element）将不可见，默认的初始宽度是0。字体则可以通过字体属性组设置（例如 font.family、font.pixelSize 等）。如果要设置文本颜色，只需要设置 color 属性。Text 最简单的使用如下：

Text { 
    text: "The quick brown fox" 
    color: "#303030" 
    font.family: "Century" 
    font.pixelSize: 28 
}

了进一步增强文本渲染，我们还可以使用 style 和 styleColor 两个属性。这两个属允许我们指定文本的显示样式和这些样式的颜色以及外框效果，浮雕效果或者凹陷效果。对于很长的文本，通常我们会选择在文末尾使用 … ，此时我们需要使用 elide 属性。elide 属性还允许你指定 … 的显示位置。如果不希望使用这种显示方式，我们还可以选择通过 wrapMode 属性指定换行模式（这个属性只在明确
设置了宽度后才生效）。例如下面的代码：

Text { 
    width: 160 
    height: 120 
    text: "A very very long text" 
    elide: Text.ElideMiddle 
    style: Text.Sunken 
    styleColor: '#FF4444' 
    verticalAlignment: Text.AlignTop 
    font { 
        pixelSize: 24 
    } 
}

4，image
Image 元素则用于显示图像。目前 QML 支持的图像格式有 PNG、 JPG、 GIF 和 BMP 等。除此之外，我们也可以直接给 source 属性一个 URL 来自动从网络加载图片，也可以通过fillMode 属性设置改变大小的行为。例如下面代码片段：

Image { 
    x: 12; 
    y: 12 
    // width: 48 
    // height: 118 
    source: "assets/rocket.png" 
} 

Image { 
    x: 112; 
    y: 12 
    width: 48 
    height: 118/2 
    source: "assets/rocket.png" 
    fillMode: Image.PreserveAspectCrop
    clip: true 
}

这里的 URL，可以是本地路径（./images/home.png），也可以使网络路径（example.org/home.png）。这… QML 的一大特色：网络透明。如果一个 URL 是网络的，QML 会自动从这个地址加载对应的资源。
上面的代码中，我们使用了 Image.PreserveAspectCrop，意思是等比例切割。此时，我们需要同时设置 clip 属性，避免所要渲染的对象超出元素范围。

5，MouseArea
这个元素用于用户交互。这是一个不可见的矩形区域，用于捕获鼠标事件。我们在前面的例子中已经见过这个元素。通常，我们会将这个元素与一个可视元素结合起来使用，以便这个可视元素能够与用户交互。例如：

Rectangle { 
    id: rect1 
    x: 12; 
    y: 12 
    width: 76; 
    height: 96 
    color: "lightsteelblue" 
    MouseArea { 
        /* ~~ */ 
    } 
}

MouseArea 是 QtQuick 的重要组成部分，它将可视化展示与用户输入控制解耦。通过这种技术，你可以显示一个较小的元素，但是它有一个很大的可交互区域，以便在界面显示与用户交互之间找到一个平衡（如果在移动设备上，较小的区域非常不容易被用户成功点击。苹果公司要求界面的交互部分最少要有 40 像素以上，才能够很容易被手指点中）。输入处理与可视化显示分开，这是QtQuick中非常重要的概念，这样你的交互区域可以比你显示的区域大很多。

QML笔记（六）：QML基本元素

本文已参与「新人创作礼」活动，一起开启掘金创作之路。