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

您所在的位置：网站首页 › 音乐播放器界面素材 › 用Qt写一个简单的音乐播放器（七）：界面美化（QSS样式表）

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

2024-07-12 04:12| 来源: 网络整理| 查看: 265

一、前言

在用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

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，其他功能嘛，敬请期待。

【本文地址】

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

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

今日新闻

推荐新闻