不規(guī)則窗體

QT中開發(fā)不規(guī)則窗體有兩種方法：（1）第一種方法，使用QWidget::setMask函數(shù)設置繪制區(qū)域，然后在paintEvent()繪制。（2）第二種方法，在窗體四周設置一圈QWidget,設置一些不規(guī)則的圖片，達到不規(guī)則窗體的目的。本次介紹貼圖的這種方法。

貼圖法的不規(guī)則窗體

創(chuàng)建UI模板

在QT中創(chuàng)建一個UI窗體。

在上下左右不同的區(qū)域設置QWidget:（1）上方：左上角，右上角，上方正中是標題欄；（2）下方：左下角，下方正中，右下角。（3）窗體兩側（4）窗體正中是業(yè)務窗體的窗體，業(yè)務窗體下方放置兩按鈕【確定】【取消】

運行效果圖：

創(chuàng)建一個父類

創(chuàng)建一個父類，用于顯示不規(guī)則窗體的四周，以后的窗體就不用重新作，直接繼承就可以了。為了簡捷，就不用cpp,把代碼直接寫到頭文件里。

#ifndef CUSTOM_DIALOG_BASE_H
#define CUSTOM_DIALOG_BASE_H#include <QDialog>
#include <QDesktopWidget> 
#include <QApplication>
#include <QMouseEvent> 
#include <QDebug> 
#include <QKeyEvent> 
#include "ui_custom_dialog_base.h"
class custom_dialog_base : public QDialog
{Q_OBJECTpublic:explicit custom_dialog_base(QWidget *parent = 0){setWindowFlags(windowFlags() | Qt::FramelessWindowHint|Qt::Dialog);//無邊框this->setAttribute(Qt::WA_TranslucentBackground, true);//窗體背景全透明ui.setupUi(this);m_bMouseLeftButtonPressed = false;m_bCtrlKeyPressed = false;connect(ui.pushButton_close, &QPushButton::clicked, this, &QDialog::close);connect(ui.pushButton_ok, &QPushButton::clicked, this, &QDialog::accept);connect(ui.pushButton_cancel, &QPushButton::clicked, this, &QDialog::reject);ui.label_title->installEventFilter(this);}~custom_dialog_base(){};// 居中在父窗體中void centerParent(){QWidget* parentWidget = this->parentWidget();QRect rect = this->geometry();QRect rectParent;if(parentWidget != nullptr){rectParent = parentWidget->geometry();}else{rectParent = QApplication::desktop()->geometry();}QPoint center = rectParent.center();int width = rect.width();int height = rect.height();this->setGeometry(center.x()-width/2, center.y() - height/2, width, height);}// 設置標題void setDialogTitle(const QString& strTitle){ui.label_title->setText(strTitle);}//獲取中間的內(nèi)容面板QWidget* getContainerWidget() { return ui.inner_frame;  }protected:// ctrl鍵按下virtual void  keyPressEvent(QKeyEvent *event){if (event->key() &Qt::Key_Control){m_bCtrlKeyPressed = true;this->setSizeGripEnabled(true);// ctrl鍵按下,顯示窗體縮放抓手。}}// ctrl鍵松開virtual void  keyReleaseEvent(QKeyEvent *event){if (event->key() &Qt::Key_Control){m_bCtrlKeyPressed = false;this->setSizeGripEnabled(false);}}// 窗體移動實現(xiàn)bool eventFilter(QObject *obj, QEvent *event){// ctrl鍵按下時返回if (m_bCtrlKeyPressed){return false;}// 判斷是標題欄if (obj == ui.label_title){//鼠標左鍵按下if (event->type() == QEvent::MouseButtonPress){m_bMouseLeftButtonPressed = true;m_pointMouseLeftButtonPressed = QCursor::pos();return true;}else if (event->type() == QEvent::MouseButtonRelease){//鼠標左鍵松開m_bMouseLeftButtonPressed = false;return true;}else if (event->type() == QEvent::MouseMove && m_bMouseLeftButtonPressed){//鼠標左鍵按下時移動鼠標，開始移動窗體QPoint offset = QCursor::pos() - m_pointMouseLeftButtonPressed;QPoint pos = this->pos();this->move(offset + pos);m_pointMouseLeftButtonPressed = QCursor::pos();return true;}}return false;}private:Ui_custom_dialog_base ui;//鼠標是否按下bool m_bMouseLeftButtonPressed;//cltr鍵是否按下bool m_bCtrlKeyPressed;//按下后當前鼠標位置QPoint m_pointMouseLeftButtonPressed;
};
// 可以pro文件中加入custom_dialog_base.h,不要下句
#include "./moc/moc_custom_dialog_base.cpp"#endif // CUSTOM_DIALOG_BASE_H

創(chuàng)建業(yè)務窗體

業(yè)務窗體直接繼承custom_dialog_base 類。同樣，把cpp省去。把代碼直接寫到頭文件里。

#ifndef USER_DIALOG_H
#define USER_DIALOG_H#include <QDialog>
#include <QDesktopWidget> 
#include <QApplication>
#include <QMouseEvent> 
#include <QDebug> 
#include <QKeyEvent> 
#include "ui_user_dialog.h"
#include "custom_dialog_base.h"class user_dialog : public custom_dialog_base
{Q_OBJECTpublic:explicit user_dialog(QWidget *parent = 0){ui.setupUi(getContainerWidget());// 加載業(yè)務窗體，getContainerWidget()->setLayout(ui.formLayout_2);// 設置業(yè)務窗體的布局器到父類中的容器中。ui.formLayout_2->setSpacing(15);}~user_dialog(){};private:Ui_user_dialog ui;
};// 可以在pro文件中加入user_dialog.h,不要下句
#include "./moc/moc_user_dialog.cpp"
#endif // USER_DIALOG_H

main函數(shù)直接調(diào)用user_dialog

在main里直接創(chuàng)建user_dialog的實例，顯示不規(guī)則窗體。

#include <QApplication>
#include <QDir>
#include <QPushButton>
#include "user_dialog.h"int main(int argc, char *argv[])
{QApplication a(argc, argv);QFile file;QString strFile = QDir(QApplication::applicationDirPath()).canonicalPath() + "/ui.qss";file.setFileName(strFile);file.open(QFile::ReadOnly);file.seek(0);QString strQss= file.readAll();// 從ui.qss文件中讀取樣式a.setStyleSheet(strQss); // 設置樣式user_dialog dlg;dlg.setDialogTitle(QString::fromLocal8Bit("窗體標題"));dlg.centerParent();// 居中父窗體。return dlg.exec();
}

創(chuàng)建QSS文件

把使用自己喜歡的圖片放到資源文件中，供QSS文件使用。

qss文件：

QWidget#widget_topleft{background-color:transparent;border-image:url(:/resources/top_left.png);
}QWidget#widget_topcenter{background-color:transparent;border-image:url(:/resources/top_center.png);
}QWidget#widget_topright{background-color:transparent;border-image:url(:/resources/top_right.png);
}QWidget#widget_bottomleft{background-color:transparent;border-image:url(:/resources/bottom_left.png);
}QWidget#widget_bottom_center{background-color:transparent;border-image:url(:/resources/bottom_center.png);
}QWidget#widget_bottomright{background-color:transparent;border-image:url(:/resources/bottom_right.png);
}QWidget#widget_left{background-color:transparent;border-image:url(:/resources/left_center.png);
}QWidget#widget_center{background-color:transparent;border-image:url(:/resources/center.png);
}QWidget#widget_right{background-color:transparent;border-image:url(:/resources/right_center.png);
}QPushButton#pushButton_close{background-color: transparent;background-image:url(:/resources/pushButton_close.png);
}QLabel{font-size:16px;color:white;
}
QLabel#label_title{background-color: transparent;text-align: center;font-size:18px;color:white;
}QLineEdit, QComboBox,QDateTimeEdit,QSpinBox {font-size:18px;
}QSizeGrip {image: url(:/resources/resize_gripper.png);width: 32px;height: 32px;}QPushButton#pushButton_ok,QPushButton#pushButton_cancel {background-color: transparent;border-image:url(:/resources/pushbutton.png);min-width:96px;min-height:32px;
}QPushButton#pushButton_ok:pressed,QPushButton#pushButton_cancel:pressed {background-color: transparent;border-image:url(:/resources/pushbutton_pressed.png);
}QPushButton#pushButton_ok:hover,QPushButton#pushButton_cancel:hover {background-color: transparent;border-image:url(:/resources/pushbutton_hover.png);
}

qrc文件：

<RCC><qresource prefix="/"><file>./resources/top_left.png</file><file>./resources/top_center.png</file><file>./resources/top_right.png</file><file>./resources/left_center.png</file><file>./resources/center.png</file><file>./resources/right_center.png</file><file>./resources/bottom_left.png</file><file>./resources/bottom_center.png</file><file>./resources/bottom_right.png</file><file>./resources/pushButton_close.png</file><file>./resources/resize_gripper.png</file><file>./resources/pushbutton.png</file><file>./resources/pushbutton_pressed.png</file><file>./resources/pushbutton_hover.png</file></qresource>
</RCC>

完整的QT工程

工程文件下載，不完善之處，老鐵們一塊討論。