If you like it, please click one button three times to pay attention 😭😭😭， Bai, thank you 🍗

1. layout management

For a perfect software, layout management is essential. Whether you want the components in the interface to be arranged neatly or the interface to be able to adapt to the size change of the window, you should carry out layout management. QLayout class and its subclasses are mainly provided in Qt as layout managers, which can realize common layout management functions

Summary: for the sake of beauty (that's all)

This tool is used to typeset the controls on the window, and the role of typesetting is to make the interface look good. Therefore, the role of layout management is to make the interface clean and good-looking. There are four types of layout management, which can be nested among them

1.1 horizontal layout

All the controls in this layout will be placed horizontally, with only one row and multiple columns, that is, all the controls will be placed in one row

1.2 vertical layout

All the controls in this layout will be placed vertically, with only one column and multiple rows, that is, all the controls will be placed in one column

1.3 layout in window layout

All controls in this layout will be placed in multiple rows and two columns. There can be n rows, but only two columns

1.4 grid layout

In this layout, all spaces can be multi row and multi column, just like a spreadsheet
The four layouts can be nested with each other. After some controls are laid out, the layout can be understood as a control, and the control can be placed in other layouts, thus nesting
Of course, there is another function to break the layout, which is to cancel the layout. For example, if you have made a horizontal layout for three controls, select the layout and click break layout, then the horizontal layout will become invalid

For a large layout, you can add sub layouts to it to form the overall layout. The specific code implementation can be seen under the stepui, mainly through
addWidget add control
addLayout add layout

Example of grid layout - cut view
Cut a complete picture and put it into the label control
widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QGridLayout>
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;
    QGridLayout *gridLayout;
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

#include <QImageReader>
#include <QLabel>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    gridLayout=new QGridLayout(ui->scrollAreaWidgetContents);//Apply grid layout to control
    gridLayout->setContentsMargins(0,0,0,0);//Set margins
    for(int i=0;i<30;i++)
    {
        for(int j=0;j<30;j++)
        {
            QImageReader reader;
            reader.setFileName(":/c.bmp");//Read picture
            reader.setScaledClipRect(QRect(i*989/30,j*989/30,989/30,989/30));//Capture picture

            QImage img;
            img=reader.read();//Picture saved in img

            QLabel *l=new QLabel(ui->scrollAreaWidgetContents);
            l->setScaledContents(true);
            l->setPixmap(QPixmap::fromImage(img));//img to Pixmap
            gridLayout->addWidget(l,i,j);
        }
    }
}

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

Effect display

2. style sheet

What are style sheets used for?
Customize Qt Widgets
When using a style sheet, each widget is treated as a box with four concentric rectangles: a blank rectangle, a border rectangle, a fill rectangle, and a content rectangle. The box model describes this in more detail.
Square concentric matrix 👇

margin: blank
padding: border
Border: fill
Content: content
The blank area is outside the border and is always transparent. The border provides a frame around the part

2.1 addition

Add resource

Background image: background image
Border image: border
image: picture

Add gradient

Color: the color of the font
Background color: background color
Alternate background color: alternate background color
Border color: border color
Border top color: top color of top border
Border right color: right border right color
Border bottom color: bottom border bottom color
Border left color: left border color
Gridline color: gridline border color
Selection color: color when selecting
Selection background color: the background color when selecting

Add color

Ditto gradient color interpretation

Add font

There's no explanation for this, just change the font

2.2 css syntax change style (QSS)

css syntax changing styles
QSS is called QSS because it is in QT

Controls: Status
{
Attribute: value 1;
Attribute: value 2;
...
Attribute: value N;
}
The following are the common states of some controls
checked button part is selected
Disabled part is disabled
Enabled part is enabled
Focusassemblies gain focus
hover mouse over assembly
indeterminate checkbox or radiobutton is partially selected
The off part can be switched and is in the off state
The on part can be switched and is in the on state
Pressed part pressed by mouse
unchecked button part is not selected
There are small buttons in front of the radioButton. If you want to change the style of the contents in the button, you can't use one:, but two:

