QT布局管理詳解QVBoxLayout與QHBoxLayout及QGridLayout的使用

更新時間：2022年06月23日 09:48:02 作者：紅客白帽

在這篇文章中，你將知道水平布局、垂直布局、網(wǎng)格布局如何輕松上手，以純代碼方式展示。對齊方式，大小設(shè)置，圖片頭像匹配標簽，布局器里面的組件大小隨意切換大小，認真看完這篇文章，QT布局管理器熟練使用

main.cpp

#include "mainwindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include<QPushButton>
#include <QMainWindow>
#include <QTextCodec>//解決字符編碼亂碼問題
#include<QTextEdit>
#include <QSlider>//滑動桿
QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
public slots:
private:
    Ui::MainWindow *ui;
    QTextCodec *codec;
    QWidget *window;
    QPushButton *button1;
    QPushButton *button2;
    QPushButton *button3;
    QPushButton *button4;
    QPushButton *button5;
    QWidget *win;//方便全局使用
    QWidget *newweigdet;
};
#endif // MAINWINDOW_H

mainwindow.cpp

我就不一一舉例了，具體在代碼中滲透

//=============================布局管理器全精通
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QString>
#include<QStringLiteral>
#include<QDebug>//控制臺輸出
//==========================布局管理器
#include<QVBoxLayout>//水平
#include<QHBoxLayout>//垂直
#include<QHBoxLayout>//網(wǎng)格
#include<QRadioButton>
#include <QLineEdit>
#include <QCheckBox>
#include<QLabel>
#include<QPixmap>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    codec = QTextCodec::codecForName("gbk");//設(shè)置字符編碼
    codec->setCodecForLocale(codec);
    setWindowTitle(codec->toUnicode("UI學(xué)習(xí)筆記"));
    win = new QWidget;//創(chuàng)建一個窗口部件
    newweigdet = new QWidget;
    newweigdet->hide();
    QHBoxLayout *hlay = new QHBoxLayout();//創(chuàng)建水平布局
    QPushButton *bt1 = new QPushButton("bt1");
    bt1->setFixedSize(100,40);//設(shè)置寬高，位置不變
    QPushButton *bt2 = new QPushButton("bt2");
    QPushButton *bt3 = new QPushButton("bt3");
    QPushButton *bt4 = new QPushButton("bt4");
    bt2->setFixedSize(100,40);//設(shè)置寬高，位置不變
    bt3->setFixedSize(100,40);//設(shè)置寬高，位置不變
//    qDebug()<<bt1->x()<<" "<<bt1->y()<<" "<<bt1->width()<<" "<<bt1->height();
//    bt1->setGeometry(0,0,800,640);
    hlay->addWidget(bt1);
    hlay->addWidget(bt2);
    hlay->addWidget(bt3);
    hlay->addWidget(bt4);
    hlay->setSpacing(30);//設(shè)置組件之間的距離
    //hlay->setContentsMargins(10,10,10,10);//設(shè)置內(nèi)部控件與邊框的距離
    //新建垂直布局
    QVBoxLayout *vlay = new QVBoxLayout();
    //創(chuàng)建3個QRadioButton
    QRadioButton *rb1 = new QRadioButton("QRadioButton 1");
    QRadioButton *rb2 = new QRadioButton("QRadioButton 2");
    QRadioButton *rb3 = new QRadioButton("QRadioButton 3");
    //將水平布局放入垂直布局
    vlay->addItem(hlay);
    vlay->addWidget(rb1);
    vlay->addWidget(rb2);
    vlay->addWidget(rb3);
    vlay->setSpacing(30);//設(shè)置組件之間的距離
    vlay->setContentsMargins(30,10,10,10);//設(shè)置內(nèi)部控件與邊框的距離
    /*控件大小范圍限定
        通過上面的代碼我們發(fā)現(xiàn)一個現(xiàn)象：程序中并沒有去設(shè)置子控件的大小，
        其默認大小是Qt自動設(shè)置的，同時在窗口大小改變時，控件大小也會隨之調(diào)整。
        然而有時候我們并不想要這樣的效果，我們只想讓控件大小保持在某一范圍內(nèi)，
        這時就需要用到下面幾個API進行設(shè)置了。*/
    //設(shè)置按鈕bt4最小寬度和最大寬度
    bt4->setMinimumWidth(60);
    bt4->setMaximumWidth(70);
    bt4->setFixedSize(50,50);//設(shè)置這個部件的寬和高【重要】
    QHBoxLayout *hlay2 = new QHBoxLayout();
    QPushButton *btOK = new QPushButton("OK");
    QPushButton *btCancel= new QPushButton("Cancel");
    hlay2->addWidget(btOK);
    //增加可伸縮空間
    hlay2->addStretch();//拉扯不影響大小【重點】
    hlay2->addWidget(btCancel);
    vlay->addItem(hlay2);
    QHBoxLayout *hlay3 = new QHBoxLayout();
    QPushButton *bt61 = new QPushButton("bt61");
    QPushButton *bt62= new QPushButton("bt62");
    QPushButton *bt63= new QPushButton("bt63");
