Qt Quick 03｜QML 常用基础控件：Button、Text、Image、Rectangle、ListView

一、前置说明本节使用Qt Quick 2.15Qt Quick Controls 2控件库需额外导入控件模块qmlimport QtQuick.Controls 2.15二、基础控件逐个讲解1. Text 文本控件展示文字支持字体、颜色、换行、对齐qmlText { text: QML 文本控件\n第二行内容 font.pixelSize: 16 color: #222222 horizontalAlignment: Text.AlignLeft wrapMode: Text.WordWrap // 自动换行 }2. Rectangle 矩形容器最常用布局容器设置背景色、圆角、边框、阴影qmlRectangle { width: 200 height: 100 color: #f0f0f0 radius: 8 // 圆角 border.color: #cccccc border.width: 1 }3. Image 图片控件加载本地图片、资源图片支持缩放模式qmlImage { source: qrc:/images/logo.png // 资源路径 fillMode: Image.PreserveAspectFit // 等比例缩放 width: 120 height: 80 }4. Button 按钮控件Qt Quick Controls自带点击状态、hover 状态配合点击信号使用qmlButton { text: 点击按钮 width: 100 height: 35 onClicked: { console.log(按钮被点击) // 控制台打印日志 } }5. ListView 列表视图高频控件一维列表由model数据模型delegate条目模板组成类似 QWidget 的 QListView。qmlListView { 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内字段一一对应。三、控件组合演示将以上控件组合在一个窗口中直观查看效果qmlimport 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 界面开发的标配控件。