Example: multiple repeated pushbuttons
If there are many pushButton buttons, and we all want to change their styles, the css syntax we wrote above cannot meet the requirements of individual
Add a \s in front of it. The object name must be written, but the type name cannot be written

#pushbutton{
background-color: rgb(0, 0, 0);
}

2.2.1 pushButton

border:5px groove blue; Border 5 px 3d，blue
border-radius:10px; Fillet, radian 10 px

none	Define borderless
hidden	Same as "none". Except when applied to tables, where hidden is used to resolve border conflicts.
dotted	Defines a dotted border. Rendered as a solid line in most browsers.
dashed	Define dashes. Rendered as a solid line in most browsers.
solid	Define solid lines.
double	Define double lines. The width of the double line is equal to the value of border width.
groove	Defines the 3D groove border. The effect depends on the value of border color.

2.2.2 radioButton

QRadioButton::indicator::unchecked{ //If it is not selected, the selected button is a picture
image: url(:/png/png/blueStone.png);
width: 50px;
height:50px;
}
QRadioButton::indicator::checked { //When selected
image: url(:/png/png/redStone.png);
}
QRadioButton::indicator:checked:hover { //When selected, with the mouse over it
image: url(:/png/png/downloadsfolder.png);
}

2.2.3 progressbar

QProgressBar::chunk { Contents of the displayed progress bar
background-color: #CD96CD;
width: 10px;
margin: 0.5px;
}
QProgressBar { Border and text of progress bar
border: 2px solid grey;
border-radius: 5px;
text-align: center;
}

2.2.4 combox

QComboBox { //Remove border
border:none;
}
QComboBox::drop-down { //Drop down also remove the border, set the size and picture
border:none;
image: url(:/png/png/downloadsfolder.png);
width:30;
height:30;
}

2.2.5 lcdnumber

QPalette lcdpat=ui->lcdNumber->palette();
lcdpat.setColor(QPalette::Normal,QPalette::WindowText,Qt::red);//Set font color to
 gules
ui->lcdNumber->setPalette(lcdpat);//Red font

2.3 subclass controls in QT

Common subclass controls in Qt are as follows:
::branch
Branch indicator for QTreeView
::chunk
Progress display block for qpprogressbar
::cIose-button
Close button of QDockWidget or QTabBar page
::down-arrow
Drop down arrow for QComboBox, QHeaderView, QScrollBar or QSpinBox
::down-button
Down button of QScrollBar or QSpinBox
::drop-down
Drop down button of QComboBox
::float-button
Floating button of QDockWidget
::groove
Groove of QSlider
::indicator
QAbstractltemView, QCheckBox, QRadioButton, checkable QMenu menu item, or checkable
Indicator for QGroupBox
::handle
QScrollBar, QSplitter or QS s ider slider
::icon
Icon of QAbstract temView or QMenu
::item
An entry for QAbstractltemView, QMenuBar, QMenu, or QStatusBar
::left-arrow
Leftwards arrow of QScrollBar
::menu-arrow
Drop down arrow of QToolBimon with drop-down menu
::menu-button
Menu button of QToolButton
::menu-indicator
Menu indicator for QPushButton
::right-arrow
Right arrow of QMenu or QScrollBar
::pane
Panel of QTabWidget
::scroller
Reel of QMenu or qtabbars
::section
Segmentation of QHeaderView
::separator
Divider for QMenu or qmainwindows
::tab
Paging of QTabBar or QToolBox
::tab-bar
Page bar of QTabWidget. This sub control is only used to control the position of the QTabBar in the QTabWidget, define the style of paging, and use the:: tab sub control
::text
Text for QAbstracdtemView
::title
QGroupBox or QDockWidget title
::up-arrow
QHeaderView, up arrow of QScroIlBar or QSpinBox
::up-button
QSpinBox up button

3. mapping (realize customized view)

The project is not shown here. It is not very difficult. The main code is the following three lines 👇

this->setWindowFlag(Qt::FramelessWindowHint);//Hide title block
setWindowOpacity(0.4); //Window transparency
setAttribute(Qt::WA_TranslucentBackground); //The window is transparent, but the space above is opaque

You are welcome to criticize and correct me. If you like one click three connections, you can follow me. I will update the following content later