【简单易用】基于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下载

猜你喜欢

转载自blog.csdn.net/jam12315/article/details/123422760