QT5.14.2 Unlocks the unlimited possibility of Qt's customized title bar, and has a unique personalized window with one key!

In modern software design, personalization and aesthetics are indispensable elements of application interface. However, the traditional Qt window often has a single style and the title bar is fixed, which severely limits the flexibility and visual experience of the interface. Is there a way to get rid of these constraints and inject infinite vitality into our Qt application? Today, we will explore the mystery of customized Qt title bar and create your own curvaceous and unique window crown!

I Qt Advantages of Customizing Title Blocks

Compared with the Qt default title block, the custom title block has the following significant advantages:

1. Unlimited personalization: The appearance, layout and controls of the title bar can be designed freely to achieve a distinctive style.

2. Cross platform unification: under different operating systems, the title bar interface remains consistent, improving the integrity of the application.

3. Strong function scalability: new functions such as user-defined buttons and search boxes can be easily added to improve the user experience.

   
   

2、 Title Block Assembly Disassembly

To implement a custom title block, we need to build its various components, including:

• Title text: used to display the application name or the current window title
• Window control buttons: minimize, maximize/restore, close buttons
• Drag area: used to drag the entire window
• Other function buttons: such as menu button, search box, etc

Let's deploy these components one by one.

3、 Title block component implementation

1. Basic interface construction of title bar

We first create a Qt window without a border, and draw the title bar on it:

 QWidget *window = new QWidget; window->setWindowFlags(Qt::FramelessWindowHint); // Set Borderless

Then set the basic appearance of the title block through the style sheet:

 #titlebar { background-color: #323232; } #titlebar QLabel { color: white;  font-weight: bold; }

In the code, we use QPushButton Qt controls such as QLabel to create title text, minimize/maximize/close buttons:

 //Title Text auto titleLabel = new QLabel(this); titleLabel->setText("My App"); //Minimize button auto minimizeBtn = new QPushButton(this); minimizeBtn->setIcon(style->standardIcon(QStyle::SP_TitleBarMinButton)); connect(minimizeBtn， &QPushButton::clicked，  this， &CustomTitleBar::showMinimized); //More Buttons

2. Implement drag function

We need to capture the mouse press, move and release events in the title bar, and move the entire window according to the mouse displacement.

 //Record the initial position in mousePressEvent m_startPos = event->globalPos(); //Adjust the window position according to the displacement in mouseMoveEvent move(geometry().topLeft() + event->globalPos() - m_startPos); //Reset status in mouseReleaseEvent

3. Maximize/restore by double clicking

By overriding mouseDoubleClickEvent, when double clicking the title bar, we switch the window's maximize/restore status:

 void CustomTitleBar::mouseDoubleClickEvent(QMouseEvent *event) { if(window()->isMaximized()) window()->showNormal(); else window()->showMaximized(); }

4、 Practical cases

Here is the complete source code of the custom title block:

titlebar.h

 #ifndef TITLEBAR_H #define TITLEBAR_H #include <QWidget> #include <QHBoxLayout> #include <QLabel> #include <QPushButton> class TitleBar : public QWidget { Q_OBJECT public: explicit TitleBar(QWidget *parent = nullptr); void setWindowTitle(const QString &title); void setWindowIcon(const QIcon &icon); protected: void mousePressEvent(QMouseEvent *event) override; void mouseMoveEvent(QMouseEvent *event) override; void mouseReleaseEvent(QMouseEvent *event) override; void mouseDoubleClickEvent(QMouseEvent *event) override; private slots: void onButtonClicked(); private: QLabel *m_titleLabel; QPushButton *m_minimizeButton; QPushButton *m_maximizeButton; QPushButton *m_closeButton; QPoint m_startPos; bool m_isMousePressed; }; #endif // TITLEBAR_H

titlebar.cpp:

 #include "titlebar.h" #include <QHBoxLayout> #include <QMouseEvent> #include <QApplication> #include <QStyle> TitleBar::TitleBar(QWidget *parent) : QWidget(parent) ，  m_isMousePressed(false) { //Title Text m_titleLabel = new QLabel(this); m_titleLabel->setStyleSheet("color: white;  font-weight: bold; "); //Minimize button m_minimizeButton = new QPushButton(this); m_minimizeButton->setIcon(style()->standardIcon(QStyle::SP_TitleBarMinButton)); connect(m_minimizeButton， &QPushButton::clicked，  this， &TitleBar::onButtonClicked); //Maximize button m_maximizeButton = new QPushButton(this); m_maximizeButton->setIcon(style()->standardIcon(QStyle::SP_TitleBarMaxButton)); connect(m_maximizeButton， &QPushButton::clicked，  this， &TitleBar::onButtonClicked); //Close button m_closeButton = new QPushButton(this); m_closeButton->setIcon(style()->standardIcon(QStyle::SP_TitleBarCloseButton)); connect(m_closeButton， &QPushButton::clicked，  this， &TitleBar::onButtonClicked); //Layout QHBoxLayout *layout = new QHBoxLayout(this); layout->addWidget(m_titleLabel); layout->addWidget(new QWidget()， 1); //  Used to occupy the middle space layout->addWidget(m_minimizeButton); layout->addWidget(m_maximizeButton); layout->addWidget(m_closeButton); layout->setContentsMargins(5， 5， 5， 5); //Style Title Block setStyleSheet("background-color: #323232;"); } void TitleBar::setWindowTitle(const QString &title) { m_titleLabel->setText(title); } void TitleBar::setWindowIcon(const QIcon &icon) { m_titleLabel->setPixmap(icon.pixmap(16， 16)); } void TitleBar::mousePressEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { m_isMousePressed = true; m_startPos = event->globalPos(); } } void TitleBar::mouseMoveEvent(QMouseEvent *event) { if (m_isMousePressed) { QPoint delta = event->globalPos() - m_startPos; window()->move(window()->pos() + delta); } } void TitleBar::mouseReleaseEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { m_isMousePressed = false; } } void TitleBar::mouseDoubleClickEvent(QMouseEvent *event) { Q_UNUSED(event) if (window()->isMaximized()) { window()->showNormal(); } else { window()->showMaximized(); } } void TitleBar::onButtonClicked() { QPushButton *button = qobject_cast<QPushButton *>(sender()); QWidget *window = this->window(); if (button == m_minimizeButton) { window->showMinimized(); } else if (button == m_maximizeButton) { if (window->isMaximized()) { window->showNormal(); } else { window->showMaximized(); } } else if (button == m_closeButton) { window->close(); } }

Use custom title blocks in the main window:

 #include "titlebar.h" #include <QVBoxLayout> int main(int argc，  char *argv[]) { QApplication app(argc，  argv); QWidget window; window.setWindowFlags(Qt::FramelessWindowHint); //  Set Borderless TitleBar *titleBar = new TitleBar(&window); titleBar->setWindowTitle("My Application"); titleBar->setWindowIcon(QIcon(":/icons/app.ico")); QWidget *centralWidget = new QWidget; //Add your main interface component QVBoxLayout *layout = new QVBoxLayout(&window); layout->addWidget(titleBar); layout->addWidget(centralWidget); window.show(); return app.exec(); }

The above code implements a basic custom title bar, including title text, minimize/maximize/close buttons, window drag and other functions. You can modify and extend the code as required, such as adding more custom buttons, integrating QSS styles, etc.

epilogue

Through the actual practice of this article, we successfully implemented a basic custom title bar. Of course, this is just a starting point. You can further expand and optimize it according to your needs, such as adding transparency adjustment and user-defined buttons.