大家如果喜歡，求一鍵三連，點個關注😭😭😭，小柏謝謝各位大佬了🍗

1. 布局管理

對于一個完善的軟體，布局管理卻是必不可少的，無論是想要界面中部件有一個很整齊的排列，還是想要界面能適應視窗的大小變化，都要進行布局管理，Qt中主要提供了QLayout類及其子類來作為布局管理器，它們可以實作常用的布局管理功能

總結：為了好看（就這么簡單）

這個東西就是對視窗上面的控制元件進行排版，而排版的作用就是好看，所以布局管理的作用就是為了讓界面能整潔好看，布局管理有4種，這4種之間是可以嵌套的

1.1 水平布局

在這個布局中的所有控制元件都會水平放置，只有一行，多列，也就是全部放在了一行

1.2 垂直布局

在這個布局中的所有控制元件都會垂直放置，只有一列，多行，也就是全部放在了一列

1.3 再表單布局中布局

在這個布局中的所有控制元件都會是多行，兩列的方式放置，可以有n行，但是只有兩列

1.4 格柵布局

在這個布局里面所有的空間可以是多行多列，像電子表格一樣
那么對于這4種布局，都是可以相互嵌套的，那么布局完一些控制元件之后，那么對于這個這個布局就可以理解為一個控制元件，那么這個控制元件就可以放到其他的布局里面了，這樣就嵌套了
當然還有一個打破布局，作用就是取消布局，比如對3個控制元件做了一個水平布局，那么選中這個布局，點擊打破布局，那么這個水平布局就失效了

一個大的布局，然后可以往里面添加子布局然后構成整體的布局，具體的代碼實作可以在steupui下面去看，主要是通過
addWidget添加控制元件
addLayout添加布局

