Qt自定义标题栏【即取即用模板】

头文件

cpp 复制代码
#ifndef TITLEWDG_H
#define TITLEWDG_H

#include <QWidget>

namespace Ui {
class TitleWdg;
}

class TitleWdg : public QWidget
{
    Q_OBJECT

public:
    explicit TitleWdg(QWidget *parent = nullptr);
    ~TitleWdg();    

signals:
    void maximize();
    void minimize();
    void closeWindow();

protected:
    void paintEvent(QPaintEvent *event);

private slots:
    void on_close_clicked();
    void on_min_clicked();
    void on_max_clicked();

private:
    Ui::TitleWdg *ui;
};

#endif // TITLEWDG_H

源文件

cpp 复制代码
#include "titlewdg.h"
#include "ui_titlewdg.h"

#include <QPainter>
#include <QStyleOption>

TitleWdg::TitleWdg( QWidget *parent)
    : QWidget(parent),
      ui(new Ui::TitleWdg)
  {
      ui->setupUi(this);            
  }

TitleWdg::~TitleWdg()
{
    delete ui;
}

void TitleWdg::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
    QStyleOption opt;
    opt.init(this);

    QPainter painter(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);
}

void TitleWdg::on_close_clicked()
{
    closeWindow();
}

void TitleWdg::on_min_clicked()
{
    minimize();
}

void TitleWdg::on_max_clicked()
{
    maximize();
}

UI文件

cpp 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>TitleWdg</class>
 <widget class="QWidget" name="TitleWdg">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>636</width>
    <height>33</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <layout class="QHBoxLayout" name="horizontalLayout">
   <property name="leftMargin">
    <number>9</number>
   </property>
   <property name="topMargin">
    <number>5</number>
   </property>
   <property name="rightMargin">
    <number>9</number>
   </property>
   <property name="bottomMargin">
    <number>5</number>
   </property>
   <item>
    <widget class="QLabel" name="logo">
     <property name="text">
      <string/>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QLabel" name="title">
     <property name="text">
      <string/>
     </property>
    </widget>
   </item>
   <item>
    <spacer name="horizontalSpacer">
     <property name="orientation">
      <enum>Qt::Horizontal</enum>
     </property>
     <property name="sizeHint" stdset="0">
      <size>
       <width>366</width>
       <height>20</height>
      </size>
     </property>
    </spacer>
   </item>
   <item>
    <widget class="QToolButton" name="min">
     <property name="text">
      <string/>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QToolButton" name="max">
     <property name="text">
      <string/>
     </property>
    </widget>
   </item>
   <item>
    <widget class="QToolButton" name="close">
     <property name="text">
      <string/>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

qss

cpp 复制代码
#titleWdg
{
    color: #cdcdcd;
    background-color: #434343;
}

#titleWdg #max
{
    width: 26px;
    height: 26px;
    border-image: url(:/img/src/img/maximize-active.svg);
}

#titleWdg #max:hover
{
    border-image: url(:/img/src/img/maximize-hover.svg);
}

#titleWdg #min
{
    width: 26px;
    height: 26px;
    border-image: url(:/img/src/img/minimize-active.svg);
}

#titleWdg #min:hover
{
    border-image: url(:/img/src/img/minimize-hover.svg);
}

#titleWdg #close
{
    width: 26px;
    height: 26px;
    border-image: url(:/img/src/img/close-active.svg);
}

#titleWdg #close:hover
{
    border-image: url(:/img/src/img/close-hover.svg);
}

#titleWdg #logo
{
    min-width: 26px;
    height: 26px;
    border-image: url(:/img/YMTC.ico);
}

#titleWdg #title
{
    font: bold 12px;
    color: #FFFFFF;
    qproperty-text: "Working Log Tool v1.0.0";
}
相关推荐
奔跑吧 android38 分钟前
【Docker】【03.使用docker搭建ubuntu20.04 Qt5.12 开发环境】
qt·docker·ubuntu20.04·qt5.12
扶尔魔ocy5 小时前
【QT常用技术讲解】可拖拽文件的Widget--QListWidget
开发语言·qt
枫叶丹45 小时前
【Qt开发】布局管理器(一)-> QVBoxLayout垂直布局
开发语言·c++·qt
Larry_Yanan6 小时前
QML学习笔记(四十七)QML与C++交互:上下文对象
c++·笔记·qt·学习·ui
上去我就QWER21 小时前
深入理解 Qt 信号槽机制
qt
钱彬 (Qian Bin)1 天前
项目实践6—全球证件智能识别系统(Qt客户端开发+FastAPI后端人工智能服务开发)
人工智能·qt·fastapi·证件识别
Lhan.zzZ1 天前
详解 QGridLayout:Qt的网格布局管理器
开发语言·qt
长沙红胖子Qt1 天前
VTK开发笔记(八):示例Cone5,交互器的实现方式,在Qt窗口中详解复现对应的Demo
qt·vtk·交互·交互器
进击ing小白2 天前
QGraphicsEffect控件添加特效
qt
迷失的walker2 天前
【Qt C++ QSerialPort】QSerialPort fQSerialPortInfo::availablePorts() 执行报错问题解决方案
数据库·c++·qt