Qt自定义无边框Widget、Dialog、MessageBox

更新和升级:

2018.12.20 : 版本V2.0
重要更新:

  1. 几乎重构所有API
  2. 重新实现模板基类
  3. 加入跨平台的边框阴影方案

强烈推荐使用V2.0,v1.0仅作为参考学使用

效果图:
Qt自定义无边框Widget、Dialog、MessageBox_第1张图片
Qt自定义无边框Widget、Dialog、MessageBox_第2张图片
Qt自定义无边框Widget、Dialog、MessageBox_第3张图片
Qt自定义无边框Widget、Dialog、MessageBox_第4张图片
GitHub: https://github.com/FlyWM/FramelessWindow-Qt (欢迎大家star!!! o( ̄▽ ̄)ブ)

文章主要参考 一去丶二三里 大大的博客https://blog.csdn.net/liang19890820/article/details/50557240,进行了一些改造和升级。

  如果需要做出更漂亮的窗体界面,那么实现无边框的widget是非常有必要的。本文就实现了无边框的widget、Dialog、MessageBox等一些常用的控件,进行了一些美化,可以拖动、缩放、双击标题栏最大化还原等操作,并且能够实现windwos下的Aero效果,并封装成库,这样用在每个项目都会很方便。
  先看下效果图:
Qt自定义无边框Widget、Dialog、MessageBox_第5张图片

##注意:该库是在 Windows+MingW 的环境下编译的。

####使用方法:
1、FramelessWindow:

#include "framelesswindow.h"
#include 
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    FramelessWindow *pWindow = new FramelessWindow();
    QWidget *pCentralWidget = new QWidget(pWindow);
    pWindow->setCentralWidget(pCentralWidget);
    pWindow->show();

    return a.exec();
}

2、FramlessDialog

...
FramelessDialog *pDialog = new FramelessDialog(pWindow);
QWidget *pDlgCentralWidget = new QWidget(pDialog);
QPushButton *pButton = new QPushButton(pDlgCentralWidget);
pDialog->setCentralWidget(pDlgCentralWidget);
pDialog->setModal(true);
pDialog->show();
...

3、FrameMessageBox

FramelessMessageBox::showInformation(pWindow, QObject::tr("提示!"), QObject::tr("自定义提示框!"));

其中的各个配色可以在qss文件中修改。

/**
 * 自定义无边框窗体、对话框和提示框并封装成库/测试程序
 *
 * style.qss
 * qss全局文件,设置界面的配色主题等。
 *
 * FlyWM_
 * GitHub: https://github.com/FlyWM
 * CSDN: https://blog.csdn.net/a844651990
 *
 */


/********** 无边框主窗体 **********/
FramelessWindow#framelessWindow {
    background-color: #323232;
}
/********************************/


/*********** 标题栏 **************/
QPushButton#minimizeButton {
    border: none;
    image: url(:/images/minimizeBtnWhite_16.png);
}
QPushButton#minimizeButton:hover {
    background: #505050;
}

QPushButton#maximizeButton {
    border: none;
    image: url(:/images/restoreWhite_16.png);
}
QPushButton#maximizeButton:hover {
    background: #505050;
}
QPushButton#maximizeButton[maximizeProperty=restore] {
    image: url(:/images/restoreWhite_16.png);
}
QPushButton#maximizeButton[maximizeProperty=maximize] {
    image: url(:/images/maximizeBtnWhite_16.png);
}

QPushButton#closeButton {
    border: none;
    image: url(:/images/closeBtnWhite_16.png);
}
QPushButton#closeButton:hover {
    background: #505050;
}

QPushButton#minimizeButton:pressed {
    background: #C8C8C8;
    image: url(:/images/minimizeBtnBlack_16.png);
}
QPushButton#maximizeButton:pressed {
    background: #C8C8C8;
    image: url(:/images/restoreBlack_16.png);
}
QPushButton#closeButton:pressed {
    background: #C8C8C8;
    image: url(:/images/closeBtnBlack_16.png);
}
QLabel#titleLabel {
    color: white;
}
/********************************/

/******* 自定义无边框提示框 *******/
FramelessMessageBox#framelessMessagBox {
    background-color: #404040;
}
QLabel#messageTextLabel {
    color: white;
    font-family: "Microsoft Yahei";
    font-size: 14pt;
}
QPushButton#yesButton {
    background-color: red;
}
/********************************/

/******* 自定义无边框对话框 *******/
FramelessDialog#framelessDialog {
    background-color: #2E2E2E;
}
/********************************/


代码下载:

提示: 尽量拉取GitHub上的代码,保证是最新的。
github: https://github.com/FlyWM
csdn: https://download.csdn.net/download/a844651990/10589445

你可能感兴趣的:(qt,Qt的研究与学习)