QML:Rectangle、Image、Text

Rectangle 是Qt Quick中的一个元素，用于创建矩形的可视化对象。

Rectangle 继承自 Item 类，因此它具有 Item 的所有属性和功能，如位置、尺寸、变换等。除了继承的属性和功能，Rectangle 还具有一些额外的属性，用于定义矩形的外观和样式。

以下是一些常用的 Rectangle 属性：

• width 和 height：矩形的宽度和高度。
• color：矩形的填充颜色。
• border.color：矩形的边框颜色。
• border.width：矩形的边框宽度。
• radius：矩形的圆角半径，用于创建圆角矩形。

除了这些属性，Rectangle 还提供了其他方法和信号，用于处理鼠标事件、键盘事件和动画效果等。

以下是一个使用 Rectangle 创建一个简单矩形的示例：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 100
    color: "red"
    border.color: "black"
    border.width: 2
}

在上述示例中，我们创建了一个红色的矩形，并设置了宽度为200像素、高度为100像素。通过设置 color 属性为 "red"，使矩形的填充颜色为红色。使用 border.color 属性设置边框颜色为黑色，border.width 属性设置边框宽度为2像素。

通过这个简单示例，我们可以看到 Rectangle 元素的基本用法。它提供了一种简单且灵活的方式来创建矩形形状的可视化对象，并通过属性设置来定义其外观和样式。

Image

Image 用于显示图像，并提供了一些属性来控制图像的源、尺寸、填充等。

以下是一些常用的 Image 属性：

• source：图像的源，可以是本地文件路径或者URL。
• width 和 height：图像的宽度和高度。
• fillMode：图像的填充模式，用于控制图像在指定尺寸范围内的显示方式。

以下是一个使用 Image 显示本地图片的示例：

import QtQuick 2.0

Image {
    source: "image.jpg"
    width: 200
    height: 150
    fillMode: Image.PreserveAspectFit
}

在上述示例中，我们使用 Image 元素来显示名为 “image.jpg” 的本地图片。通过设置 source 属性指定图片的路径，然后设置 width 和 height 属性来定义图片的显示尺寸。最后，通过 fillMode 属性设置图像的填充模式为 Image.PreserveAspectFit，使图像在保持长宽比的前提下适应指定的显示尺寸。

Text

Text 用于显示文本内容，并提供了一些属性来控制文本的样式、对齐方式等。

以下是一些常用的 Text 属性：

• text：文本的内容。
• font.pixelSize：文本的字体大小。
• color：文本的颜色。
• horizontalAlignment 和 verticalAlignment：文本的水平和垂直对齐方式。

以下是一个使用 Text 显示文本的示例：

import QtQuick 2.0

Text {
    text: "Hello, World!"
    font.pixelSize: 24
    color: "blue"
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

在上述示例中，我们使用 Text 元素来显示 “Hello, World!” 的文本。通过设置 text 属性指定要显示的文本内容，然后使用 font.pixelSize 属性设置文本的字体大小为24像素，color 属性设置文本的颜色为蓝色。最后，通过 horizontalAlignment 和 verticalAlignment 属性设置文本的水平对齐方式为居中对齐，垂直对齐方式也为居中对齐。

通过这两个简单示例，我们可以看到 Image 和 Text 元素的基本用法。它们都提供了一种简单且灵活的方式来显示图像和文本内容，并通过属性设置来定义其样式和布局。