「Qt5 开发日记」极简音乐播放 Demo

1 UI 界面设计

在 Qt Designer 中设计一个简单的音乐播放程序界面。包括：

1. ⚙️ 顶部的标题栏，放在名为 titleBar 的 QWidget 容器中，由一个横向的 spacer 和一个关闭按钮 btnClose 组成。用于自定义实现窗口的拖拽和关闭。

2. 🎶 核心区域，放在名为 widget 的 QWidget 容器中，由一个选择文件按钮 btnSelectFile、一个自定义 Slider 类（继承官方的 QSlider）进度条 musicSlider、一个文本标签（用于实时显示音乐播放进度）currentTime 和一个播放/暂停按钮 btnPlayMusic 组成。

可以选择音频文件，点击播放按钮进行音乐播放。播放过程中可以继续点击暂停按钮暂停。播放/暂停期间可以点击进度条调整播放位置，也可以拖拽进度条滑块调整播放位置。

当然，这些 Qt Designer 中的设置，最终呈现的 UI 界面还需要添加 icons 图标、QSS 样式来美化。😎

1.1 UI 所需资源文件

创建 Qt 资源文件，主要存放 UI 界面中需要用到的 icons 图标和 .qss 样式文件。

icons 图标文件我都是从 iconfont 阿里巴巴矢量图标库 中找现成的 .svg 格式的图标。UI 界面中需要的图标包括关闭按钮 btnClose 的图标、选择文件按钮 btnSelectFile 的图标以及播放/暂停按钮 btnPlayMusic 切换播放暂停状态的图标。

1.2 QSS 样式美化

在 窗口类的构造函数中添加 QSS 样式设置：

// 设置界面 QSS 样式
QFile styleFile(":/styles/light.qss");
if(styleFile.open(QIODevice::ReadOnly)){
    QString styleSheet = QString::fromUtf8(styleFile.readAll());
    setStyleSheet(styleSheet);
    styleFile.close();
}

1. ✅ 按钮的美化

   QPushButton {
       background-color: #ffffff;
       color: #333333;
       border: 1px solid #dee2e6;
       border-radius: 8px;
       padding: 8px 16px;
       font-size: 14px;
       min-height: 20px;
   }
   QPushButton:hover {
       background-color: #e9ecef;
       border-color: #0d6efd;
   }
   QPushButton:pressed {
       background-color: #0d6efd;
       color: white;
   }

   • 圆角设计：border-radius: 8px 创建柔和的圆角效果
   • 交互反馈：hover 状态显示淡蓝色边框，pressed 状态变为蓝色背景
   • 扁平风格：白色背景 + 浅灰色边框

   图标按钮特殊处理：

   QPushButton#btnSelectFile,
   QPushButton#btnPlayMusic {
       min-width: 32px;
       min-height: 32px;
       padding: 4px;
       border-radius: 20px;
       border: none;
       background-color: transparent;
   }
   QPushButton#btnSelectFile:hover,
   QPushButton#btnPlayMusic:hover {
       border: none;
       background-color: rgba(13, 110, 253, 0.12);   /* 悬停：淡蓝色高亮 */
   }
   QPushButton#btnSelectFile:pressed,
   QPushButton#btnPlayMusic:pressed {
       border: none;
       background-color: rgba(13, 110, 253, 0.2);    /* 按下：略深蓝色高亮 */
       color: inherit;
   }

   • 极简设计：透明背景、无边框
   • 微妙反馈：使用半透明蓝色背景（12% 和 20% 透明度）提供交互反馈
   • 圆形效果：border-radius: 20px 配合固定尺寸，形成圆形按钮

2. 🎈 进度条的美化

   QSlider::groove:horizontal {
       border: none;
       height: 6px;
       background: #e9ecef;
       border-radius: 3px;
   }
   QSlider::sub-page:horizontal {
       background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
           stop:0 #0d6efd, stop:1 #0b5ed7);
       border-radius: 3px;
   }
   QSlider::add-page:horizontal {
       background: #e9ecef;
       border-radius: 3px;
   }
   QSlider::handle:horizontal {
       width: 14px;
       height: 14px;
       margin: -4px 0;
       background: #0d6efd;
       border: none;
       border-radius: 7px;        /* 圆形：半径=宽高的一半 */
   }
   QSlider::handle:horizontal:hover {
       background: #0b5ed7;
   }

   进度条状态采用三段式设计：

   • groove（轨道）：浅灰色背景，6px 高度，圆角 3px
   • sub-page（已播放部分）：使用蓝色渐变效果，从 #0d6efd 到 #0b5ed7
   • add-page（未播放部分）：浅灰色

   圆形滑块设计：

   • 14px × 14px 正方形 + border-radius: 7px（半径 = 宽高的一半）形成完美圆形
   • margin: -4px 0 滑块在视觉上居中于轨道（滑块 14px 高，轨道 6px 高，差值 8px，上下各偏移 -4px）

3. ⭐ 整体界面美化

   // 初始化 UI 设置
   ui->horizontalLayout->setAlignment(Qt::AlignVCenter);
   ui->horizontalLayout->setContentsMargins(4, 0, 4, 0);
   ui->horizontalLayout->setSpacing(6);  // 控件间距
   ui->horizontalLayout->setAlignment(ui->btnSelectFile, Qt::AlignVCenter); // 核心区域分别设置控件垂直居中对齐
   ui->horizontalLayout->setAlignment(ui->musicSlider, Qt::AlignVCenter);
   ui->horizontalLayout->setAlignment(ui->btnPlayMusic, Qt::AlignVCenter);
   ui->horizontalLayout_2->setContentsMargins(4, 2, 4, 2);  // 左上右下边距
   ui->horizontalLayout_2->setSpacing(0);                    // 控件间距
   ui->verticalLayout->setContentsMargins(0, 0, 0, 0);      // 主布局无边距
   ui->verticalLayout->setSpacing(0);                        // titleBar 和 widget 间距为 0
   setWindowFlags(Qt::FramelessWindowHint | windowFlags()); // 无边框窗口
   setAttribute(Qt::WA_TranslucentBackground); // 透明背景
   ui->currentTime->setText("0:00/0:00");
   ui->btnSelectFile->setIcon(QIcon(":/icons/selectFile.svg"));
   ui->btnSelectFile->setIconSize(QSize(24, 24));
   ui->btnSelectFile->setText("");
   ui->btnPlayMusic->setIcon(QIcon(":/icons/pause.svg"));
   ui->btnPlayMusic->setIconSize(QSize(24, 24));
   ui->btnPlayMusic->setText("");
   ui->btnClose->setIcon(QIcon(":/icons/close.svg"));
   ui->btnClose->setIconSize(QSize(12, 12));
   ui->btnClose->setText("");

2 基础按钮功能

2.1 选择音频文件功能的实现

2.2 播放音频文件功能的实现

3 进度条设计

3.1 进度条和音频文件的同步

3.2 点击进度条功能的实现

4 其它功能