4.3 Text 元素
在需要显示文本的场合，我们可以使用 Text 元素。它最显著的属性是 string 类型的 text 属性。Text 元素会根据给定的文本和其使用的字体计算其初始时的宽度和高度。字体的属性值可以使用字体属性组来进行设置（例如：font.family，font.pixelSize 等等）。如果要改变文本的颜色，只需使用 color 属性即可。
例如下面的代码：
Text {
text: "The quick brown fox"
color: "#303030"
font.family: "Ubuntu"
font.pixelSize: 28
}
的显示效果为：
Text
Text 元素能够通过水平对齐（horizontalAlignment）和垂直对齐（verticalAlignment）属性对齐到相应的一侧或者居中。为了进一步增强文本的渲染效果，我们可以使用 style 和 styleColor 属性，这允许我们将文本以轮廓（outline）、凸起（raised ）和下沉（sunken ）模式呈现。对于较长的文本，我们通常会需要定义一个省略（以 ... 代替无法显示的内容）显示的位置。这可以使用 elide 属性来实现。elide 属性允许我们将想要省略显示的位置设置为文本的左（left）、右（right）或中间（middle）。有时我们希望看到整个文本的内容，而不是以“...”的形式省略部分内容的显示，该如何处理呢？此时我们可以使用 wrapMode 属性，它以 Text 元素的宽度为依据对文本的内容进行折行显示：
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 元素的初始宽度（width）或高度（height）取决于文本字符串和字体集。没有设置宽度、高度或 text 属性的内容的 Text 元素将不可见，因为 Text 元素初始宽度和高度为 0，text 属性的内容默认为空。
** 注意： **
通常当我们想要布局 Text 元素时，我们需要区别 Text 元素内的文本内容的布局和 Text 元素自身的布局。在前者中，我们需要使用水平对齐（horizontalAlignment）和垂直对齐（verticalAlignment）属性，在后面的情形中我们需要使用的是在其他元素中使用的相类似定位和布局方式。例如：
Rectangle {
width: 400
height: 600
Text {
// 后面的情形
width: 100
height: 60
anchors.centerIn: parent
// 前面的情形
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
}
}
也就是前者指对内容的定位，后者指对元素的定位。
4.4 Image 元素
Image 元素能够用于显示多种格式的图像（例如 PNG、JPG、GIF、BMP、WEBP 等）。对于支持的图像格式的完整列表，请参考 Qt 文档。除了提供了明显的 URL 类型的属性 source 用于指定图片源之外，Image 元素还包含了一个用于控制缩放行为的 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
}
Image
** 注意： **
URL 可以是带有前斜杠的本地路径 (例如： ./imag/home.png) 或网络链接 （例如：http://example.org/home.png ）。
** 注意： **
Image 元素使用 fillMode 属性的 PreserveAspectCrop 值也可以实现对图像的剪切效果，以避免在图像边界之外呈现图像数据内容。默认情况下剪切属性是不可用的（即 clip: false）。我们可以将剪切属性使能（即 clip: true）来将这图片约束到元素的边界范围内。当然，这个剪切属性是可以在任何可视元素上使用的。
** 提示： **
使用 C++ 可以创建自己的图像提供程序，具体可以参见 QQuickImageProvider 的文档。这允许我们可以实现在动态和线程图像加载的情况下创建图像。
4.5 MouseArea 元素
为了进行元素间的交互，我们通常会用到 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
}
MouseArea1
MouseArea2
** 注意： **
这是 Qt Quick 的一个重要方面，输入处理与可视化显示相互分离。通过这种方式，我们可以轻松地实现在向用户显示一个可视的接口元素的同时，提供比可视区域更大的交互区域。
4.6 Component （组件）元素
Component （组件）是可重用的元素，QML 提供了不同的方法来创建组件。目前，我们只看最简单的形式 —— 基于文件的组件。通过将 QML 元素放置在文件中并赋予该文件一个元素名，创建了一个基于文件的组件（例如： MyButton.qml ）。我们可以像 QtQuick 模块中的其他元素一样使用组件，在我们的例子中，我们可以在代码中使用这个组件：
MyButton {
...
}
例如，让我们创建一个包含文本组件和鼠标区域的矩形。这就像一个简单的按钮，为了演示不需要很复杂。
Rectangle { // 内联的按钮
id: button
x: 12; y: 12
width: 116; height: 26
color: "lightsteelblue"
border.color: "slategrey"
Text {
anchors.centerIn: parent
text: "Start"
}
MouseArea {
anchors.fill: parent
onClicked: {
status.text = "Button clicked!"
}
}
}
Text { // 当按钮点击的时候文本内容改变
id: status
x: 12; y: 76
width: 116; height: 26
text: "waiting ..."
horizontalAlignment: Text.AlignHCenter
}
上面的示例的运行效果看起来与下面的两张图片类似。先是初始状态的 UI 效果，在按钮被单击后的效果是下面的图片。
button_waiting
button_clicked
现在我们的任务是在可重用组件（Component）中提取按钮 UI。为此，我们考虑了一个可能的按钮 API。我们可以通过想象别人如何使用你的按钮来实现这一点。以下是我们的简单示例：
// minimal API for a button
MyButton {
text: "Click Me"
onClicked: { // do something }
}
我们使用 text 属性设置文本，并实现我们自己的单击处理程序。另外，我们可能还希望按钮具有一个合理的初始大小，例如 width: 240。
为实现这一目标，我们首先创建一个名为 MyButton.qml 的文件。然后复制我们之前例子中的简单按钮的实现代码到这个文件中。另外，我们需要导出用户可能想要在根级别上更改的属性。这将使得我们的文件内容看起来类似下面这样：
// MyButton.qml
import QtQuick 2.0
Rectangle {
id: root
// export button properties
property alias text: label.text
signal clicked
width: 116; height: 26
color: "lightsteelblue"
border.color: "slategrey"
Text {
id: label
anchors.centerIn: parent
text: "Start"
}
MouseArea {
anchors.fill: parent
onClicked: {
root.clicked()
}
}
}
我们已经导出了 text 属性并在根级上创建了 clicked 信号。通常，我们命名根元素 root 来使引用更容易。我们使用 QML 的 alias （别名）特性，这是一种将嵌套的 QML 元素内的属性导出到根级别并使其可用于外部的方法。重要的是要知道，只有根级别的属性可以通过其他组件从这个文件外部访问。
要使用我们的 MyButton 元素，我们可以简单地在我们的文件中声明它。这样我们在前面介绍的例子会变得简单一些：
Button { // our Button component
id: button
x: 12; y: 12
text: "Start"
onClicked: {
status.text = "Button clicked!"
}
}
Text { // text changes when button was clicked
id: status
x: 12; y: 76
width: 116; height: 26
text: "waiting ..."
horizontalAlignment: Text.AlignHCenter
}
现在你可以在 UI 中使用任意多的按钮 MyButton { ... }。一个真正的按钮可能更复杂，例如：当点击时，提供反馈或者显示出更好的装饰效果。
** 注意： **
就个人而言，我们甚至可以更进一步，使用一个 Item 作为根元素。这可以防止用户更改我们设计的按钮的颜色，并为导出的 API 提供更多的控制。我们的目标应该是导出一个最小的 API。实际上，这意味着我们需要用一个 Item 来替换根矩形（ Rectangle ），并在根项目（ Item ）中使矩形（ Rectangle ）成为一个嵌套的元素。
Item {
id: root
width: 116; height: 26
property alias text: label.text
signal clicked
Rectangle {
anchors.fill parent
color: "lightsteelblue"
border.color: "slategrey"
}
...
}
有了（本节介绍的）这种技术，就可以很容易地创建一系列可重用的组件。
本文参考链接：Quick Starter
网友评论