1,简介
现在较多软件使用扁平化的界面风格,设计的很漂亮,感觉也比较简约。
这里给出一种QT实现这种扁平化主窗口的示例,实现一些基本的标题栏拖放、最大最小关闭按钮等处理。
2,效果
3,设计思路
外观:
MainWindow去掉菜单栏、工具条、状态栏等,添加1个widget作为标题栏,它和内容区域使用垂直布局。
标题栏添加QLabel,作为应用程序图标;和一个标题文本,外加3个按钮。水平布局。
拖动:就是鼠标按下、移动、弹起三个消息的处理。
双击标题栏最大化:给标题栏installEventFilter,处理双击消息。
PS:最小、最大(2态)、关闭按钮的图片都是我直接用PS使用铅笔工具1个像素1个像素画出来的,感觉比下载的图标还带感
4,主要代码
MainWindow.h:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QMouseEvent>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
protected:
bool eventFilter(QObject *obj, QEvent *event);
void mousePressEvent(QMouseEvent *event);
void mouseMoveEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
private slots:
void on_btnMin_clicked();
void on_btnMax_clicked();
void on_btnExit_clicked();
private:
Ui::MainWindow *ui;
bool mDrag; //是否在拖动
QPoint mDragPos; //拖动起始点
bool mIsMax; //当前是否最大化
QRect mLocation; //最大化后恢复时的位置
};
#endif // MAINWINDOW_H
MainWindow.cpp:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDesktopWidget>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
setWindowFlags(Qt::FramelessWindowHint);
mLocation = this->geometry();
mIsMax = false;
mDrag = false;
ui->widgetTitle->installEventFilter(this);
ui->btnMin->setIcon(QIcon(":/image/min.png"));
ui->btnMax->setIcon(QIcon(":/image/max1.png"));
ui->btnExit->setIcon(QIcon(":/image/exit.png"));
setStyleSheet("QMainWindow{color:#E8E8E8;background:#43CD80;}");
//另外在设计器内查看widgetTitle样式,内有标题栏各个子控件的样式设置
}
MainWindow::~MainWindow()
{
delete ui;
}
bool MainWindow::eventFilter(QObject *obj, QEvent *e)
{
if (obj == ui->widgetTitle)
{
if(e->type() == QEvent::MouseButtonDblClick)
{
on_btnMax_clicked();
return true;
}
}
return QObject::eventFilter(obj, e);
}
void MainWindow::mousePressEvent(QMouseEvent *e)//鼠标按下事件
{
if (e->button() == Qt::LeftButton)
{
mDrag = true;
mDragPos = e->globalPos() - pos();
e->accept();
}
}
void MainWindow::mouseMoveEvent(QMouseEvent *e)//鼠标移动事件
{
if (mDrag && (e->buttons() && Qt::LeftButton))
{
move(e->globalPos() - mDragPos);
e->accept();
}
}
void MainWindow::mouseReleaseEvent(QMouseEvent *e)//鼠标释放事件
{
mDrag = false;
}
void MainWindow::on_btnMin_clicked()
{
showMinimized();
}
void MainWindow::on_btnMax_clicked()
{
if (mIsMax)
{
setGeometry(mLocation);
ui->btnMax->setIcon(QIcon(":/image/max1.png"));
ui->btnMax->setToolTip(QStringLiteral("最大化"));
}
else
{
mLocation = geometry();
setGeometry(qApp->desktop()->availableGeometry());
ui->btnMax->setIcon(QIcon(":/image/max2.png"));
ui->btnMax->setToolTip(QStringLiteral("还原"));
}
mIsMax = !mIsMax;
}
void MainWindow::on_btnExit_clicked()
{
qApp->exit();
}
5,源码
Qt无边框窗口1 简单示例.rar:
链接:https://pan.baidu.com/s/1kzP3lzH8ECI42iWLX7x-Nw
提取码:hhbs