用Qt写一个简单的音乐播放器（七）：界面美化（QSS样式表）

一、前言

在用Qt写一个简单的音乐播放器（一）：使用QMediaPlayer播放音乐中，我们已经知道如何去使用QMediaPlayer播放音乐。
在用Qt写一个简单的音乐播放器（二）：增加界面（开始和暂停音乐)中，我们增加了播放音乐/暂停音乐的按钮。
在用Qt写一个简单的音乐播放器（三）：增加界面（播放跳转与音量控制）中，我们加入了播放控制和音量控制。
在用Qt写一个简单的音乐播放器（四）：歌曲浏览、上一曲、下一曲中，我们增加了歌曲选择的功能。
在用Qt写一个简单的音乐播放器（五）：歌曲播放时间显示中，我们为歌曲播放增加播放时间显示。
在用Qt写一个简单的音乐播放器（六）：显示歌词（正则表达式）中，我们增加了歌词的显示。
那么这一篇我们来谈一谈如何修改界面，让界面变得好看一些：
先上完工后的效果，虽然还是不是特别好看，但是相比之前六篇中的样子，是不是已经有了很大的改观？
1.0版本代码下载地址

二、添加资源文件

为不同的控件添加不同的图片，所以我们首先要把需要的图片添加到工程中：
如下图，所示，选择工程右键添加新文件：

选择Qt Resource File

下一步，下一步直到工程界面出现文件

如图所示，再点击右键添加现有文件或者目录即可得到下图：

三、UI修改QSS（样式表）

1.修改按钮

选择Pre（上一曲）按钮，右键改变样式表

选择添加资源的 下拉 ，点击background-image，

2.修改label文本颜色

与之前一样，选中后右键，点击改变样式表：

点击添加颜色的下拉，然后选择color，选择颜色为白色，出现3后，点击4即可设置label为白色。

3.修改窗口主色调为黑色

选择整个设计界面，右键改变样式表。

与设计label基本相同，唯一不同的是这次选择的background-color。

四、代码中修改QSS（样式表）

1.修改QSlider

参考链接：Qt Style Sheets Examples（官方例子）

void MainWindow::setSliderStyle(){

    ui->hSliderPlayProgress->setStyleSheet(
                "  \
   QSlider::handle:horizontal {\
       background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);\
       border: 1px solid #5c5c5c;\
       width: 18px;\
       margin: -2px 0;\
       border-radius: 3px;\
       }\
        ");
    ui->vSliderVolume->setStyleSheet(
                "  \
   QSlider::handle:vertical  {\
       background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);\
       border: 1px solid #5c5c5c;\
       width: 18px;\
       margin: -2px 0;\
       border-radius: 3px;\
       }\
        ");
}

五、其他修改

1.隐藏标题栏

this->setWindowFlags(Qt::FramelessWindowHint);

隐藏标题栏后，发现两个问题，无法移动窗口了，程序也无法关闭了，那么怎么移动窗口和关闭程序呢？

2.无标题栏如何移动窗口

包涵头文件

#include <QMouseEvent>

mainwindow.h增加声明

    QPoint startPos;//鼠标点击时的全局位置
    QPoint startPos1;//鼠标点击时的相对位置

    void mousePressEvent(QMouseEvent *event);//鼠标点击
    void mouseMoveEvent(QMouseEvent *event);//鼠标追踪

mainwindow.cpp中增加函数实现

//记录拖动起始位置
void MainWindow::mousePressEvent(QMouseEvent *event)
{
    startPos = event->globalPos();//获取点击鼠标时的全局坐标
    startPos1 = event->pos();//获取点击鼠标的相对mainwindow的坐标
}

//窗口移动
void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    if(event->buttons() & Qt::LeftButton)//判断是否是左键按下
    {
        QPoint movePos = event->globalPos() - startPos;//计算鼠标移动位置
        if( movePos.manhattanLength() > 4)//判断移动像素距离，防抖动
            this->move(event->globalPos() - startPos1);
        return;
    }
}

3.关闭窗口和最小化

新建两个按钮，添加我们准备的最小化和关闭的图片，然后右键，转到槽，点击Clicked，生成槽函数。

在对应的槽函数中加入下列代码：

void MainWindow::on_btnClose_clicked()
{
    this->close();
}

void MainWindow::on_btnMin_clicked()
{
    this->setWindowState(Qt::WindowMinimized);
}

六、效果对比

1.修改前：

2.修改后：

七、最后

代码还是有很多地方需要优化，目前只是实现功能，一直没有改里面存在的一些bug，其他功能嘛，敬请期待。