企业官网建设流程全解析

一、功能说明

基于 QML +QtMultimedia实现轻量音乐播放器：

• 播放 / 暂停 / 停止
• 播放进度条拖拽定位
• 音量调节滑块
• 歌曲列表点击切换曲目
• 界面美化、状态联动

二、项目配置

项目.pro/ CMake 必须添加多媒体模块：

pro

QT += multimedia

三、完整 QML 代码main.qml

qml

import QtQuick 2.15 import QtQuick.Controls 2.15 import QtMultimedia 5.15 ApplicationWindow { width: 450 height: 320 visible: true title: "QML 音乐播放器" color: "#f8f9fa" // 多媒体核心播放器 MediaPlayer { id: player volume: 0.7 // 默认音量 onPositionChanged: progressSlider.value = position onDurationChanged: progressSlider.to = duration } // 歌曲列表数据模型 ListModel { id: songModel ListElement { name: "歌曲一"; path: "qrc:/music/song1.mp3" } ListElement { name: "歌曲二"; path: "qrc:/music/song2.mp3" } ListElement { name: "歌曲三"; path: "qrc:/music/song3.mp3" } } Column { anchors.fill: parent padding: 15 spacing: 12 // 歌曲列表 ListView { id: songList width: parent.width height: 140 model: songModel clip: true delegate: Rectangle { height: 36 color: ListView.isCurrentItem ? "#cce5ff" : "white" border.color: "#eee" Text { text: name anchors.verticalCenter: parent.verticalCenter leftMargin: 10 font.pixelSize: 14 } // 点击切换歌曲并播放 MouseArea { anchors.fill: parent onClicked: { player.source = path player.play() } } } } // 播放进度条 Slider { id: progressSlider width: parent.width height: 30 from: 0 to: 0 value: 0 onValueChanged: { // 拖拽定位播放位置 if(thumb.pressed) player.position = value } } // 控制按钮行 Row { anchors.horizontalCenter: parent.horizontalCenter spacing: 20 Button { text: player.playbackState === MediaPlayer.PlayingState ? "暂停" : "播放" width: 80 onClicked: { if(player.playbackState === MediaPlayer.PlayingState) player.pause() else player.play() } } Button { text: "停止" width: 80 onClicked: player.stop() } } // 音量控制 Row { width: parent.width spacing: 10 Text { text: "音量"; font.pixelSize: 14 } Slider { id: volSlider width: 200 from: 0 to: 100 value: player.volume * 100 onValueChanged: player.volume = value / 100.0 } } } }

四、资源配置

1. 将 mp3 音频文件放入 Qt 资源文件qrc；
2. 修改ListElement中path为实际资源路径；
3. Qt5/Qt6 均兼容该代码。

五、核心知识点

1. MediaPlayer：Qt 标准多媒体播放核心类；
2. 进度条Slider双向绑定播放位置；
3. ListView列表点击切换播放源；
4. 音量数值映射：0~100 滑块 → 0.0~1.0 播放器音量；
5. 状态判断区分播放 / 暂停按钮文本。

小结

该案例整合 QML布局、列表、滑块、多媒体、信号绑定，是 Qt Quick 多媒体项目入门首选，可扩展上一曲 / 下一曲、循环播放、歌词显示等功能。