2. 程式人生 > >Qt實現自定義窗體

Qt實現自定義窗體

阿新 • • 發佈：2018-11-10

Qt中已經為我們封裝了很好用的視窗風格，但在實際開發過程當中，要麼需求要麼UI拋過來的介面要求總是平添許多工作量。今天得空便來記錄下我在專案中實現的一個需求：扁平化介面風格。雖然可能還會在未來的使用過程中暴露出一些問題，但目前還是可以滿足基本使用需求的。

進入正題，首先我們必須建立一個基於QDialog的帶介面的類，然後對Qt生成的窗體進行改造，再在程式碼中應用訊號槽機制實現類似於原生窗體的事件互動。下面是實現程式碼：


YMDialog.h

#ifndef YMDIALOG_H
#define YMDIALOG_H

#include <QtWidgets/QDialog>
#include <QMouseEvent>
#include <QPoint>

#include "ui_YMDialog.h"

#define PADDING 2
enum Direction { UP=0, DOWN=1, LEFT, RIGHT, LEFTTOP, LEFTBOTTOM, RIGHTBOTTOM, RIGHTTOP, NONE };

//無邊框視窗
class YMDialog : public QDialog
{
 Q_OBJECT

public:
 YMDialog(QWidget *parent = 0);
 ~YMDialog();

 void mousePressEvent(QMouseEvent * e);
 void mouseReleaseEvent(QMouseEvent * e);
 void mouseMoveEvent(QMouseEvent * e);

 void region(const QPoint &cursorGlobalPoint);
public slots:
 void minButtonSlot();
 void maxButtonSlot();
 void closeButtonSlot();

private:
 Ui::YMDialogClass ui;

 QPoint move_point; //移動的距離
 bool mouse_press; //滑鼠按下

 bool isNormal;
 QSize nomalSize;
 QSize maxSize;
 QPoint nomalPoint;
 QPoint maxPoint;

 bool isLeftPressDown;  // 判斷左鍵是否按下
 QPoint dragPosition;   // 視窗移動拖動時需要記住的點
 Direction dir;        // 視窗大小改變時，記錄改變方向
};

#endif // YMDIALOG_H


YMDialog.cpp


#include "YMDialog.h"

#include <QToolButton>
#include <QLabel>
#include <QAction>
#include <QDesktopWidget>

YMDialog::YMDialog(QWidget *parent)
 : QDialog(parent)
{
 ui.setupUi(this);

 nomalSize.setWidth(600);
 nomalSize.setHeight(400);
 isNormal = true;

 QDesktopWidget* detk = QApplication::desktop();
 nomalPoint.setX((detk->width() - this->width())/2);
 nomalPoint.setY((detk->height() - this->height())/2);

 maxSize.setWidth(detk->width());
 maxSize.setHeight(detk->height());

 maxPoint.setX(detk->availableGeometry().x());
 maxPoint.setY(detk->availableGeometry().y());

 dir = NONE;

 setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint);
 setMouseTracking(true);
 ui.widget->setMouseTracking(true);

 //自定義背景1
 //QLabel * background = new QLabel(this);
 //background->setStyleSheet("background-color:rgb(120, 120, 255)");
 //background->setGeometry(0,0,this->width(),this->height());

 //background->setMouseTracking(true);

 //background->setPixmap(QPixmap(":/YMDialog/Resources/background.png"));
 //background->setGeometry(0,0,this->width(),this->height());
 //設定圖片充滿整個label
 //background->setScaledContents(true);


 //獲取最大化、最小化、關閉按鈕圖示
 QPixmap minPix = style()->standardPixmap(QStyle::SP_TitleBarMinButton);
 QPixmap maxPix = style()->standardPixmap(QStyle::SP_TitleBarMaxButton);
 QPixmap closePix = style()->standardPixmap(QStyle::SP_TitleBarCloseButton);

 //為按鈕設定圖示
 ui.minbtn->setIcon(minPix);
 ui.maxbtn->setIcon(maxPix);
 ui.closebtn->setIcon(closePix);

 int width = this->width(); //獲取介面的寬度

 //設定按鈕在視窗上的位置
 ui.minbtn->setGeometry(width-67,5,20,20);
 ui.maxbtn->setGeometry(width-46,5,20,20);
 ui.closebtn->setGeometry(width-25,5,20,20);

 //設定按鈕的提示資訊
 ui.minbtn->setToolTip(QStringLiteral("最小化"));
 ui.maxbtn->setToolTip(QStringLiteral("最大化"));
 ui.closebtn->setToolTip(QStringLiteral("關閉"));

 //設定按鈕樣式
 //ui.minbtn->setStyleSheet("background-color:transparent");
 //ui.maxbtn->setStyleSheet("background-color:transparent");
 //ui.closebtn->setStyleSheet("background-color:transparent");

 ui.minbtn->setStyleSheet("QToolButton{background-color:transparent;}"
  "QToolButton:hover{border: 0px;background-color: rgb(141, 141, 141);}"
  "QToolButton:pressed{background-color: rgb(86, 86, 86);}");
 ui.maxbtn->setStyleSheet("QToolButton{background-color:transparent;}"
  "QToolButton:hover{border: 0px;background-color: rgb(141, 141, 141);}"
  "QToolButton:pressed{background-color: rgb(86, 86, 86);}");
 ui.closebtn->setStyleSheet("QToolButton{background-color:transparent;}"
  "QToolButton:hover{border: 0px;background-color: rgb(141, 141, 141);}"
  "QToolButton:pressed{background-color: rgb(86, 86, 86);}");

 //this->setStyleSheet("background-color: rgb(95, 143, 143);");

 connect(ui.minbtn,SIGNAL(clicked()),this, SLOT(minButtonSlot()));
 connect(ui.maxbtn,SIGNAL(clicked()),this, SLOT(maxButtonSlot()));
 connect(ui.closebtn,SIGNAL(clicked()),this, SLOT(closeButtonSlot()));


 mouse_press = false;

 //QFile file(":/YMDialog/qss/coffee.qss");
 //file.open(QFile::ReadOnly);
 //QString styleSheet = QString::fromLatin1(file.readAll());
 //qApp->setStyleSheet(styleSheet);
}

