---

简介

在这篇文章中，你将知道水平布局、垂直布局、网格布局如何轻松上手，以纯代码方式展示。对齐方式，大小设置，图片头像匹配标签，布局器里面的组件大小随意切换大小，认真看完这篇文章，QT布局管理器熟练使用。

---

main.cpp

#include "mainwindow.h"
#include <QApplication>


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    return a.exec();
}

1
2
3
4
5
6
7
8
9
10
11

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

---

mainwindow.cpp

我就不一一举例了，具体在代码中渗透

//=============================布局管理器全精通
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QString>
#include<QStringLiteral>

#include<QDebug>//控制台输出
//==========================布局管理器
#include<QVBoxLayout>//水平
#include<QHBoxLayout>//垂直
#include<QHBoxLayout>//网格
#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");//设置字符编码
    codec->setCodecForLocale(codec);
    setWindowTitle(codec->toUnicode("UI学习笔记"));
    win = new QWidget;//创建一个窗口部件
    newweigdet = new QWidget;
    newweigdet->hide();
    QHBoxLayout *hlay = new QHBoxLayout();//创建水平布局

    QPushButton *bt1 = new QPushButton("bt1");
    bt1->setFixedSize(100,40);//设置宽高，位置不变
    QPushButton *bt2 = new QPushButton("bt2");
    QPushButton *bt3 = new QPushButton("bt3");
    QPushButton *bt4 = new QPushButton("bt4");
    bt2->setFixedSize(100,40);//设置宽高，位置不变
    bt3->setFixedSize(100,40);//设置宽高，位置不变
//    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);//设置组件之间的距离
    //hlay->setContentsMargins(10,10,10,10);//设置内部控件与边框的距离
    //新建垂直布局
    QVBoxLayout *vlay = new QVBoxLayout();

    //创建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);//设置组件之间的距离
    vlay->setContentsMargins(30,10,10,10);//设置内部控件与边框的距离
    /*控件大小范围限定
        通过上面的代码我们发现一个现象：程序中并没有去设置子控件的大小，
        其默认大小是Qt自动设置的，同时在窗口大小改变时，控件大小也会随之调整。
        然而有时候我们并不想要这样的效果，我们只想让控件大小保持在某一范围内，
        这时就需要用到下面几个API进行设置了。*/

    //设置按钮bt4最小宽度和最大宽度
    bt4->setMinimumWidth(60);
    bt4->setMaximumWidth(70);
    bt4->setFixedSize(50,50);//设置这个部件的宽和高【重要】

    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);//设置宽高，位置不变
//    bt62->setFixedSize(100,40);//设置宽高，位置不变
//    bt63->setFixedSize(100,40);//设置宽高，位置不变

    hlay3->addWidget(bt61);
    hlay3->addWidget(bt62);
    hlay3->addWidget(bt63);
    //Qt中可以设定控件的拉伸系数，也可以理解为控件的缩放比例。
    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("下一页内容"));
    connect(bt4,&QPushButton::clicked,[&](){
       on_pushButton_clicked();
    });//设置信号与槽  上一章已经出过文章了

}

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

//网格布局
void MainWindow::on_pushButton_clicked()
{
    win->hide();//隐藏上一个窗口

    // 构建控件 头像、用户名、密码输入框等
    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);//设置宽
    pUserLineEdit->setFixedWidth(200);//设置宽

    // 设置头像
    QPixmap pixmap("C:/Users/SuJieYin/Pictures/Saved Pictures/2.png");
    pImageLabel->setFixedSize(90, 90);
    pImageLabel->setPixmap(pixmap);
    pImageLabel->setScaledContents(true);//图片适应标签

    // 设置文本
    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);//设置上一页在第三行第四列

    connect(page_up,&QPushButton::clicked,[&](){
       win->show();
    });
    // 设置水平间距
    pLayout->setHorizontalSpacing(10);
    // 设置垂直间距
    pLayout->setVerticalSpacing(10);
    // 设置外间距
    pLayout->setContentsMargins(10, 10, 10, 10);//边框间距设置
    newweigdet->setLayout(pLayout);//添加进窗口部件
    newweigdet->show();//显示窗口部件
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

ui界面设计

---

由于是通过纯代码实现，所以ui界面是空的，不信你看：

实际具体细看代码如何实现，注释的已经很清晰了。

登录界面为例

以下如图：第一页

实际运行CTRL+R，点击下一页如图：

总结

---

学习QT并不是一朝一夕，庞大的函数库，需要巨大的精力投入学习，掌握基础方法后，通过QT手册边学边做，而布局管理器几乎所有项目都要用到，美观的外表非常的重要。
我也只是掌握了九牛一毛，但我会坚持学习，希望我们都有一份毅力，不断的加强实力，结束！

---