Qt Quick 08｜QML 综合实战：简易音乐播放器 + 聊天界面

正文

结合前面所有知识点，完成两个综合实战项目，串联布局、控件、动画、列表、样式等核心能力。

案例一：简易音乐播放器

功能：播放 / 暂停按钮、歌曲列表、进度条、背景美化、简单动画

qml

import QtQuick 2.15 import QtQuick.Controls 2.15 import QtMultimedia 5.15 // 多媒体模块 ApplicationWindow { width: 400 height: 300 visible: true title: "QML 简易音乐播放器" // 音乐播放核心 MediaPlayer { id: player source: "qrc:/music/test.mp3" } // 界面布局 Column { anchors.fill: parent spacing: 10 padding: 15 // 歌曲封面 Rectangle { width: 120 height: 120 radius: 60 anchors.horizontalCenter: parent.horizontalCenter color: "#dddddd" } // 进度条 Slider { anchors.horizontalCenter: parent.horizontalCenter width: 300 from: 0 to: player.duration value: player.position } // 控制按钮 Row { anchors.horizontalCenter: parent.horizontalCenter spacing: 20 Button { text: player.playbackState === MediaPlayer.PlayingState ? "暂停" : "播放" onClicked: { if(player.playbackState === MediaPlayer.PlayingState) player.pause() else player.play() } } Button { text: "停止" onClicked: player.stop() } } // 歌曲列表 ListView { width: 300 height: 80 model: ListModel { ListElement { name: "歌曲A" } ListElement { name: "歌曲B" } ListElement { name: "歌曲C" } } delegate: Text { text: name; height: 24 } } } }

说明：项目.pro 文件需添加QT += multimedia多媒体模块。

案例二：简易聊天界面

功能：消息列表、输入框、发送按钮、上下布局、消息气泡样式

qml

import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { width: 400 height: 500 visible: true title: "QML 简易聊天界面" Column { anchors.fill: parent spacing: 5 padding: 8 // 聊天消息列表 ListView { id: msgList width: parent.width height: parent.height - 60 clip: true model: ListModel { ListElement { msg: "你好！"; isSelf: false } ListElement { msg: "哈喽~"; isSelf: true } } delegate: Rectangle { width: parent.width height: 40 color: "transparent" // 区分自己消息 / 对方消息 Rectangle { text: msg padding: 8 radius: 6 color: isSelf ? "#91d5ff" : "#f0f0f0" anchors.right: isSelf ? parent.right : undefined anchors.left: !isSelf ? parent.left : undefined anchors.margins: 10 } } } // 底部输入区域 Row { width: parent.width height: 50 spacing: 5 TextField { id: edit width: parent.width - 80 height: 40 placeholderText: "输入消息..." } Button { text: "发送" width: 70 height: 40 onClicked: { if(edit.text !== ""){ msgList.model.append({"msg":edit.text, "isSelf":true}) edit.text = "" } } } } } }

实战总结

1. 音乐播放器：综合多媒体模块、Slider、ListView、状态判断；
2. 聊天界面：核心是ListView 气泡布局、动态追加数据、基础交互；
3. 两个案例覆盖 QML 80% 常用知识点，可在此基础上扩展头像、表情包、网络通信等功能。