目录
前言
QT提供了许多种不同的布局管理器，以便于开发者根据自己的需要创建不同的布局。在本文中，我们将介绍QT的五种常用布局：水平布局、垂直布局、网格布局、表单布局和堆栈布局，并分别展示它们的用法和示例代码。运行环境在qt creator，部分例子可能需要添加头文件，自行添加即可。例子我力求最简，演示一下最理想又简单的效果，方便我日后重新用到。
QVBoxLayout（垂直布局）、QHBoxLayout（水平布局）、QGridLayout（网格布局）、QFormLayout（表单布局）和 QStackedLayout（堆栈布局）。
扫描二维码关注公众号，回复：
16531082 查看本文章
一、水平布局（QHBoxLayout）
水平布局按照左到右的顺序水平放置控件，适用于按钮和标签等控件的水平排列。下面用代码演示一下。
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QHBoxLayout *layout = new QHBoxLayout;
QPushButton *button1 = new QPushButton("button1");
QPushButton *button2 = new QPushButton("button2");
QPushButton *button3 = new QPushButton("button3");
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
QWidget widget;
widget.setLayout(layout);
widget.show();
return a.exec();
}效果如下：
二、垂直布局（QVBoxLayout）
垂直布局按照上到下的顺序垂直放置控件，适用于垂直排列的标签、文本框和按钮等控件，当然布局套布局也是可以哒。直接上例子
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QVBoxLayout *layout = new QVBoxLayout;
QPushButton *button1 = new QPushButton("button1");
QPushButton *button2 = new QPushButton("button2");
QPushButton *button3 = new QPushButton("button3");
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
QWidget widget;
widget.setLayout(layout);
widget.show();
return a.exec();
}效果如下：
三、网格布局（QGridLayout）
网格布局将控件放置在一个二维网格中，适用于在窗口中放置多个控件，并可通过设置坐标，设置占的行列数进行摆放。例子
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QGridLayout *layout = new QGridLayout;
QLabel *label1 =new QLabel("label1:");
QLabel *label2 =new QLabel("label2:");
QLineEdit *lineEdit1 = new QLineEdit(" lineEdit1");
QLineEdit *lineEdit2 = new QLineEdit(" lineEdit2");
QPushButton *button1 = new QPushButton("button1");
layout->addWidget(label1, 0, 0);
layout->addWidget(lineEdit1, 0, 1);
layout->addWidget(label2, 1, 0);
layout->addWidget(lineEdit2, 1, 1);
layout->addWidget(button1, 2, 0, 1, 2);
QWidget widget;
widget.setLayout(layout);
widget.show();
return a.exec();
}效果：
四、表单布局（QFormLayout）
表单布局将控件放置在一个二列的网格中，左侧为标签，右侧为输入控件。例子：
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
// MainWindow w;
// w.show();
QFormLayout *layout = new QFormLayout;
QLineEdit *lineEdit1 = new QLineEdit(" lineEdit1");
QLineEdit *lineEdit2 = new QLineEdit(" lineEdit2");
layout->addRow("student_Name:", lineEdit1);
layout->addRow("student_Age:" , lineEdit2);
QWidget widget;
widget.setLayout(layout);
widget.show();
return a.exec();
}效果：
五、堆栈布局（QStackedLayout）
堆栈布局将多个控件堆叠在一起，只有设置当前可见的控件才能被用户看到和操作。在开发中一般是手动触发切换界面，例子：
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
//堆栈容器
QStackedLayout *layout = new QStackedLayout;
QLabel *label1 = new QLabel("hello!大宝犯疆土[*] ，This is widget 1 ");
QLabel *label2 = new QLabel("hello!大宝犯疆土[**]，This is widget 2 ");
QLabel *label3 = new QLabel("hello!大宝犯疆土[***]，This is widget 3 ");
QLabel *label4 = new QLabel("hello!大宝犯疆土[****]，This is widget 4 ");
QLabel *label5 = new QLabel("hello!大宝犯疆土[*****]，This is widget 5 ");
//设置一下字体大小，看的更舒服一点
{
QFont font("Arial", 20);
label1->setFont(font);
label2->setFont(font);
label3->setFont(font);
label4->setFont(font);
label5->setFont(font);
}
layout->addWidget(label1);
layout->addWidget(label2);
layout->addWidget(label3);
layout->addWidget(label4);
layout->addWidget(label5);
layout->setCurrentIndex(0); // 默认显示第0个小部件
//创建一个界面
QWidget *window = new QWidget;
window->setLayout(layout);
window->show();
//增加定时器，可以明显看到切换的堆栈布局效果
QTimer time;
time.start(1000);
static int num = 1;
QObject::connect(&time,&QTimer::timeout,[=]{
layout->setCurrentIndex(num++); // 循环显示
if(num>4)num=0;
});
return a.exec();
}效果图可以看到一秒钟切换一个界面：
六、 开发中界面切换的布局
QStackedWidget 是 Qt 提供的一个窗口部件（QWidget）类，它可以用于显示多个 QWidget 窗口部件，QStackedWidget 主要用于需要在多个 QWidget 窗口部件之间进行切换的场景，方便用户进行操作。记录一下开发中常用的场景。
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
//MainWindow w;
//w.show();
QWidget * window = new QWidget;
QStackedWidget *la_StackedWidget = new QStackedWidget();
// 创建两个页面作为堆栈的子项
QWidget *page1 = new QWidget;
QVBoxLayout *page1Layout = new QVBoxLayout(page1);
QLabel *label1 = new QLabel("这是第一页");
QPushButton *button_1 = new QPushButton("第一页button");
page1Layout->addWidget(label1);
page1Layout->addWidget(button_1);
QWidget *page2 = new QWidget;
QVBoxLayout *page2Layout = new QVBoxLayout(page2);
QLabel *label2 = new QLabel("这是第二页");
QPushButton *button_2 = new QPushButton("第二页button");
page2Layout->addWidget(label2);
page2Layout->addWidget(button_2);
// 添加页面到堆栈中
la_StackedWidget->addWidget(page1);
la_StackedWidget->addWidget(page2);
QListWidget * listWidget_Function = new QListWidget(); //列表框及样式
listWidget_Function->setViewMode(QListView::IconMode);
listWidget_Function->setIconSize(QSize(64,64));
listWidget_Function->setSpacing(5);
listWidget_Function->setResizeMode(QListWidget::Adjust);
listWidget_Function->setMovement(QListWidget::Static);
listWidget_Function->setFixedWidth(120);
listWidget_Function->setStyleSheet("background-color: #FFCEFA;");
//setViewMode(QListView::IconMode) 设置列表框的显示模式为图标模式。
//setIconSize(QSize(64,64)) 设置图标的大小为64*64像素。
//setSpacing(5) 设置图标之间的间距为5像素。
//setResizeMode(QListWidget::Adjust)设置列表框大小自适应子项。
//setMovement(QListWidget::Static) 设置列表框中的子项不可移动。
//setFixedWidth(120) 设置列表框的宽度为120像素。
//setStyleSheet("background-color: #87CEFA;");设置列表框的背景颜色。
for(int i=0;i<2;i++)
{
QListWidgetItem *item = new QListWidgetItem(listWidget_Function);
item->setText(QString("大宝犯疆土 %1").arg(i+1));
item->setTextAlignment(Qt::AlignCenter);
item->setIcon(QIcon(":/img/img/logo1.png")); //兔子图片
}
QObject::connect(listWidget_Function, &QListWidget::currentRowChanged,
la_StackedWidget, &QStackedWidget::setCurrentIndex);
QHBoxLayout *hboxLayout_Form = new QHBoxLayout(); //总布局
hboxLayout_Form->addWidget(listWidget_Function,1); //切换部分
hboxLayout_Form->addWidget(la_StackedWidget,5); //显示部分
// 显示窗口
window->setLayout(hboxLayout_Form);
window->show();
return a.exec();
}效果：当点击列表框1时显示第一个界面，依次类推
