《一》MP3整体布局设计以及拖动窗口实现

最新推荐文章于 2024-06-06 14:22:53 发布

加一zZ

最新推荐文章于 2024-06-06 14:22:53 发布

阅读量869

点赞数 22

分类专栏： QT项目之MP3音乐播放器文章标签： qt

本文链接：https://blog.csdn.net/ayf9999/article/details/139011471

版权

QT项目之MP3音乐播放器专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上一期我们做完了Word文档的设计与实现，那么这一期我们实现一个MP3播放器，前面的QT专栏里我们已经设计过一个，这一期呢，是对它的内容上的增加与回顾。

首先一个MP3界面要有个不错的布局，我们来：

创建文件：

下一步名字可以自己随便取，怎么方便怎么来嘛，

这里我们选择 MainWindow类，

在Qt中，Dialog、Widget和Window是三种常用的界面类型，它们之间的Flag（标志）有以下区别：

1. Dialog（对话框）：是一种模态窗口，通常用于显示一些需要用户输入或确认的信息。Dialog的Flag可以设置为Qt::Dialog、Qt::Window或者Qt::Sheet。其中，Qt::Dialog表示对话框是一个独立的窗口，Qt::Window表示对话框是一个顶级窗口，Qt::Sheet表示对话框是一个模态的面板窗口。
2. Widget（窗口部件）：是一种基本的用户界面元素，可以包含其他的Widget或者Layout，用于构建用户界面。Widget的Flag可以设置为Qt::Widget、Qt::Window或者Qt::SubWindow。其中，Qt::Widget表示窗口部件是一个独立的窗口，Qt::Window表示窗口部件是一个顶级窗口，Qt::SubWindow表示窗口部件是一个子窗口。
3. Window（窗口）：是一种顶级窗口，可以包含其他的Widget或者Layout，用于构建完整的应用程序窗口。Window的Flag可以设置为Qt::Window或者Qt::SubWindow。其中，Qt::Window表示窗口是一个独立的顶级窗口，Qt::SubWindow表示窗口是一个子窗口。
Dialog弹出的时候直接出现在父窗口的中央位置。

Widget同上。但Window是作为顶级窗口，所以不会自动出现在屏幕中央，因为它本身就没有父窗口，自然就会出现在屏幕原点的位置。

在下一步，选择自己的编译器就好了。

我们首先要设计他的ui布局。

ui布局

我们大致要实现这样的布局，当然，也可以根据自己的喜好来设计：

这是我自己做出来的，我们来一步步来，首先要把这些拖到ui界面里来。

然后再加上groupBox让他更美观一些：

大多数的pushbutton一定是这样的：

你可以在stylesheet里面进行更改：

QPushButton{
	background-repeat:no-repeat;
	background_position:center center;
	border:none;
	color:white;
}
QPushButton:hover{
	background-repeat:no-repeat;
	background_position:center center;
	border:none;
	color:white;
}
QPushButton:pressed{
	background-repeat:no-repeat;
	background_position:center center;
}

这是我使用的配置，主要是用来设计他的背景颜色以及透明度。不同的控件有不同的设置：

刚才那是按键的设计，lineedit和plaintextedit的是：

font-size:14px;
color:rgb(255,255,255);
background-color: rgba(255, 255,255, 50);

这样透明度就比较可观了。

像加上图标的话，我们可以添加new file，选择qt resource，在里面进行添加，记住图表的位置一定要在这个项目文件当中：

添加自己所修要的图标就好了，可以推荐一个图标网站：

阿里巴巴矢量图标这个，想要啥都可以找。

做完这一系列流程之后，我们大致可以得到这样的界面：

背景图片，我们通过重绘事件进行添加就好。

添加重绘事件以及槽函数：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include<QPainter>
#include "aboutdialog.h"
#include<QRect>
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    //自定义成员变量
public:
    //处理窗口重绘背景
    void  paintEvent(QPaintEvent *event);

    //功能：使用鼠标拖动窗口移动播放器
    void mousePressEvent(QMouseEvent* event);
    void mouseMoveEvent(QMouseEvent* event);
    void mouseReleaseEvent(QMouseEvent *event);
    bool m_MouseDrag;//判断鼠标是否按下
    QPoint mouseStartPoint;//获取鼠标起始位置
    QPoint windowStartPoint;//获取窗口初始位置