YMDialog::~YMDialog()
{

}

void YMDialog::mousePressEvent( QMouseEvent * e )
{
 if (e->button() == Qt::LeftButton)
 {
  mouse_press = true;
  move_point = e->pos();

  if(dir != NONE)
  {
   this->mouseGrabber();
  } else
  {
   dragPosition = e->globalPos() - this->frameGeometry().topLeft();
  }
 }
}

void YMDialog::mouseReleaseEvent( QMouseEvent * e )
{
 mouse_press = false;
 if(dir != NONE)
 {
  this->releaseMouse();
  this->setCursor(QCursor(Qt::ArrowCursor));
 }
}

void YMDialog::mouseMoveEvent( QMouseEvent * e )
{
 QPoint gloPoint = e->globalPos();
 QRect rect = this->rect();
 QPoint tl = mapToGlobal(rect.topLeft());
 QPoint rb = mapToGlobal(rect.bottomRight());

 if(!mouse_press)
 {
  this->region(gloPoint);
 } else
 {
  if(dir != NONE)
  {
   QRect rMove(tl, rb);

   switch(dir)
   {
   case LEFT:
    if(rb.x() - gloPoint.x() <= this->minimumWidth())
     rMove.setX(tl.x());
    else
     rMove.setX(gloPoint.x());
    break;
   case RIGHT:
    rMove.setWidth(gloPoint.x() - tl.x());
    break;
   case UP:
    if(rb.y() - gloPoint.y() <= this->minimumHeight())
     rMove.setY(tl.y());
    else
     rMove.setY(gloPoint.y());
    break;
   case DOWN:
    rMove.setHeight(gloPoint.y() - tl.y());
    break;
   case LEFTTOP:
    if(rb.x() - gloPoint.x() <= this->minimumWidth())
     rMove.setX(tl.x());
    else
     rMove.setX(gloPoint.x());
    if(rb.y() - gloPoint.y() <= this->minimumHeight())
     rMove.setY(tl.y());
    else
     rMove.setY(gloPoint.y());
    break;
   case RIGHTTOP:
    rMove.setWidth(gloPoint.x() - tl.x());
    rMove.setY(gloPoint.y());
    break;
   case LEFTBOTTOM:
    rMove.setX(gloPoint.x());
    rMove.setHeight(gloPoint.y() - tl.y());
    break;
   case RIGHTBOTTOM:
    rMove.setWidth(gloPoint.x() - tl.x());
    rMove.setHeight(gloPoint.y() - tl.y());
    break;
   default:
    break;
   }
   this->setGeometry(rMove);
  } else
  {
   QPoint move_pos = e->globalPos();
   this->move(move_pos - move_point);
  }
 }
 QDialog::mouseMoveEvent(e);
}

void YMDialog::minButtonSlot()
{
 this->showMinimized();
}

