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

【QT】一个界面中嵌入其它界面（三）

news 来源：原创 2025/5/20 5:10:46

在 Qt 中，通过 UI 设计 或 代码布局 实现界面 A 中同时显示界面 B 和 C，并精确指定它们的位置，可以通过以下两种方式实现。以下是详细步骤和完整代码：

方法 0：使用 Qt Designer 可视化布局

通过 Qt Designer 拖拽控件并设置布局，直观控制子界面的位置。

步骤

创建子界面 B 和 C：
- 新建两个自定义 QWidget 类（如 WidgetB 和 WidgetC），并在 Qt Designer 中设计它们的 UI。
- 保存为 .ui 文件（例如 widgetb.ui 和 widgetc.ui）。
提升为自定义控件：
- 在主界面 A 的 .ui 文件中，拖入两个 QGridLayout 控件。
- 两个控件分别重命名为 WidgetB_gl 和 WidgetC_gl。
设置布局或绝对位置：

WidgetB* widgetb= new WidgetB(this);
WidgetC* widgetc= new WidgetC(this);ui->WidgetB_gl->addWidget(widgetb); 
ui->WidgetC_gl->addWidget(widgetc);

方法 1：使用 Qt Designer 可视化布局

通过 Qt Designer 拖拽控件并设置布局，直观控制子界面的位置。

步骤

创建子界面 B 和 C：
- 新建两个自定义 QWidget 类（如 WidgetB 和 WidgetC），并在 Qt Designer 中设计它们的 UI。
- 保存为 .ui 文件（例如 widgetb.ui 和 widgetc.ui）。
提升为自定义控件：
- 在主界面 A 的 .ui 文件中，拖入两个 QWidget 控件。
- 右键点击这两个 QWidget，选择 Promote to…，分别提升为 WidgetB 和 WidgetC。
设置布局或绝对位置：
- 使用布局管理器：将界面 B 和 C 拖入 QGridLayout 或 QHBoxLayout/QVBoxLayout，调整行列位置。
- 绝对位置：取消布局管理器，直接拖拽调整 WidgetB 和 WidgetC 的位置和大小。

方法 2：纯代码实现布局

通过代码动态创建子界面并添加到指定位置。

完整代码示例

1. 子界面 B 和 C 的定义

// WidgetB.h
#ifndef WIDGETB_H
#define WIDGETB_H#include <QWidget>
#include <QLabel>
#include <QVBoxLayout>class WidgetB : public QWidget {Q_OBJECT
public:explicit WidgetB(QWidget* parent = nullptr);
};#endif // WIDGETB_H// WidgetB.cpp
#include "WidgetB.h"WidgetB::WidgetB(QWidget* parent) : QWidget(parent) {QLabel* label = new QLabel("子界面 B", this);label->setAlignment(Qt::AlignCenter);QVBoxLayout* layout = new QVBoxLayout(this);layout->addWidget(label);setStyleSheet("background-color: #FFCCCC;"); // 粉色背景
}

// WidgetC.h
#ifndef WIDGETC_H
#define WIDGETC_H#include <QWidget>
#include <QLabel>
#include <QVBoxLayout>class WidgetC : public QWidget {Q_OBJECT
public:explicit WidgetC(QWidget* parent = nullptr);
};#endif // WIDGETC_H// WidgetC.cpp
#include "WidgetC.h"WidgetC::WidgetC(QWidget* parent) : QWidget(parent) {QLabel* label = new QLabel("子界面 C", this);label->setAlignment(Qt::AlignCenter);QVBoxLayout* layout = new QVBoxLayout(this);layout->addWidget(label);setStyleSheet("background-color: #CCFFCC;"); // 绿色背景
}

2. 主界面 A 的实现

// WidgetA.h
#ifndef WIDGETA_H
#define WIDGETA_H#include <QWidget>
#include <QGridLayout>
#include "WidgetB.h"
#include "WidgetC.h"class WidgetA : public QWidget {Q_OBJECT
public:explicit WidgetA(QWidget* parent = nullptr);
};#endif // WIDGETA_H// WidgetA.cpp
#include "WidgetA.h"WidgetA::WidgetA(QWidget* parent) : QWidget(parent) {// 创建网格布局QGridLayout* gridLayout = new QGridLayout(this);// 创建子界面 B 和 C，并指定父对象为 AWidgetB* widgetB = new WidgetB(this);WidgetC* widgetC = new WidgetC(this);// 将 B 和 C 添加到网格布局的指定位置gridLayout->addWidget(widgetB, 0, 0);  // 第 0 行，第 0 列（左上角）gridLayout->addWidget(widgetC, 1, 1);  // 第 1 行，第 1 列（右下角）// 设置布局边距和间距gridLayout->setContentsMargins(20, 20, 20, 20);gridLayout->setSpacing(15);// 设置主界面背景色setStyleSheet("background-color: #F0F0F0;");resize(600, 400); // 初始窗口大小
}

3. 主函数

// main.cpp
#include <QApplication>
#include "WidgetA.h"int main(int argc, char* argv[]) {QApplication app(argc, argv);WidgetA widgetA;widgetA.setWindowTitle("多子界面布局示例");widgetA.show();return app.exec();
}

效果说明

布局管理器控制：
- 子界面 B 位于左上角（第 0 行第 0 列），子界面 C 位于右下角（第 1 行第 1 列）。
- 窗口缩放时，子界面会按布局比例自动调整位置和大小。
自定义样式：
- 子界面 B 为粉色背景，子界面 C 为绿色背景，主界面为灰色背景，便于观察位置。

扩展：手动指定绝对坐标

如果希望子界面位置固定（不随窗口缩放变化），可以使用 setGeometry：

// WidgetA.cpp（替代布局代码）
WidgetA::WidgetA(QWidget* parent) : QWidget(parent) {// 创建子界面 B 和 CWidgetB* widgetB = new WidgetB(this);WidgetC* widgetC = new WidgetC(this);// 手动设置位置和大小widgetB->setGeometry(50, 50, 200, 150);   // (x, y, width, height)widgetC->setGeometry(300, 200, 200, 150);// 设置主界面背景色和大小setStyleSheet("background-color: #F0F0F0;");resize(600, 400);
}

关键点总结

父子关系：确保子界面（B 和 C）的父对象为 WidgetA（通过构造函数或 setParent）。
布局管理器：
- 使用 QGridLayout、QHBoxLayout 或 QVBoxLayout 实现动态布局。
- 通过行列索引（如 gridLayout->addWidget(widget, row, col)）精确控制位置。
绝对坐标：
- 使用 setGeometry(x, y, width, height) 或 move() + resize() 固定位置。
- 需在窗口大小变化事件（resizeEvent）中手动调整子界面位置。
样式调试：通过 setStyleSheet 设置背景色，直观观察子界面位置。