简述
QSplitter拆分器是一个布局控件。用户通过拖动它们之间的边界来控制子部件的大小。 在不确定子部件UI大小时,可以用此控件布局,让用户自行调整控件尺寸。
属性
名称 类型 描述
childrenCollapsible bool 用户是否可以将子部件的大小调整为0。默认情况下,子控件是可折叠的。
handleWidth int
拆分器操作区域的宽度。默认值取决于用户使用的平台以及样式偏好设置。
opaqueResize bool
如果在交互移动拆分器时动态(不透明)调整部件的大小,则返回true,否则返回false。
orientation Qt::Orientation 拆分器的方向,默认情况下,方向是水平的。可设置属性为: Qt::Horizontal 和 Qt::Vertical。
如何使用此控件
在Qt Designer中,拖入QListWidget 和 QTabWidget控件之后,选中它们点击右键,选择使用拆分器水平布局。
接着就是给主界面布局,在空白区域点击右键,选择水平布局 和 垂直布局均可,因为此时,QListWidget 和 QTabWidget控件已经处于拆分布局中,对于主界面而言,它们是一个整体,没有其它子控件了。 将上述例子运行起来,效果如下:
在代码中使用QSplitter
接下来介绍如何在代码中使用QSplitter。以下是示例:
#include "mainwindow.h" #include "ui_mainwindow.h"#include <QListWidget> #include <QTabWidget> #include <QSplitter> #include <QVBoxLayout>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);//拆分器布局,默认是水平布局QSplitter *splitter = new QSplitter;QListWidget *listWidget = new QListWidget(this);QTabWidget *tabWidget = new QTabWidget(this);tabWidget->insertTab(0, new QWidget(this), "tab 1");tabWidget->insertTab(1, new QWidget(this), "tab 2");//加入子部件splitter->addWidget(listWidget);splitter->addWidget(tabWidget);//主界面布局,水平或者垂直均可QVBoxLayout* vlay = new QVBoxLayout;vlay->addWidget(splitter);ui->centralwidget->setLayout(vlay);}MainWindow::~MainWindow() {delete ui; }
编译运行后是如下模样:
问题来了
在实际的项目开发过程中,左侧的QListWidget控件是用来做内容导航的,默认的布局大小肯定不符合你的需求,而且同时要求在界面拉伸的时候,保持一定的比例,接下来开始解决这个问题。
方法1:设置拉伸比例
在布局设置完毕后,加入如下代码,作用是设置子控件的拉伸比例。setStretchFactor方法的参数分别是子控件索引、拉伸参数。
//设置拉伸比例splitter->setStretchFactor(0, 1);splitter->setStretchFactor(1, 9);
运行之后,看上去布局比列好很多了:
方法2:设置尺寸列表
加入resizeEvent事件,在其中使用 QSplitter::setSizes(const QList<int> &list) 方法,也可以达到同样的目的。 改造例子后,代码如下:
#include "mainwindow.h" #include "ui_mainwindow.h"#include <QListWidget> #include <QTabWidget> #include <QSplitter> #include <QVBoxLayout>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this);//拆分器布局,默认是水平布局QSplitter *splitter = new QSplitter;QListWidget *listWidget = new QListWidget(this);QTabWidget *tabWidget = new QTabWidget(this);tabWidget->insertTab(0, new QWidget(this), "tab 1");tabWidget->insertTab(1, new QWidget(this), "tab 2");//加入子部件splitter->addWidget(listWidget);splitter->addWidget(tabWidget);//主界面布局,水平或者垂直均可QVBoxLayout* vlay = new QVBoxLayout;vlay->addWidget(splitter);ui->centralwidget->setLayout(vlay); }MainWindow::~MainWindow() {delete ui; }void MainWindow::resizeEvent(QResizeEvent*) {//找到拆分器QSplitter *splitter = this->findChild<QSplitter*>();if (splitter) {//水平拆分布局,使用控件宽度。 垂直拆分布局,使用控件高度。int left_w = 180;int right_w = splitter->size().width() - left_w;splitter->setSizes( { left_w, right_w } );} }
原文链接:Qt布局之QSplitter