格柵布局實體——切圖
將一張完整的圖片進行切割，最后放入label控制元件中
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);//把格柵布局作用控制元件上
    gridLayout->setContentsMargins(0,0,0,0);//設定邊距
    for(int i=0;i<30;i++)
    {
        for(int j=0;j<30;j++)
        {
            QImageReader reader;
            reader.setFileName(":/c.bmp");//讀取圖片
            reader.setScaledClipRect(QRect(i*989/30,j*989/30,989/30,989/30));//截取圖片

            QImage img;
            img=reader.read();//圖片保存img中

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

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

效果展示

2. 樣式表

樣式表是用來做什么的？
自定義Qt Widgets
使用樣式表時，每個小部件都被視為具有四個同心矩形的框：空白矩形、邊框矩形、填充矩形和內容矩形，盒子模型對此進行了更詳細的描述，
四方同心矩陣👇

margin:空白
padding:邊框
Border:填充
Content:內容
空白區域位于邊框外，并且總是透明的，邊框為部件提供了四周的框架

2.1 添加內容

添加資源

background-image:背景圖片
border-image:邊框
image:圖片

添加漸變

color：字體的顏色
background-color：背景色
alternate-background-color：交替背景-顏色
border-color：邊框顏色
border-top-color：頂邊框頂色
border-right-color：右邊框右色
border-bottom-color：底邊框底色
border-left-color：左邊框顏色
gridline-color：網格線邊框顏色
selection-color：選擇時顏色
selection-background-color：選擇時的背景顏色

添加顏色

同上漸變顏色解釋

添加字體

這個沒啥解釋的，就是改變字體

2.2 css語法改變樣式(QSS)

css語法改變樣式
這里說QSS是因為是在QT所以說是QSS

控制元件:狀態
{
屬性:值1;
屬性:值2;
…
屬性:值N;
}
以下是一些控制元件的常用的狀態
checked button部件被選中
disabled 部件被禁用
enabled 部件被啟用
focus 部件獲得焦點
hover 滑鼠位于部件上
indeterminate checkbox或radiobutton被部分選中
off 部件可以切換，且處于off狀態
on 部件可以切換，且處于on狀態
pressed 部件被滑鼠按下
unchecked button部件未被選中
radioButton前有小按鈕，如果想改變按鈕里面內容的樣式不能用一個：，要用兩個：

例：多個重復的pushButton
如果出現很多pushButton按鈕，我們都想要改變他們的樣式，那我們上面寫的css語法是不能夠滿足單獨的
前面加個#，要寫物件名，不能寫型別名字

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

2.2.1 pushButton

border:5px groove blue; 邊框5px 3d，藍色
border-radius:10px; 圓角，弧度10px

2.2.2 radioButton

QRadioButton::indicator::unchecked{ //沒有被選中時，的選中按鈕為圖片
image: url(:/png/png/blueStone.png);
width: 50px;
height:50px;
}
QRadioButton::indicator::checked { //選中時
image: url(:/png/png/redStone.png);
}
QRadioButton::indicator:checked:hover { //選中時，并且滑鼠在上面
image: url(:/png/png/downloadsfolder.png);
}

2.2.3 progressbar

QProgressBar::chunk { 顯示的進度條里面的內容
background-color: #CD96CD;
width: 10px;
margin: 0.5px;
}
QProgressBar { 進度條的邊框，及文字
border: 2px solid grey;
border-radius: 5px;
text-align: center;
}

2.2.4 combox

QComboBox { //去掉邊框
border:none;
}
QComboBox::drop-down { //下拉的也去掉邊框，設定大小，圖片
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);//設定字體顏色為
紅色
ui->lcdNumber->setPalette(lcdpat);//紅色字體

2.3 Qt中的子類控制元件

Qt中常見子類控制元件如下：
::branch
QTreeView的分支指示器
::chunk
QProgressBar的進度顯示塊
::cIose-button
QDockWidget或QTabBar頁面的關閉按鈕
::down-arrow
QComboBox，QHeaderView (排序指示器)，QScrollBar 或 QSpinBox 的下拉箭頭
::down-button
QScrollBar或QSpinBox的向下按鈕
::drop-down
QComboBox的下拉按鈕
::float-button
QDockWidget的浮動按鈕
::groove
QSlider的凹槽
::indicator
QAbstractltemView，QCheckBox, QRadioButton，可勾選的 QMenu 選單項，或可勾選的
QGroupBox的指示器
::handle
QScrollBar，QSplitter 或 QS丨ider 的滑塊
::icon
QAbstract丨temView 或 QMenu 的圖示
::item
QAbstractltemView，QMenuBar，QMenu，或 QStatusBar 的—個項
::left-arrow
QScrollBar的向左箭頭
::menu-arrow
具有下拉選單的QToolBimon的下拉箭頭
::menu-button
QToolButton的選單按鈕
::menu-indicator
QPushButton的選單指示器
::right-arrow
QMenu或QScrollBar的右側箭頭
::pane
QTabWidget 的面板
::scroller
QMenu或QTabBar的卷軸
::section
QHeaderView 的分段
::separator
QMenu 或 QMainWindow 的分隔器
::tab
QTabBar 或 QToolBox 的分頁
::tab-bar
QTabWidget的分頁條，這個子控制元件只用于控制QTabBar在QTabWidget中的位置，定義分頁的樣式使用::tab子控制元件
::text
QAbstracdtemView 的文字
::title
QGroupBox 或 QDockWidget 的標題
::up-arrow
QHeaderView (排序指示器)，QScroIlBar或QSpinBox的向上箭頭
::up-button
QSpinBox的向上按鈕

3. 貼圖（實作自定義視圖）

這里不展示專案了，不是很難，主要用的代碼就是下面三行👇

this->setWindowFlag(Qt::FramelessWindowHint);//隱藏標題欄
setWindowOpacity(0.4); //視窗透明度
setAttribute(Qt::WA_TranslucentBackground); //是視窗透明，但是上面的空間不透明

歡迎各位大佬批評指正，如果喜歡一鍵三連，可以關注我，我后續會更新下面的內容