Qt/C++ - Урок 010. QSplitter или Как добавить разделитель

QPallete, QSplitter, QSplitter color, QSplitter example, Qt

Качественная компоновка всегда повышает юзабилити приложения и это справедливо для любых видов приложений, от десктопных до мобильных. Одним из таких элементов интерфейса, который может повысить юзабилити является класс QSplitter , который является объектом типа layout с перемещаемым разделителем, который разделяет две области в интерфейсе приложения.

Структура проекта для QSplitter

Структура проекта для QSplitter Структура проекта абсолютно ничем не примечательна и мало интересна, поскольку основные действия будут производиться в дизайнере, а настройку QSplitter в mainwindow.cpp будем производить минимальную.

Пошаговая работа с QSplitter

Первый шаг - Первым делом добавляем два объекта типа layout , в которых будут располагаться элементы интерфейса

Добавление двух layout Второй шаг - Выбираем оба layout зажав Ctrl и кликаем по кнопке "Скомпоновать по горизонтали с разделителем", ну или "Скомпоновать по вертикали с разделителем", смотря кому, что нужно.

Компоновка layout с помощью QSplitter Третий шаг - Растягиваем область, в которой располагается Наш QSplitter. Это необходимо в том случае, если внешний вид Вашего QSplitter повел себя не так, как Вам того хотелось. Для этого выбираем родительский виджет, в котором находится Ваш QSplitter и кликаем по кнопке "Скомпоновать по сетке". В итоге получим результат, подобный рисунку ниже.

Растягиваем область с QSplitter Четвертый шаг - накидаем несколько объектов для наглядности.

Объекты в слоях Пятый шаг - Корректируем программный код, чтобы отрегулировать растяжение областей при запуске приложения и устанавливаем цвет разделителя.

#include "mainwindow.h"
#include "ui_mainwindow.h"
 
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
 
    /* Устанавливаем параметры растяжения областей.
     * Области считаются слева направо.
     * в Методе setStretchFactor вначале устанавливается индекс
     * области, а потом её вес.
     * Таким образом первой области ставим максимальный вес,
     * а второй области минимальный.
     * */
    ui->splitter->setStretchFactor(0,1);
    ui->splitter->setStretchFactor(1,0);
 
    /* Также сразу хочу показать, как выбрать цвет разделителя.
     * Для это нам необходимо воспользоваться классом QPallete,
     * Для которого выбираем цвет фона.
     * */
    QPalette p;
    p.setColor(QPalette::Background, Qt::red);
    /* И устанавливаем палитру на QSplitter
     * */
    ui->splitter->setPalette(p);
}
 
MainWindow::~MainWindow()
{
    delete ui;
}

Итог

В результате приложение будет выглядеть следующим образом.

Приложение с разделителем