void YMDialog::maxButtonSlot()
{
 if(isNormal)
 {
  //this->showMaximized();
  this->setGeometry(maxPoint.x(),maxPoint.y(),maxSize.width(),maxSize.height());
  isNormal = false;
 }
 else
 {
  this->setGeometry(nomalPoint.x(),nomalPoint.y(),nomalSize.width(),nomalSize.height());
  isNormal = true;
 }
}

void YMDialog::closeButtonSlot()
{
 this->close();
}

void YMDialog::region(const QPoint &cursorGlobalPoint)
{
 // 獲取窗體在螢幕上的位置區域，tl為topleft點，rb為rightbottom點
 QRect rect = this->rect();
 QPoint tl = mapToGlobal(rect.topLeft());
 QPoint rb = mapToGlobal(rect.bottomRight());

 int x = cursorGlobalPoint.x();
 int y = cursorGlobalPoint.y();

 if(tl.x() + PADDING >= x && tl.x() <= x && tl.y() + PADDING >= y && tl.y() <= y)
 {
  // 左上角
  dir = LEFTTOP;
  this->setCursor(QCursor(Qt::SizeFDiagCursor));  // 設定滑鼠形狀
 } else if(x >= rb.x() - PADDING && x <= rb.x() && y >= rb.y() - PADDING && y <= rb.y())
 {
  // 右下角
  dir = RIGHTBOTTOM;
  this->setCursor(QCursor(Qt::SizeFDiagCursor));
 } else if(x <= tl.x() + PADDING && x >= tl.x() && y >= rb.y() - PADDING && y <= rb.y())
 {
  //左下角
  dir = LEFTBOTTOM;
  this->setCursor(QCursor(Qt::SizeBDiagCursor));
 } else if(x <= rb.x() && x >= rb.x() - PADDING && y >= tl.y() && y <= tl.y() + PADDING)
 {
  // 右上角
  dir = RIGHTTOP;
  this->setCursor(QCursor(Qt::SizeBDiagCursor));
 } else if(x <= tl.x() + PADDING && x >= tl.x())
 {
  // 左邊
  dir = LEFT;
  this->setCursor(QCursor(Qt::SizeHorCursor));
 } else if( x <= rb.x() && x >= rb.x() - PADDING)
 {
  // 右邊
  dir = RIGHT;
  this->setCursor(QCursor(Qt::SizeHorCursor));
 }else if(y >= tl.y() && y <= tl.y() + PADDING)
 {
  // 上邊
  dir = UP;
  this->setCursor(QCursor(Qt::SizeVerCursor));
 } else if(y <= rb.y() && y >= rb.y() - PADDING)
 {
  // 下邊
  dir = DOWN;
  this->setCursor(QCursor(Qt::SizeVerCursor));
 }else
 {
  // 預設
  dir = NONE;
  this->setCursor(QCursor(Qt::ArrowCursor));
 }
}


介面ui檔案

