当前位置：首页 > news >正文

Qt Designer 中实现布局比例的方法和简单实例

news 2025/10/21 12:53:25

一、使用布局管理器（Layout）是基础

Qt Designer 中常用的布局管理器有：

垂直布局（Vertical Layout）
水平布局（Horizontal Layout）
网格布局（Grid Layout）
表单布局（Form Layout）

可以通过右键控件 → Lay Out in ... 来应用布局。

二、实现比例的核心：使用“伸展因子”（Stretch）

在水平或垂直布局中，每个子控件默认占据等宽/等高区域。若要控制不同控件的空间占比，需调整它们的：

Stretch 因子
Size Policy

示例：水平布局中控件占比为 1:2:1

步骤：

拖入 3 个控件（例如 QPushButton）到一个水平布局（QHBoxLayout）中。
选中布局，在 属性编辑器中设置：
- 选中每个控件，在属性栏中找到 horizontalStretch 属性：
  - 第一个控件设为 1
  - 第二个控件设为 2
  - 第三个控件设为 1
若使用代码补充（例如用 .ui 文件加载后），你可以这样设置：

ui->horizontalLayout->setStretch(0, 1);  // 第0个控件
ui->horizontalLayout->setStretch(1, 2);  // 第1个控件
ui->horizontalLayout->setStretch(2, 1);  // 第2个控件

三、Size Policy 控制控件可扩展性

对于某些控件（如 QLabel 或 QPushButton），默认 Size Policy 可能禁止它们拉伸。

常用设置：

Preferred：正常尺寸，可伸缩
Expanding：会尽量扩展填满布局
Fixed：尺寸固定，不伸缩

可在 Designer 中调整控件的 SizePolicy 属性：

方向	设置推荐值
horizontal	`Preferred` 或 `Expanding`
vertical	`Fixed` 或 `Preferred`

四、Grid Layout 中的比例设置

在网格布局中，每行/列的比例可通过 拉动边框线 来设定，但程序中可以通过如下方式：

ui->gridLayout->setColumnStretch(0, 1);  // 第0列权重为1
ui->gridLayout->setColumnStretch(1, 2);  // 第1列权重为2

五、实践小试

示例：设计一个左侧菜单栏 + 右侧显示区（比例 1:3）

拖入 QHBoxLayout
左边放一个 QWidget，右边放一个 QStackedWidget 或 QFrame

设置伸展因子：

ui->mainLayout->setStretch(0, 1);  // 左侧菜单栏
ui->mainLayout->setStretch(1, 3);  // 右侧内容区

六、使用总结技巧

方法	功能
Layout → Stretch	控制空间分配比例
Layout → SizePolicy	控制控件是否可伸缩
布局嵌套	复杂界面中常用
`.ui` + C++ 后端控制	灵活精确设置布局行为

七、综合示例

下面是一个使用 Qt Designer 创建布局比例（如左侧1：右侧3）控制的完整项目模板，包括 .pro 工程文件、main.cpp、mainwindow.{h,cpp} 和 .ui 文件的结构说明：

// QtDesignerTemplate.pro
QT += widgets
SOURCES += main.cpp
HEADERS += mainwindow.h
FORMS += mainwindow.ui

// main.cpp
#include “mainwindow.h”
#include

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

// mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
Q_OBJECT

public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();

private:
Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

// mainwindow.cpp
#include “mainwindow.h”
#include “ui_mainwindow.h”

MainWindow::MainWindow(QWidget *parent)

QMainWindow(parent)
, ui(new Ui::MainWindow)
{
ui->setupUi(this);

// 设置左侧与右侧布局比例为 1:3
ui->horizontalLayout->setStretch(0, 1); // 左侧菜单区
ui->horizontalLayout->setStretch(1, 3); // 右侧显示区

}

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

// mainwindow.ui（需在 Qt Designer 中创建）
// 布局结构：
// QWidget（主窗口中央区域）
// └── QHBoxLayout (objectName: horizontalLayout)
// ├── QWidget (左侧菜单区，可放按钮组)
// └── QStackedWidget 或 QFrame（右侧显示区域）

说明：