“This is the 21st day of my participation in the August Gwen Challenge. For details, see: August Gwen Challenge” juejin.cn/post/698796…

@[TOC]

A preface.

Today we will realize the implementation of a custom title bar, which uses the layout, mouse events to rewrite knowledge points, first of all, or the creation of a custom title bar, like the following, can be enlarged, can be reduced, and with the size of the form changes, the control to do adaptive adjustment. Have you ever felt the dog interface to do more and more beautiful, ha ha, in fact, just want to tell you that what makes perfect, the first time may be very ugly, take your time, I was also sprayed for the first time. No more nonsense, see the implementation.

2. Implement

I know there are a lot of people who don’t know how to build this layout. Indeed, when I first learned it, the layout was also sketched out in the book. I wrote an introduction to the layout before, so you can have a look.How does QT design layouts and beautiful interfacesOf course, you read about layout, and trust me, you still can’t make the layout you want. You go to Baidu, about the layout of knowledge, in fact, and I write the same, in fact, there are some hidden with the inside, but may be this knowledge point for the layout of the people too simple, they will be selective skip. Here are a few questions I can think of:

  • The top-level window layout, layout and form a certain distance;

Solution: Select the top-level form, find the layout in the properties, change the value in the red parentheses to 0, and the distance between the layout and the form is 0.

  • Drag a layout and add related controls to the layout, but once the top-level window is added to the layout, the control size becomes uncontrollable.

Solution: The reason for this is that we do not specify the maximum and minimum values of controls, which is why you see software, some controls maximize after the interface becomes larger, and some controls do not change, such as minimize, maximize controls and so on. All you have to do is select the control, right-click on it and select the size limit, and you'll get the size that you want.

  • After the interface is enlarged or reduced, the control position problem;

Solutions: You can use springs and sizeType properties like Minimum, Maximum, Expanding, and so on. When you go to the Maximum, We don't use the spring to zoom in.

Then the layout is written here, the related control background diagram can be added to my QQ2506897252 for free.

Now let’s talk about the implementation of the function, careful readers may find that the dynamic graph above has two title bars, which is not a lie, I want to say that it is not a lie, to the last white title bar we are to hide, for the order of the article, we temporarily leave him.

The minimize, maximize and close buttons can be implemented in code or in the UI, but the UI implementation has some limitations. Since we want to use a custom title bar, we will implement it directly in the UI.With the signal and slot binding, we can now use custom title bars to minimize, maximize, and close. The next step is to hide the tabs of the system. If the title bar of the system is hidden before this, it will be inconvenient to close the compiled software. In the constructor of the main formthis->setWindowFlags(Qt::FramelessWindowHint);, compile and run to hide the system TAB bar. ! [Insert picture description here]Img – blog. Csdnimg. Cn / 20200922231…=800x) we can’t move the window. To move the window, we need to override the mouse event, includingmousePressEvent(QMouseEvent *event).mouseMoveEvent(QMouseEvent *event).mouseReleaseEvent(QMouseEvent *event).

First declare these three functions in mainwindow.h:

    void mousePressEvent(QMouseEvent *event);// Mouse click
    void mouseMoveEvent(QMouseEvent *event);// Mouse movement
    void mouseReleaseEvent(QMouseEvent *event);// Mouse release
// Add class member m_point (QPoint type)
QPoint m_point;
Copy the code

Defined in mianwindow.cpp:


void MainWindow::mousePressEvent(QMouseEvent *event)
{
    if (event->button() == Qt::LeftButton)
    {
        m_point = event->globalPos() -frameGeometry().topLeft(a);// Mouse position minus the left of the upper left corner
        M_point = event->pos();}}void MainWindow::mouseMoveEvent(QMouseEvent *event)
{
    move(event->globalPos() - m_point);
    // Mouse position minus the coordinates of the pressed point
    Pos () -m_point + pos();
}
void MainWindow::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
    //Q_UNUSED() has no substantive effect and is used to avoid compiler warnings
}
Copy the code

The corresponding m_point = event->globalPos()-frameGeometry().topleft (); M_point = event->pos();

Don’t forget to include the header file #include

#include`

Complete the above code, compile and run, the window can be moved by the mouse.