一、概述
QJamWindow是一个基于Qt的跨平台自定义标题栏控件,你可以通过它方便得设计出属于自己的标题栏。
特性:
1.标题栏高度可调,标题栏背景色设定
2.图标及其尺寸,图标背景色设定
3. Control box宽度,鼠标经过,按下颜色设置
4. Control box最大化最小化按钮使能,图片替换
5. 双击切换最大化和Normal。
6. Sizeable设置
7. 支持发光/非发光外边框,投影颜色可设
8. 窗体背景色,外边框色,内边框色,留白宽度(padding)
9. 标题栏添加任意控件
10. 兼容QWidget,QDialog,QMainWindow
11. 跨平台
: 260271262 :852374570 :西安
工程提供得例程 Tester是对QJamWindow的应用示例,其最终展示效果如下。
图1. QJamWindow效果图1-浅色发光/内边线
图2. QJamWindow效果图 2-深色发光/内边线
图3. QJamWindow效果图 3-不发光/内外边线
图4. Ubuntu下的应用实例
二、使用指南
1. QJamWindow
用于替代QMainWindow,实现带有菜单工具栏和状态栏的QMainWindow定制化。
1.1 新建Application(Qt)/Qt Widgets Application。
1.2 Base class选择QMainWindow。
1.3 包含QJamWindow.h,并将MainWindow继承关系改为QJamWindow
1.4 在MainWindow.cpp中合适的位置(一般是在显示前)调用InitializeUI函数,如果要对本窗口进行其他个性化设置,需要在此函数之前进行设定,否则将默认与其他窗口风格保持一致。
1.5 布置界面时,确保最底层是已经栅格化或者水平,垂直布局的容器,否则绘制的标题栏可能会覆盖控件。
1.6 避免重写resizeEvent事件。
MainWindow.h:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include "../QJamWindow/QJamWindow.h"
namespace Ui {
class MainWindow;
}
class MainWindow : public QJamWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = nullptr);
~MainWindow();
};
#endif // MAINWINDOW_H
MainWindow.cpp:
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QJamWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
//如果需要对本窗口做个性化设置,在InitializeUI之前进行设置,否则将默认与其他窗口风格一致。
//_innerBorderColor = QColor(160, 160, 160);//扁平型硬边沿-颜色
//_outerBorderColor = QColor(160, 160, 160);//扁平型硬边沿-颜色
InitializeUI(true, true);
}
2. QJamWidget
用于替代QWidget,实现一般弹出式面板UI定制化。
2.1 添加ui/h
2.2 Base class选择QWiget。
2.3 包含QJamWindow.h,并将继承关系改为QJamWidget
2.4 在cpp中合适的位置(一般是在显示前)调用InitializeUI函数,如果要对本窗口进行其他个性化设置,需要在此函数之前进行设定,否则将默认与其他窗口风格保持一致。
2.5 布置界面时,确保最底层是已经栅格化或者水平,垂直布局的容器,否则绘制的标题栏可能会覆盖控件。
2.6 避免重写resizeEvent事件。
3. QJamDialog
用于替代QDialog,实现对话框式面板UI定制化。
3.1 添加ui/h
3.2 Base class选择QDialog。
3.3 包含QJamWindow.h,并将继承关系改为QJamDialog
3.4 在cpp中合适的位置(一般是在显示前)调用InitializeUI函数,如果要对本窗口进行其他个性化设置,需要在此函数之前进行设定,否则将默认与其他窗口风格保持一致。
3.5 布置界面时,确保最底层是已经栅格化或者水平,垂直布局的容器,否则绘制的标题栏可能会覆盖控件。
3.6 避免重写resizeEvent事件。
4. 定制属于自己的风格
4.1 titlebar
在QJamWindow的titlebar.cpp源码中简单修改,就可以方便得为Titlebar定制更多内容,比如背景颜色,icon,controlbox按钮尺寸,controlbox按钮图标,controlbox按钮hover颜色,controlbox安修按下去的颜色等,你也可以为titlebar增加任意多个控件。
4.2 InitializeUI
在QJamWindow.cpp的InitializeUI函数中,有各种属性的设置项,这样做的目的是保证其他默认继承于此的面板,保持同一种风格。使用发光边缘时下方代码里使用 #if 1,否则使用 #if 0。
void QJamWidget::InitializeUI(bool _sizeable, bool _extbtn, bool _minable, bool _maxable, bool _closeable, bool _moveable)
{
#if 1
//BS_SHADOW模式
_borderStyle = BS_SHADOW;//当_borderType为BS_SHADOW时,_shadowBorderColor,_backColor起作用;_outerBorderColor无效
//当_borderType为BS_SOLID时,_outerBorderColor起作用;_shadowBorderColor,_backColor无效
_backColor = QColor(230,231,232);//_borderType为BS_SHADOW时未被绘制区域的背景色
_shadowBorderColor = QColor(150, 151, 152);//渐变阴影型边沿-颜色
#else
//BS_SOLID模式
_borderStyle = BS_SOLID;//当_borderType为BS_SHADOW时,_shadowBorderColor,_backColor起作用;_outerBorderColor无效
//当_borderType为BS_SOLID时,_outerBorderColor起作用;_shadowBorderColor,_backColor无效
_outerBorderColor = QColor(250, 110, 30);//扁平型硬边沿-颜色
#endif
_titleBarHeight = 30;//标题栏高度
_titleBarBackColor = QColor(64,65,66);//背景颜色
_titleBarTitleColor = QColor(230,231,232);//标题文本颜色
_titleBarTitleBackColor = _titleBarBackColor;
_titleCtrlBoxWidth = 24;//按钮的宽度
_titleIconWidth = 20;//图标的宽度
_padding = 1;//边沿至内容之间的距离,不能为0,否则无法正常绘制内外边线
//当BorderStyle为BS_SHADOW时,_margin区域被_backColor颜色填充,_padding越大,内边缘线与阴影之间的距离越大。
//当BorderStyle为BS_SOLID时,代表内边框与外边框之间的间隔。当_padding=1时,只能绘制内边框,_padding >= 2时,才能绘制外边框。
_isShowRoundedRect = false;//是否阴影为圆角矩形
_isShowInnerBorder = true;
_innerBorderColor = QColor(245, 100, 20);//内边沿-颜色
SHADOW_WIDTH = 10;//光晕的宽度
BORDER_DRAG_WIDTH = 2;//用于设置触发边缘检测的像素范围
this->setWindowFlags(Qt::FramelessWindowHint);
if(_borderStyle==BS_SHADOW)
this->setAttribute(Qt::WA_TranslucentBackground, true);
_titleBar = new TitleBar(_minable, _maxable, _closeable, _extbtn, _titleBarHeight, _titleCtrlBoxWidth, _titleIconWidth, _padding, this);
_titleBar->setBackColor(_titleBarBackColor);
_titleBar->setWindowTitle(this->windowTitle());
_titleBar->setWindowTitleColor(_titleBarTitleColor);
_titleBar->setWindowIconBackColor(_innerBorderColor);
_titleBar->setWindowIcon(this->windowIcon().pixmap(128, 128));
this->setWindowIcon(this->windowIcon().pixmap(128, 128));
_framesHelper = new FramelessHelper(_padding, _borderStyle==BS_SHADOW?true:false, SHADOW_WIDTH, this);
_framesHelper->setTitleHeight(_titleBarHeight); //设置窗体的标题栏高度
_framesHelper->setBorderWidth(BORDER_DRAG_WIDTH);//鼠标在边缘时,有2个像素的范围内检测边缘。
_framesHelper->setWidgetMovable(_moveable); //设置窗体可移动
_framesHelper->setWidgetResizable(_sizeable); //设置窗体可缩放
_framesHelper->setRubberBandOnMove(false); //设置橡皮筋效果-可移动
_framesHelper->setRubberBandOnResize(false); //设置橡皮筋效果-可缩放
_framesHelper->activateOn(this); //激活当前窗体
if(_borderStyle == BS_SHADOW)
this->resize(this->width() + 2*(SHADOW_WIDTH+_padding), this->height() + _titleBarHeight + 2*(SHADOW_WIDTH+_padding));
else
this->resize(this->width() + 2*_padding, this->height() + _titleBarHeight + 2*_padding);
}
总结:从以上步骤来看,整个过程是通过Main启动一个MainWidget对象,而该MainWidget对象又包装了一个QMainWindow对象,从而展示出一个标题栏被重新绘制的MainWindow。
演示版免费下载: