Qt - QSplitter组件功能及用法

QSplitter 是 Qt 中的一个布局管理组件，主要用于创建可拖动的分隔条，让用户能够动态调整子控件的大小。

 在 Qt Designer（UI 设计界面）中，QSplitter 确实不会像按钮、标签那样直接出现在左侧的组件列表中。这是因为 QSplitter 的使用方式比较特殊。

 

在 Qt Designer 中创建 QSplitter 的 3 种方法

方法 1：使用布局菜单（最常用）

步骤：

1. 在界面上放置两个或多个想要分隔的控件（如 QTextEdit、QListWidget 等）
2. 按住 Ctrl 键，同时选中这些控件
3. 右键点击选中的控件
4. 选择布局菜单中的：- "使用分裂器水平布局" (Lay Out Horizontally in Splitter)- 或 "使用分裂器垂直布局" (Lay Out Vertically in Splitter)

图示：

text

[QTextEdit]  [QListWidget]    // 选中这两个控件↓
右键 → 布局 → 使用分裂器水平布局↓
[QTextEdit | 分隔条 | QListWidget]  // 现在可以拖动分隔条了

方法 2：使用工具栏按钮

text

1. 选中多个控件
2. 在工具栏中找到布局按钮：- "水平分裂器布局" 图标：通常显示为两个矩形中间有分隔条- "垂直分裂器布局" 图标
3. 点击相应按钮即可

方法 3：在对象查看器中提升为 QSplitter

步骤：

1. 放置一个 QFrame 或 QWidget 作为容器
2. 右键点击该容器 → "提升为..."
3. 在对话框中：- "提升的类名称": 输入 "QSplitter"- "头文件": 输入 "QSplitter"
4. 点击 "添加" 然后 "提升"

 

1. 核心功能

• 可调整区域：通过拖动分隔条来调整相邻控件的大小比例

• 灵活布局：支持水平和垂直方向的分隔

• 嵌套使用：可以嵌套多个 QSplitter 实现复杂布局

2. 基本用法示例

cpp

// 创建水平分隔器
QSplitter *splitter = new QSplitter(Qt::Horizontal);// 添加子控件
QTextEdit *leftWidget = new QTextEdit;
QTextEdit *rightWidget = new QTextEdit;splitter->addWidget(leftWidget);
splitter->addWidget(rightWidget);// 设置初始比例
splitter->setSizes(QList<int>() << 200 << 400);

3. 常用设置

cpp

// 设置方向（水平或垂直）
splitter->setOrientation(Qt::Vertical);// 设置子控件的最小大小
splitter->setMinimumSize(100, 100);// 设置是否可以折叠（双击分隔条）
splitter->setCollapsible(0, true);  // 第一个控件可折叠// 设置拖动手柄样式
splitter->setHandleWidth(10);
splitter->setOpaqueResize(true);  // 实时预览调整效果

4. 嵌套使用示例

cpp

// 创建主水平分隔器
QSplitter *mainSplitter = new QSplitter(Qt::Horizontal);// 左侧垂直分隔器
QSplitter *leftSplitter = new QSplitter(Qt::Vertical);
leftSplitter->addWidget(new QTextEdit);
leftSplitter->addWidget(new QTextEdit);// 右侧区域
QTextEdit *rightWidget = new QTextEdit;mainSplitter->addWidget(leftSplitter);
mainSplitter->addWidget(rightWidget);

5. 信号和槽

cpp

// 当分隔条位置改变时发出的信号
connect(splitter, &QSplitter::splitterMoved, [](int pos, int index){qDebug() << "分隔条位置改变：" << pos;});

6. 与布局管理器的比较

 

 

特性	QSplitter	布局管理器（QVBoxLayout等）
动态调整	✅ 用户可拖动调整	❌ 固定比例
布局方向	水平/垂直	多种布局方式
嵌套支持	✅	✅
代码复杂度	简单	相对复杂

 

7. 样式定制

// 自定义分隔条样式
splitter->setStyleSheet("QSplitter::handle {""    background-color: gray;""    border: 1px solid darkgray;""}"
);