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

上一期我们做完了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进行加减,来达到我们想要的位置,再把它设置进去。

paboutDialogs->exec();

这个是执行模态对话框,执行的时候会进行阻塞,你无法点击别的操作,只能点击关闭它,才可以继续别的操作。

刚开始大致就是这样,一步一步来。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值