【简单易用】基于Qt的跨平台自定义标题栏控件QJamWindow

一、概述

       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。

        演示版免费下载：

        基于Qt的跨平台自定义标题栏控件JCustomWidget演示程序-C++文档类资源-CSDN下载