Qt窗体五种Ui布局方式_qtui设计界面布局

Qt五种布局方式

水平布局（QHBoxLayout）

选中需要进行布局的控件，可以用快捷键Ctrl+H进行水平布局。

代码实现

#include <QHBoxLayout>

	// 1.水平布局
    QWidget *Hwidget = new QWidget(this);
    QPushButton *HBtnA = new QPushButton("A", Hwidget);
    QPushButton *HBtnB = new QPushButton("B", Hwidget);
    QPushButton *HBtnC = new QPushButton("C", Hwidget);
    QPushButton *HBtnD = new QPushButton("D", Hwidget);

    // 把控件添加到布局
    QHBoxLayout *HLayout = new QHBoxLayout(Hwidget);
    HLayout->addWidget(HBtnA);
    HLayout->addWidget(HBtnB);
    HLayout->addWidget(HBtnC);
    HLayout->addWidget(HBtnD);

    // 把布局设置到Widget中
    Hwidget->setLayout(HLayout);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

垂直布局（QVBoxLayout）

代码实现

#include <QVBoxLayout>

	// 2.垂直布局
    QWidget *Vwidget = new QWidget(this);
    QPushButton *VBtnA = new QPushButton("A", Vwidget);
    QPushButton *VBtnB = new QPushButton("B", Vwidget);
    QPushButton *VBtnC = new QPushButton("C", Vwidget);
    QPushButton *VBtnD = new QPushButton("D", Vwidget);

    // 把控件添加到布局
    QVBoxLayout *VLayout = new QVBoxLayout(Vwidget);
    VLayout->addWidget(VBtnA);
    VLayout->addWidget(VBtnB);
    VLayout->addWidget(VBtnC);
    VLayout->addWidget(VBtnD);

    // 把布局设置到Widget中
    Vwidget->setLayout(VLayout);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

网格布局（QGridLayout）

代码实现

#include <QGridLayout>
	// 3.网格布局
    QWidget *GWidget = new QWidget(this);
    GWidget->move(0, this->height() / 3);
    QPushButton *GBtnA = new QPushButton("A", GWidget);
    QPushButton *GBtnB = new QPushButton("B", GWidget);
    QPushButton *GBtnC = new QPushButton("C", GWidget);
    QPushButton *GBtnD = new QPushButton("D", GWidget);
    QPushButton *GBtnE = new QPushButton("E", GWidget);
    // 把控件添加到布局
    QGridLayout *GLayout = new QGridLayout(GWidget);
    GLayout->addWidget(GBtnA, 0, 0);
    GLayout->addWidget(GBtnB, 1, 0);
    GLayout->addWidget(GBtnC, 0, 1);
    GLayout->addWidget(GBtnD, 1, 1);
    // (行， 列， 所占的行， 所占的列)
    GLayout->addWidget(GBtnE, 2, 0, 1, 2);
    GWidget->setLayout(GLayout);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

表单布局（QFormLayout）

代码实现

#include <QFormLayout>
    // 4.表单布局

    QWidget *FWidget = new QWidget(this);
    FWidget->move(this->width() / 2, this->height() / 3);

    QLineEdit *nameText = new QLineEdit(FWidget);
    QLineEdit *sexText = new QLineEdit(FWidget);
    QLineEdit *ageText = new QLineEdit(FWidget);

    QFormLayout *FLayout = new QFormLayout(FWidget);
    FLayout->addRow("姓名：", nameText);
    FLayout->addRow("性别：", sexText);
    FLayout->addRow("年龄：", ageText);

    FWidget->setLayout(FLayout);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

拆分器

代码实现

#include <QSplitter>
QSplitter *HSplitter = new QSplitter(Qt::Horizontal, this);
QPushButton *SBtn = new QPushButton("S", this);
QTextEdit *text = new QTextEdit(this);

HSplitter->addWidget(SBtn);
HSplitter->addWidget(text);
1
2
3
4
5
6
7

布局小技巧

在 widget 中的控件可以进行水平、垂直、栅格布局等操作，比较灵活。我们可以通过绘制widget窗口，把控件放到widget里面使用快捷键进行布局（点击上方功能栏也可以）