引言
在现代应用程序开发中，列表视图是最常见且实用的UI组件之一。Qt Quick（QML）提供了强大的ListView组件，它不仅可以高效地展示大量数据，还能通过自定义实现丰富的交互效果。本文将以一个简单的QML ListView项目为例，展示如何打造既美观又实用的列表视图，包括样式定制和数据交互两个实例。
相关阅读
在深入了解本项目之前，建议先了解以下QML相关资源：
项目结构
以下是本项目的结构图：
项目说明：
CMakeLists.txt：CMake构建配置文件main.cpp：C++入口文件，负责启动QML应用ListViewStyle.qml：样式定制的示例QML文件ListViewInteraction.qml：数据交互的示例QML文件resource.qrc：Qt资源文件，用于管理项目资源images/：存放项目中使用的图片资源
示例一：ListView样式定制
在这个示例中创建了一个联系人列表，展示了如何自定义ListView的各个部分，包括header、delegate和section。
代码解析
import QtQuick
import QtQuick.Controls
Window {
width: 400
height: 600
visible: true
title: "ListView 样式定制示例"
// 定义数据模型
ListModel {
id: contactModel
ListElement { name: "张三"; avatar: "qrc:/images/avatar1.png"; status: "在线" }
ListElement { name: "李四"; avatar: ""; status: "在线" }
ListElement { name: "王五"; avatar: ""; status: "在线" }
ListElement { name: "菜狗"; avatar: "qrc:/images/avatar2.png"; status: "离线" }
ListElement { name: "老六"; avatar: "qrc:/images/avatar3.png"; status: "忙碌" }
}
首先定义了应用窗口和数据模型。ListModel包含联系人的名称、头像路径和状态信息。
ListView {
anchors.fill: parent
model: contactModel
spacing: 2
clip: true
// 自定义header
header: Rectangle {
width: parent.width
height: 50
color: "#2D82B5"
Text {
anchors.centerIn: parent
text: "联系人列表"
font.pixelSize: 20
color: "white"
}
}
ListView组件使用contactModel作为数据源，并通过header属性自定义了一个蓝色标题栏。
// 自定义delegate
delegate: Rectangle {
width: parent.width
height: 80
color: ListView.isCurrentItem ? "#BCE6FF" : "white"
border.width: 0
MouseArea {
anchors.fill: parent
onClicked: parent.ListView.view.currentIndex = index
}
Row {
anchors.fill: parent
anchors.margins: 10
spacing: 10
// 头像区域
Item {
width: 60
height: 60
// 图片头像
Image {
id: avatarImage
anchors.fill: parent
source: avatar
visible: status === Image.Ready
fillMode: Image.PreserveAspectCrop
Rectangle {
anchors.fill: parent
color: "#999999A0" // 半透明灰色
visible: model.status === "离线"
}
}
// 文字头像（当图片加载失败时显示）
Rectangle {
visible: avatarImage.status !== Image.Ready
anchors.fill: parent
radius: 30
color: "#E0E0E0"
Text {
anchors.centerIn: parent
text: name[0]
font.pixelSize: 24
}
}
}
delegate部分定义了列表项的显示方式。然后为每个联系人显示头像（如果有）或首字母头像（如果头像加载失败）。当点击列表项时，该项会被设置为当前项并改变背景色。对于离线状态的联系人，头像上会显示一层半透明灰色蒙版。
Column {
anchors.verticalCenter: parent.verticalCenter
spacing: 5
Text {
text: name
font.pixelSize: 16
font.bold: true
}
Text {
text: status
color: {
if (status === "在线") return "#4CAF50"
if (status === "离线") return "#9E9E9E"
return "#F44336"
}
}
}
}
}
联系人信息部分使用Column布局显示姓名和状态，并根据状态值动态设置颜色：在线为绿色，离线为灰色，忙碌为红色。
// 自定义section
section.property: "status"
section.delegate: Rectangle {
width: parent.width
height: 30
color: "#F5F5F5"
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 10
text: section
font.bold: true
color: "#2D82B5"
}
}
}
}
最后，使用section功能按联系人状态对列表进行分组，每个分组都有一个淡灰色背景的标题栏显示状态名称。
运行效果
示例二：ListView数据交互
第二个示例展示了如何实现与ListView的数据交互，包括添加和删除列表项。
代码解析
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
width: 400
height: 600
visible: true
title: "ListView 数据交互示例"
// 定义数据模型
ListModel {
id: fruitModel
ListElement { name: "苹果"; price: "5.0" }
ListElement { name: "香蕉"; price: "3.5" }
ListElement { name: "橙子"; price: "4.0" }
}
这个示例中，我们创建了一个水果列表，包含水果名称和价格信息。
ColumnLayout {
anchors.fill: parent
spacing: 10
// 添加新水果的输入区域
RowLayout {
Layout.margins: 10
TextField {
id: nameInput
placeholderText: "水果名称"
Layout.fillWidth: true
}
TextField {
id: priceInput
placeholderText: "价格"
Layout.fillWidth: true
}
Button {
text: "添加"
onClicked: {
if (nameInput.text && priceInput.text) {
fruitModel.append({"name": nameInput.text, "price": priceInput.text})
nameInput.text = ""
priceInput.text = ""
}
}
}
}
界面顶部有两个输入框和一个"添加"按钮，用于添加新的水果项。通过调用fruitModel.append()方法，我们可以将新项添加到模型中，ListView会自动更新显示。
// ListView显示区域
ListView {
id: listView
Layout.fillWidth: true
Layout.fillHeight: true
model: fruitModel
delegate: ItemDelegate {
width: listView.width
contentItem: RowLayout {
Text { text: name; Layout.fillWidth: true }
Text { text: price + "元" }
Button {
text: "删除"
onClicked: fruitModel.remove(index)
}
}
}
}
}
}
ListView的delegate使用了ItemDelegate和RowLayout来布局每个水果项，显示名称和价格，并添加了一个"删除"按钮。点击删除按钮时，调用fruitModel.remove(index)方法删除相应的项。
运行效果
总结
本文通过两个实例展示了QML ListView的强大功能：
- 样式定制示例：展示了如何自定义ListView的外观，包括头部、列表项和分组，创建具有吸引力的用户界面。
- 数据交互示例：展示了如何通过简单的界面操作实现对ListView数据的添加和删除。
QML强大的声明式语法和丰富的组件库使得创建复杂而美观的列表界面变得简单高效。通过合理利用ListView的各种属性和功能，我们可以构建出既美观又实用的列表视图，满足各种应用场景的需求。
项目代码已上传至Gitcode，您可以通过以下链接获取完整代码：
GitCode QML ListView示例
