跳至正文
View Categories

1 min read

Qt程序的UI界面设计有可视化拖拽和编码实现两种方式。

当界面组件较少且不动态变化时建议使用Qt Creator的设计功能生成对应的*.UI文件。

当界面组件复杂且多变时建议使用Qt的布局相关类通过编码进行UI设计。

第一种布局所见即所得比较直观，第二种布局方式灵活度比较高且后期维护方便。

水平布局 #

我们在UI界面随意拖放三个按钮，或者其他组件。

如果想让三个按钮在同一水平位置，通过鼠标拖动很难精准控制，这时候就需要用到布局管理器。

选中三个按钮后，点击上方水平布局按钮，可实现三个按钮的水平排列。

效果如下。

垂直布局 #

三个按钮垂直排列。

分裂水平布局 #

水平布局，且组件可以自适应布局的大小。

分裂垂直布局 #

垂直布局，组件可以自适应布局的大小。

表格布局 #

在窗体布局中布局，可以做到像表格一样整齐的排列。

栅格布局 #

点击主窗口不选中组件，设置栅格布局可实现组件的位置随着窗口大小变化而变化（自适应）。

打破布局 #

打破布局不是一种布局方式，而是删除之前设置的布局，也就是没有布局。

Qt Creator的UI自带布局到此结束，上述通过鼠标点击进行布局最终也是生成了代码，只不过是IDE自动完成的。

下来介绍如何直接在代码中进行布局管理。

QHBoxLayout #

演示代码。

     QWidget *window = new QWidget;
     QPushButton *button1 = new QPushButton("One");
     QPushButton *button2 = new QPushButton("Two");
     QPushButton *button3 = new QPushButton("Three");
     QPushButton *button4 = new QPushButton("Four");
     QPushButton *button5 = new QPushButton("Five");

     QHBoxLayout *layout = new QHBoxLayout(window);
     layout->addWidget(button1);
     layout->addWidget(button2);
     layout->addWidget(button3);
     layout->addWidget(button4);
     layout->addWidget(button5);


     window->show();

QVBoxLayout

代码演示。

     QWidget *window = new QWidget;
     QPushButton *button1 = new QPushButton("One");
     QPushButton *button2 = new QPushButton("Two");
     QPushButton *button3 = new QPushButton("Three");
     QPushButton *button4 = new QPushButton("Four");
     QPushButton *button5 = new QPushButton("Five");

     QVBoxLayout *layout = new QVBoxLayout(window);
     layout->addWidget(button1);
     layout->addWidget(button2);
     layout->addWidget(button3);
     layout->addWidget(button4);
     layout->addWidget(button5);

     window->show();

效果演示。

QGridLayout #

与前面的表格布局类似。

 nameLabel = new QLabel(tr("&Name:"));
 nameLabel->setBuddy(nameLineEdit);

 emailLabel = new QLabel(tr("&Name:"));
 emailLabel->setBuddy(emailLineEdit);

 ageLabel = new QLabel(tr("&Name:"));
 ageLabel->setBuddy(ageSpinBox);

 QGridLayout *gridLayout = new QGridLayout;
 gridLayout->addWidget(nameLabel, 0, 0);
 gridLayout->addWidget(nameLineEdit, 0, 1);
 gridLayout->addWidget(emailLabel, 1, 0);
 gridLayout->addWidget(emailLineEdit, 1, 1);
 gridLayout->addWidget(ageLabel, 2, 0);
 gridLayout->addWidget(ageSpinBox, 2, 1);
 setLayout(gridLayout);

效果演示。

Qt中所有布局相关的类都继承自QLayout类，可在Qt帮助文档中查看更多内容。

What are your Feelings