/********************************************************************************
** Form generated from reading UI file 'YMDialog.ui'
**
** Created by: Qt User Interface Compiler version 5.5.1
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_YMDIALOG_H
#define UI_YMDIALOG_H

#include <QtCore/QVariant>
#include <QtWidgets/QAction>
#include <QtWidgets/QApplication>
#include <QtWidgets/QButtonGroup>
#include <QtWidgets/QDialog>
#include <QtWidgets/QHBoxLayout>
#include <QtWidgets/QHeaderView>
#include <QtWidgets/QSpacerItem>
#include <QtWidgets/QToolButton>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE

class Ui_YMDialogClass
{
public:
    QVBoxLayout *verticalLayout;
    QWidget *widget_2;
    QHBoxLayout *horizontalLayout_2;
    QSpacerItem *horizontalSpacer;
    QToolButton *minbtn;
    QToolButton *maxbtn;
    QToolButton *closebtn;
    QWidget *widget;

    void setupUi(QDialog *YMDialogClass)
    {
        if (YMDialogClass->objectName().isEmpty())
            YMDialogClass->setObjectName(QStringLiteral("YMDialogClass"));
        YMDialogClass->resize(390, 600);
        YMDialogClass->setStyleSheet(QStringLiteral(""));
        verticalLayout = new QVBoxLayout(YMDialogClass);
        verticalLayout->setSpacing(0);
        verticalLayout->setContentsMargins(11, 11, 11, 11);
        verticalLayout->setObjectName(QStringLiteral("verticalLayout"));
        verticalLayout->setContentsMargins(0, 0, 0, 0);
        widget_2 = new QWidget(YMDialogClass);
        widget_2->setObjectName(QStringLiteral("widget_2"));
        widget_2->setMaximumSize(QSize(16777215, 25));
        widget_2->setStyleSheet(QStringLiteral("background-color: rgb(255, 255, 255);"));
        horizontalLayout_2 = new QHBoxLayout(widget_2);
        horizontalLayout_2->setSpacing(0);
        horizontalLayout_2->setContentsMargins(11, 11, 11, 11);
        horizontalLayout_2->setObjectName(QStringLiteral("horizontalLayout_2"));
        horizontalLayout_2->setContentsMargins(0, 0, 0, 0);
        horizontalSpacer = new QSpacerItem(40, 20, QSizePolicy::Expanding, QSizePolicy::Minimum);

        horizontalLayout_2->addItem(horizontalSpacer);

        minbtn = new QToolButton(widget_2);
        minbtn->setObjectName(QStringLiteral("minbtn"));

        horizontalLayout_2->addWidget(minbtn);

        maxbtn = new QToolButton(widget_2);
        maxbtn->setObjectName(QStringLiteral("maxbtn"));

        horizontalLayout_2->addWidget(maxbtn);

        closebtn = new QToolButton(widget_2);
        closebtn->setObjectName(QStringLiteral("closebtn"));

        horizontalLayout_2->addWidget(closebtn);


        verticalLayout->addWidget(widget_2);

        widget = new QWidget(YMDialogClass);
        widget->setObjectName(QStringLiteral("widget"));
        QSizePolicy sizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
        sizePolicy.setHorizontalStretch(0);
        sizePolicy.setVerticalStretch(0);
        sizePolicy.setHeightForWidth(widget->sizePolicy().hasHeightForWidth());
        widget->setSizePolicy(sizePolicy);
        widget->setStyleSheet(QStringLiteral("background-color: rgb(255, 255, 255);"));

        verticalLayout->addWidget(widget);


        retranslateUi(YMDialogClass);

        QMetaObject::connectSlotsByName(YMDialogClass);
    } // setupUi

    void retranslateUi(QDialog *YMDialogClass)
    {
        YMDialogClass->setWindowTitle(QApplication::translate("YMDialogClass", "YMDialog", 0));
        minbtn->setText(QString());
        maxbtn->setText(QString());
        closebtn->setText(QString());
    } // retranslateUi

};

namespace Ui {
    class YMDialogClass: public Ui_YMDialogClass {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_YMDIALOG_H


注意：承載實際功能區最底層的widget需要設定setMouseTracking(true)，否則將跟蹤不到滑鼠的拖動事件。



相關推薦

Qt實現自定義窗體

Qt中已經為我們封裝了很好用的視窗風格，但在實際開發過程當中，要麼需求要麼UI拋過來的介面要求總是平添許多工作量。今天得空便來記錄下我在專案中實現的一個需求：扁平化介面風格。雖然可能還會在未來的使用過程中暴露出一些問題，但目前還是可以滿足基本使用需求的。 進入正題，首先我們必須建立一個基於QDi

Qt實現自定義按鈕的三態效果

好久之前做的一個小軟體，好長時間沒動過了，在不記錄下有些細節可能都忘了，這裡整理下部分功能的實現。 按鈕的三態，指的是普通態、滑鼠的停留態、點選態，三態是介面互動非常基本的一項功能，Qt中如果使用的是原始的按鈕，三態的效果是有的，滑鼠放上去會變色，點選的時候有凹陷的效果，工具欄中的圖示也具備三態效果，但是如

WPF 自定義窗體實現拖動邊框改變窗體大小（2種方法）

方式一：呼叫user32.dllAPI 這種方式在網上有很多，這裡只是按步驟重新建立一次。讀者只需要跟著做就行。 第一步：建立一個WPF專案：WpfResizeWithoutBorder，右鍵專案檔案---->新增----->資源字典，並命名為：WindowsResizeBord

Qt重新實現QMouseEvent實現自定義視窗可拖動

(1)pro檔案中加入 QT += gui (2)h檔案的類中加入標頭檔案： #include <QMouseEvent> 類中加入函式和變數宣告： protected: void mouseMoveEvent(QMouseEvent* event);

Qt 之自定義介面（實現無邊框、可移動）

簡述 UI設計是指對軟體的人機互動、操作邏輯、介面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性、有品位，還要讓軟體的操作變得舒適簡單、自由，充分體現軟體的定位和特點。 愛美之心人皆有之。其實軟體介面就像工業造型一樣，是產品的重要賣點。一個產品擁有美觀的

【Qt】Qt之自定義介面（實現無邊框、可移動）【轉】

簡述 UI設計是指對軟體的人機互動、操作邏輯、介面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性、有品位，還要讓軟體的操作變得舒適簡單、自由，充分體現軟體的定位和特點。 愛美之心人皆有之。其實軟體介面就像工業造型一樣，是產品的重要賣點。一個產品擁有美觀的介面會給人帶來舒適的視覺享受，拉近人與產品的

【Qt】Qt之自定義介面（窗體縮放-跨平臺終極版）【轉】

簡述 通過上一節內容，我們實現了窗體的縮放，功能很不錯，但是很遺憾-不支援跨平臺！如果對於多平臺來說，這是一個硬傷，所以，我們急需要一個能夠支援跨平臺的實現方案。 在網上看到過很多不同的實現方式，多多少少會存在一些問題-要麼融合度太高、要麼不能很好地進行移動、縮放。基於前人的分享與總結，最後，我花了很

【Qt】Qt之自定義介面（窗體縮放）【轉】

簡述 通過前兩節內容，我們實現了自定義窗體的移動，以及自定義標題欄-用來顯示窗體的圖示、標題，以及控制窗體最小化、最大化、關閉。 在這之後，我們還缺少窗體的縮放-當滑鼠移動到窗體的邊框-左、上、右、下、左上角、左下角、右上角、右下角時候，滑鼠變為相應的樣式，並且窗體可以隨著滑鼠拖動而進行放大、縮小。

如何實現自定義同步組件

nds 允許 oid try unlock all 同步 while name package com.chen;import java.util.concurrent.TimeUnit;import java.util.concurrent.locks.AbstractQ

Qt之自定義搜索框——QLineEdit裏增加一個Layout，還不影響正常輸入文字（好像是一種比較通吃的方法）

too 步驟 set box 文本 csdn sub void 鼠標 簡述 關於搜索框，大家都經常接觸。例如：瀏覽器搜索、Windows資源管理器搜索等。 當然，這些對於Qt實現來說毫無壓力，只要思路清晰，分分鐘搞定。 方案一：調用QLineEdit現

JS簡單實現自定義右鍵菜單

ans idt 右鍵 動畫 忘記 span spa round 部分 RT，一個簡單的例子，僅僅講述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolu

Notification的基本用法以及使用RemoteView實現自定義布局

解決 edi ngs 取消 ets lsp 過程 net tde Notification的作用 Notification是一種全局效果的通知，在系統的通知欄中顯示。既然作為通知，其基本作用有： 顯示接收到短消息、即時信息等 顯示客戶端的推送（廣告、優惠、新聞等）

匿名類型與Select方法實現自定義對象插入局部表結構中

aso 直接 菜單 ember new order ber 構建 als 在提取局部表結構數據時，通過Select選取需要的字段，如下句，此時其實產生了一個不用於_menuMan的原新數據類型new { c.SYS_COMMANDS_ID,c.TXT_COMMANDTITL

java中實現Comparable接口實現自定義排序

static -1 return rabl generated args logs ava sca 1 class Student implements Comparable{ 2 String name; 3 int gpa; 4 @Ov

freemarker實現自定義指令和自定義函數

數據 dir variables macro 內置 引擎 eem fig turn 自定義指令： 1.指令在前臺實現 　　<#macro name param1,param2,param3...paramN> 　　</#macro> 2.指令在後臺實

實現自定義查詢的數據庫設計及實現（一）

bre 名稱 審批流程 work 數據庫名 需要 自定義查詢 perm 枚舉 需求 先說一下需求：實現用戶自定義的查詢，用戶可以自定義要查詢的列、自定義條件條件、自定義排序。除了查詢使用外，還可以使用於各個需要根據條件進行約束的業務，如權限； 本設計和實現，很大部分是通過數

實現自定義查詢的數據庫設計及實現（二）

表名 table abr bigint sts 處理 update 關聯表 creat 上部分大概講了一下表設計，這部分講一下處理。 處理的結構 處理結構的內容比較多，分為幾個部分分別講解一下。首先講解一下尋找關系表。 尋找關系表 尋找關系表根據“表間關系登記表”進行處

spring mvc實現自定義註解

poi org param 運行時 onf dha ogg logs exec 實現方式：使用@Aspect實現： 1. 新建註解接口：CheckSign package com.soeasy.web.utils; import org.springframework.

ApiController實現自定義身份認證

del api color span () log list() etc serialize 1 /// <summary> 2 /// 身份認證 3 /// </summary> 4 public class Au

利用echarts highcharts 實現自定義地圖 關系圖效果 側邊3D柱形圖餅圖散點圖

技術 ges 散點圖 chart blog 餅圖 git 分享 charts github 地址： https://https://github.com/Gengshaoxuan/medataMap github 地址： https://https://github.c