Qt布局之QSplitter

CSDN话题挑战赛第2期
参赛话题：Qt应用程序开发

简述

        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 } );
    }
}