//    bt61->setFixedSize(100,40);//設(shè)置寬高，位置不變
//    bt62->setFixedSize(100,40);//設(shè)置寬高，位置不變
//    bt63->setFixedSize(100,40);//設(shè)置寬高，位置不變
    hlay3->addWidget(bt61);
    hlay3->addWidget(bt62);
    hlay3->addWidget(bt63);
    //Qt中可以設(shè)定控件的拉伸系數(shù)，也可以理解為控件的縮放比例。
    hlay3->setStretchFactor(bt61,1);
    hlay3->setStretchFactor(bt62,2);
    hlay3->setStretchFactor(bt63,3);
    vlay->addItem(hlay3);
    win->setLayout(vlay);//水平和垂直組件放在這個QWidget
    win->show();//顯示
    bt4->setFixedSize(100,50);
    bt4->setText(codec->toUnicode("下一頁內(nèi)容"));
    connect(bt4,&QPushButton::clicked,[&](){
       on_pushButton_clicked();
    });//設(shè)置信號與槽  上一章已經(jīng)出過文章了
}
MainWindow::~MainWindow()
{
    delete ui;
}
//網(wǎng)格布局
void MainWindow::on_pushButton_clicked()
{
    win->hide();//隱藏上一個窗口
    // 構(gòu)建控件 頭像、用戶名、密碼輸入框等
    QLabel *pImageLabel = new QLabel;
    QLineEdit *pUserLineEdit = new QLineEdit;
    QLineEdit *pPasswordLineEdit = new QLineEdit;
    QCheckBox *pRememberCheckBox = new QCheckBox;
    QCheckBox *pAutoLoginCheckBox = new QCheckBox;
    QPushButton *pLoginButton = new QPushButton;
    QPushButton *pRegisterButton = new QPushButton;
    QPushButton *pForgotButton = new QPushButton;
    QPushButton *page_up = new QPushButton;
    pLoginButton->setFixedHeight(30);//設(shè)置寬
    pUserLineEdit->setFixedWidth(200);//設(shè)置寬
    // 設(shè)置頭像
    QPixmap pixmap("C:/Users/SuJieYin/Pictures/Saved Pictures/2.png");
    pImageLabel->setFixedSize(90, 90);
    pImageLabel->setPixmap(pixmap);
    pImageLabel->setScaledContents(true);//圖片適應(yīng)標簽
    // 設(shè)置文本
    pUserLineEdit->setPlaceholderText(codec->toUnicode("QQ號碼/手機/郵箱"));//顯示中文
    pPasswordLineEdit->setPlaceholderText(codec->toUnicode("密碼"));
    pPasswordLineEdit->setEchoMode(QLineEdit::Password);//隱藏
    pRememberCheckBox->setText(codec->toUnicode("記住密碼"));
    pAutoLoginCheckBox->setText(codec->toUnicode("自動登錄"));
    pLoginButton->setText(codec->toUnicode("登錄"));
    pRegisterButton->setText(codec->toUnicode("注冊賬號"));
    pForgotButton->setText(codec->toUnicode("找回密碼"));
    page_up->setText(codec->toUnicode("上一頁"));
    QGridLayout *pLayout = new QGridLayout();
    // 頭像 第0行，第0列開始，占3行1列
    pLayout->addWidget(pImageLabel, 0, 0, 3, 1);
    // 用戶名輸入框 第0行，第1列開始，占1行2列
    pLayout->addWidget(pUserLineEdit, 0, 1, 1, 2);
    pLayout->addWidget(pRegisterButton, 0, 4);
    // 密碼輸入框 第1行，第1列開始，占1行2列
    pLayout->addWidget(pPasswordLineEdit, 1, 1, 1, 2);
    pLayout->addWidget(pForgotButton, 1, 4);
    // 記住密碼 第2行，第1列開始，占1行1列 水平居左 垂直居中
    pLayout->addWidget(pRememberCheckBox, 2, 1, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
    // 自動登錄 第2行，第2列開始，占1行1列 水平居右 垂直居中
    pLayout->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
    // 登錄按鈕 第3行，第1列開始，占1行2列
    pLayout->addWidget(pLoginButton, 3, 1, 1, 2);
    pLayout->addWidget(page_up,3,4);//設(shè)置上一頁在第三行第四列
    connect(page_up,&QPushButton::clicked,[&](){
       win->show();
    });
    // 設(shè)置水平間距
    pLayout->setHorizontalSpacing(10);
    // 設(shè)置垂直間距
    pLayout->setVerticalSpacing(10);
    // 設(shè)置外間距
    pLayout->setContentsMargins(10, 10, 10, 10);//邊框間距設(shè)置
    newweigdet->setLayout(pLayout);//添加進窗口部件
    newweigdet->show();//顯示窗口部件
}