一、前置说明
本节使用Qt Quick 2.15+Qt Quick Controls 2控件库，需额外导入控件模块：
qml
import QtQuick.Controls 2.15二、基础控件逐个讲解
1. Text 文本控件
展示文字，支持字体、颜色、换行、对齐：
qml
Text { text: "QML 文本控件\n第二行内容" font.pixelSize: 16 color: "#222222" horizontalAlignment: Text.AlignLeft wrapMode: Text.WordWrap // 自动换行 }2. Rectangle 矩形容器
最常用布局容器，设置背景色、圆角、边框、阴影：
qml
Rectangle { width: 200 height: 100 color: "#f0f0f0" radius: 8 // 圆角 border.color: "#cccccc" border.width: 1 }3. Image 图片控件
加载本地图片、资源图片，支持缩放模式：
qml
Image { source: "qrc:/images/logo.png" // 资源路径 fillMode: Image.PreserveAspectFit // 等比例缩放 width: 120 height: 80 }4. Button 按钮控件（Qt Quick Controls）
自带点击状态、hover 状态，配合点击信号使用：
qml
Button { text: "点击按钮" width: 100 height: 35 onClicked: { console.log("按钮被点击") // 控制台打印日志 } }5. ListView 列表视图（高频控件）
一维列表，由model（数据模型）+delegate（条目模板）组成，类似 QWidget 的 QListView。
qml
ListView { width: 200 height: 200 // 1. 数据模型 model: ListModel { ListElement { name: "列表项 1" } ListElement { name: "列表项 2" } ListElement { name: "列表项 3" } } // 2. 条目模板：每个条目长什么样 delegate: Rectangle { height: 40 color: index % 2 === 0 ? "#ffffff" : "#f8f8f8" Text { text: name // 绑定model中的字段 anchors.verticalCenter: parent.verticalCenter leftMargin: 10 } } }index：内置变量，代表当前条目索引；- 数据字段名和
ListElement内字段一一对应。
三、控件组合演示
将以上控件组合在一个窗口中，直观查看效果：
qml
import QtQuick 2.15 import QtQuick.Controls 2.15 Window { width: 400 height: 350 visible: true title: "常用控件组合" Column { anchors.centerIn: parent spacing: 10 Text { text: "QML 基础控件演示"; font.pixelSize: 18 } Button { text: "测试按钮" } ListView { width: 200; height: 150; /* 上方ListView代码 */ } } }小结
Text/Image/Rectangle是静态基础元素，Button是交互控件，ListView用于批量列表数据展示，是 QML 界面开发的标配控件。
)