private:
    Ui::MainWindow *ui;
};

还有另外的就是在ui文件中，我们要添加按钮的槽函数。

首先在构建函数中，我们可以添加一些系统指令：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    //去掉窗口标题栏
    this->setWindowFlags(Qt::FramelessWindowHint);
}

这个是用来去掉窗口的标题的，当然也可以不加，看自己心情就好。

我们首先来实现这个推出操作，因为我去掉了窗口标题嘛，所以需要用这个来实现退出操作：

//关闭窗口
void MainWindow::on_pushButton_exit_clicked()
{
    this->close();
}

很简单对吧，关闭就行啦。

接下来就是重绘事件了：

void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter qpainter(this);

    //调用drawPixmap()函数进行绘图
    qpainter.drawPixmap(0,0,width(),height(),QPixmap(":/new/Images/musicplayer_ui.jpg"));
}

修改图片背景，这个图片大家可以自己随便找，创建一个QPainter，添加上去就行。

移动窗口：

我们运行时发现窗口是移动不了的，那么我们来实现一下移动窗口。

//获取位置
void MainWindow::mousePressEvent(QMouseEvent *event)
{
    if(event->button()==Qt::LeftButton){
        m_MouseDrag=true;
        mouseStartPoint=event->globalPos();
        windowStartPoint=this->frameGeometry().topLeft();
    }
}

移动窗口之前要确认鼠标位置，

当左键按下时，把m_MouseDrag改为true，确认已经按下了，然后globalPos()来获取鼠标起始位置，最后确定窗口起始位置。

void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    if(m_MouseDrag){
        //获取鼠标初始距离
        QPoint m_Distance=event->globalPos()-mouseStartPoint;
        //更改窗口位置
        this->move(windowStartPoint+m_Distance);
    }
}

这个就是，当鼠标左键按下并拖动时，m_Distance来获取当前位置减去起始位置的距离，

把这段距离加到窗口的起始位置，就得到了窗口的最后距离。

void MainWindow::mouseReleaseEvent(QMouseEvent *event)
{
    //判断鼠标事件
    if(event->button()==Qt::LeftButton){
        m_MouseDrag=false;
    }
}

这个就是判断鼠标松开的函数，不能一直让m_MouseDrag为true，这样点击后，就无法进行别的操作了。

关于操作：

一般关于操作都是显示当前软件的一些信息。

我门虽然可以通过QMessageBox操作，但要写的东西很多的话，还是没那么方便。

我们来添加一个设计师界面类，来进行操作。

选Dialog就可，这几个都行，不挑。

确认之后，会出来头文件，源文件，以及ui文件，像刚才那样，我们在ui文件中添加lable就可以，并在里面写上你想写的内容。

我就随手一写，不要模仿我。

像在mainwindow里面一样，你也可以实现改变背景的操作。

代码也是一样的，我就不写了。

void AboutDialog::paintEvent(QPaintEvent *event)
{
    QPainter qpainter(this);

    //调用drawPixmap()函数进行绘图
    qpainter.drawPixmap(0,0,width(),height(),QPixmap(":/new/Images/musicplayer_ui.jpg"));
}

#include <QMainWindow>
#include<QPainter>
#include "aboutdialog.h"
#include<QRect>

我们在原来的头文件引用他的头文件就好了，

void MainWindow::on_pushButton_about_clicked()
{
    //QMessageBox::information(this,"提示","关于对话框",QMessageBox::Yes);
    AboutDialog *paboutDialogs=new AboutDialog(this);
    //获取窗口位置及大小
    QRect qRect=geometry();
    int iX=qRect.x()+120;
    int iY=qRect.y()+200;

    paboutDialogs->setGeometry(iX,iY,500,300);
    //执行模态对话框
    paboutDialogs->exec();
}

在实现about时，我们要先创建一个AboutDialog对象，使用QRect类，可以用来获取这个窗口的位置，我们可以对x，y进行加减，来达到我们想要的位置，再把它设置进去。