上一期我们做完了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();
这个是执行模态对话框,执行的时候会进行阻塞,你无法点击别的操作,只能点击关闭它,才可以继续别的操作。
刚开始大致就是这样,一步一步来。