QML中Image & Rectangle & Text综合实例

以下是一个简单的QML实例，其中使用了Image、Rectangle和Text元素：

import QtQuick 2.15

Rectangle {
    width: 300
    height: 150
    color: "lightgray"

    Image {
        id: logo
        source: "qrc:/images/logo.png"
        anchors.centerIn: parent
        width: 100
        height: 100
    }

    Text {
        text: "Welcome to QML!"
        font.pointSize: 20
        anchors.top: logo.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

上述代码创建了一个宽度为300、高度为150的矩形，并在其中嵌套了Image和Text元素。Image元素用于显示一个图像文件，Text元素用于显示一段文本。矩形的颜色被设置为“lightgray”。

Image元素的源被设置为“qrc:/images/logo.png”，这意味着图像文件位于应用程序的资源文件夹中。Image元素的宽度和高度都被设置为100，并通过anchors.centerIn属性将其居中对齐。

Text元素的文本被设置为“Welcome to QML!”，字体大小被设置为20。它的顶部锚定到Image元素的底部，水平居中对齐。

资料领取：「链接」