Qt漂亮界面
要做一个类似下面的qt界面,顶部是导航栏的样子——包含图标和程序名称,右边是界面切换按钮,然后放大、缩小和关闭按钮也在,还能拖动。这样,就更像一个商用的软件了。
功能规划:
1.去掉菜单栏、工具栏;
2.顶部导航栏包含程序图标、名称、界面切换按钮、放大缩小关闭按钮;
3.顶部导航栏可以拖动;
4.导航栏按钮可以切换界面。
可以参考的相关博客链接
文章目录
- 一、去掉菜单栏和工具栏
- 二、顶部导航栏的设计
- 三、阵列按钮的点击事件写法
- 四、重写缩写界面、放大界面和关闭程序事件
- 五、鼠标事件的处理
- 六、installEventFilter的使用
一、去掉菜单栏和工具栏
在UI设计界面,在menuBar和mainToolBar上右键,选择移除菜单栏和移除工具栏。
把顶部的图标和程序名称、放大缩小关闭按钮都去掉,使用如下语句。
this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowSystemMenuHint | Qt::WindowMinMaxButtonsHint);
二、顶部导航栏的设计
主要是用installEventFilter来实现的。参考第6章节。
这个顶部导航栏是通过注册监听事件,让app监控所有的程序事件。如果属性是可移动的,然后记录鼠标的坐标等,来控制窗口的位置和大小。
appinit.h头文件
#ifndef APPINIT_H
#define APPINIT_H
#include <QObject>
class AppInit : public QObject
{
Q_OBJECT
public:
static AppInit *Instance();
explicit AppInit(QObject *parent = 0);
void start();
protected:
bool eventFilter(QObject *obj, QEvent *evt);
private:
static AppInit *self;
signals:
public slots:
};
#endif // APPINIT_H
appinit.cpp的文件
#include "appinit.h"
#include "qmutex.h"
#include "qapplication.h"
#include "qevent.h"
#include "qwidget.h"
AppInit *AppInit::self = 0;
AppInit *AppInit::Instance()
{
if (!self) {
QMutex mutex;
QMutexLocker locker(&mutex);
if (!self) {
self = new AppInit;
}
}
return self;
}
AppInit::AppInit(QObject *parent) : QObject(parent)
{
}
bool AppInit::eventFilter(QObject *obj, QEvent *evt)
{
QWidget *w = (QWidget *)obj;
//如果窗口w的属性“canMove"是假的,继续监听
if (!w->property("canMove").toBool()) {
return QObject::eventFilter(obj, evt);
}
//如果属性是可移动
static QPoint mousePoint;
static bool mousePressed = false;
//获取鼠标事件
QMouseEvent *event = static_cast<QMouseEvent *>(evt);
if (event->type() == QEvent::MouseButtonPress) {
//如果鼠标被按下,且是左键按下
if (event->button() == Qt::LeftButton) {
mousePressed = true;
//记下当前坐标:全局坐标-窗口坐标
mousePoint = event->globalPos() - w->pos();
return true;
}
//如果鼠标松开
} else if (event->type() == QEvent::MouseButtonRelease) {
mousePressed = false;
return true;
//如果鼠标在移动
} else if (event->type() == QEvent::MouseMove) {
if (mousePressed && (event->buttons() && Qt::LeftButton)) {
//移动当前窗口到某个位置
w->move(event->globalPos() - mousePoint);
return true;
}
}
return QObject::eventFilter(obj, evt);
}
void AppInit::start()
{
qApp->installEventFilter(this);
}
使用方式:
//函数功能:让自定义的顶部导航栏可以拖动
AppInit::Instance()->start();
三、阵列按钮的点击事件写法
当我们有一排按钮需要程序来添加点击事件时,如果一个个connect那么代码就太长了,connect需要写,它们的槽函数又要单独写,而这些按钮响应的事件处理又差不多。那么可以用如下的写法,立马让你成为QT中级程序员的感觉。
使用findChildren函数找到某个widget下所有的按钮,如下面代码所示。
//设置顶部导航按钮
QList<QToolButton *> tbtns = ui->widgetTop->findChildren<QToolButton *>();
foreach (QToolButton *btn, tbtns) {
btn->setIconSize(icoSize);
btn->setMinimumWidth(icoWidth);
btn->setCheckable(true);
connect(btn, SIGNAL(clicked()), this, SLOT(buttonClick()));
}
首先,findChildren函数找到了widgetTop下的所有QToolButton类型按钮。
然后,给每一个按钮设置图标尺寸,宽度和可选择属性,然后连接connect到buttonClick()槽函数。
槽函数代码如下:
void UIDemo01::buttonClick()
{
QToolButton *b = (QToolButton *)sender();
//获取当前点击事件按钮的名称
QString name = b->text();
QList<QToolButton *> tbtns = ui->widgetTop->findChildren<QToolButton *>();
foreach (QToolButton *btn, tbtns) {
if (btn == b) {
//如果是当前点击事件的按钮,将其设为选中状态
btn->setChecked(true);
} else {
//如果不是当前点击事件的按钮,将其设为未选中状态
btn->setChecked(false);
}
}
if (name == "主界面") {
ui->stackedWidget->setCurrentIndex(0);
} else if (name == "系统设置") {
ui->stackedWidget->setCurrentIndex(1);
} else if (name == "警情查询") {
ui->stackedWidget->setCurrentIndex(2);
} else if (name == "调试帮助") {
ui->stackedWidget->setCurrentIndex(3);
} else if (name == "用户退出") {
//退出程序
exit(0);
}
}
这个槽函数,首先使用sender()函数获得了发生点击事件的那个QToolButton类型按钮的句柄。
然后,将其设为选中状态,将其他的按钮设为未选中状态;
最后,根据按钮的名称来选择跳转到的主界面。
四、重写缩写界面、放大界面和关闭程序事件
首先,在.h文件中注册这些函数
private slots:
void on_btnMenu_Min_clicked();
void on_btnMenu_Max_clicked();
void on_btnMenu_Close_clicked();
然后,直接重写这些函数即可。
void UIDemo01::on_btnMenu_Min_clicked()
{
//qt自带函数
showMinimized();
}
void UIDemo01::on_btnMenu_Max_clicked()
{
//静态定义变量,只在第一次使用
static bool max = false;
//静态定义变量获得尺寸
static QRect location = this->geometry();
//记忆放大前的窗口尺寸,方便取消最大化时返回原位置和大小
if (max) {
this->setGeometry(location);
} else {
//保存当前的窗口尺寸
location = this->geometry();
//设置界面可达的最大尺寸
this->setGeometry(qApp->desktop()->availableGeometry());
}
//最大化就不能移动了
this->setProperty("canMove", max);
max = !max;
}
void UIDemo01::on_btnMenu_Close_clicked()
{
//qt自带函数
close();
}
五、鼠标事件的处理
有时我们需要捕获某个控件上的鼠标事件,比如这个界面在导航栏双击可以最大化和取消最大化。
首先,在.h文件中注册bool eventFilter(QObject *watched, QEvent *event);函数
protected:
bool eventFilter(QObject *watched, QEvent *event);
然后,给需要捕获鼠标事件的控件添加鼠标事件注册
ui->widgetTitle->installEventFilter(this);//顶部导航栏注册鼠标事件
最后,在鼠标事件中编写处理程序
bool UIDemo01::eventFilter(QObject *watched, QEvent *event)
{
//如果是鼠标双击事件
if (event->type() == QEvent::MouseButtonDblClick) {
//如果发生的控件是 ui->widgetTitle
if (watched == ui->widgetTitle) {
//调用发生最大化的函数
on_btnMenu_Max_clicked();
return true;
}
}
//我们处理了点击事件,把事件返回到上层,让它们继续处理其他事件
return QWidget::eventFilter(watched, event);
}
六、installEventFilter的使用
installEventFilter的使用参考
简述:
事件过滤器,可以实现一个QObject监视另一个QObject的所有事件,但是两个QObject必须在同一个线程内
使用:
被监视者(ui->widge)安装事件过滤器
ui->widget->installEventFilter(this);
在监视者(this)里重新实现eventFilter()函数,此函数返回false时,表示监视者(this)不过滤此事件,事件将会继续发送到被监视者(ui->widge);返回true时表示监视者过滤此事件,事件将不会发送到被监视者
bool CustomerSwitchet::eventFilter(QObject *obj,QEvent *e)
{
QWidget*wid = qobject_cast<QWidget*>(obj);
if(wid==ui->widget)
{
//根据事件类型,写处理逻辑
qDebug()<<"widget";
}
return false;
}
还没有评论,来说两句吧...