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

Для примера мы возьмем пять лампочек, вы можете добавить любое количество.

Виджет-контейнер

Любой виджет может содержать другие виджеты, что позволяет нам создавать виджеты-контейнеры далее Контейнер.

Создадим новый проект– QLamp5Block.

Скопируем файлы

qlampwidget.cpp 
qlampwidget.h

из этого проекта и добавим в новый.

Добавим новый класс для Контейнера - QLapm5BlockWidget

Заголовок 

#ifndef QLAPM5BLOCKWIDGET_H
#define QLAPM5BLOCKWIDGET_H

#include <QWidget>



class QLapm5BlockWidget: public QWidget
{
    Q_OBJECT

public:
    QLapm5BlockWidget();

};

#endif // QLAPM5BLOCKWIDGET_H

Реализация

#include "qlapm5blockwidget.h"

QLapm5BlockWidget::QLapm5BlockWidget()
{

}

Добавляем разметку 

Для того, чтобы добавить виджеты в Контейнер мы должны создать разметку (layout) и привязать её к составному виджету, лампочки же привязываются к разметке. 

В конструктор класса контейнера добавим разметку:

    QHBoxLayout *hlay1 = new QHBoxLayout();

Мы создали горизонтальную разметку – все элементы, размещенные на которой равномерно распределяются по свободному пространству. Подробнее о разметке мы поговорим позже в отдельной статье.

Создаём виджеты 

Создадим наши лампочки:

    QLampWidget *lamp1 = new QLampWidget("#557d00","#F00",QLampWidget::on, 32, "2");
    lamp1->setCaption("L1");
    lamp1->setCaptionAlign(Qt::AlignCenter);
    QLampWidget *lamp2 = new QLampWidget("#557d00","#F00",QLampWidget::on, 32, "2");
    lamp2->setCaption("L2");
    lamp2->setCaptionAlign(Qt::AlignCenter);
    QLampWidget *lamp3 = new QLampWidget("#557d00","#F00",QLampWidget::on, 32, "2");
    lamp3->setCaption("L3");
    lamp3->setCaptionAlign(Qt::AlignCenter);
    QLampWidget *lamp4 = new QLampWidget("#557d00","#F00",QLampWidget::on, 32, "2");
    lamp4->setCaption("L4");
    lamp4->setCaptionAlign(Qt::AlignCenter);
    QLampWidget *lamp5 = new QLampWidget("#557d00","#F00",QLampWidget::on, 32, "2");
    lamp5->setCaption("L5");
    lamp5->setCaptionAlign(Qt::AlignCenter);

Добавляем виджеты к разметке 

Созданные виджеты добавим к горизонтальной разметке:

    hlay1->addWidget(lamp1);
    hlay1->addWidget(lamp2);
    hlay1->addWidget(lamp3);
    hlay1->addWidget(lamp4);
    hlay1->addWidget(lamp5);

Чтобы виджеты находились рядом добавим:

hlay1->addStretch(1);

Мы добавили справа, как бы, пружинку - неважно сколько места занимает наш контейнер, наши виджеты будут «прижаты» к левой его границе и будут занимать минимум места.

Назначим разметку виджету

this->setLayout(hlay1);

Добавим код в конструктор главной формы:

    QVBoxLayout *vlay = new QVBoxLayout();
    QHBoxLayout *hlay1 = new QHBoxLayout();

    QLapm5BlockWidget *block1 =  new QLapm5BlockWidget();

    hlay1->addWidget(block1);

    hlay1->addStretch(1);
    vlay->addItem(hlay1);

    vlay->addStretch(1);

    ui->centralwidget->setLayout(vlay);

Запустим:

Вот мы и создали составной виджет.

Предоставляем доступ к лампочкам 

Но сам по себе виджет это, конечно, хорошо и красиво, но в данный момент мы не имеем возможности управлять лампочками. 

Добавим приватное поле для хранения указателей на лампочки: 

private:
    QList<QLampWidget *> lamps;

Добавим метод для доступа к списку лампочек:

QList<QLampWidget *> QLapm5BlockWidget::getLamps() const
{
    return lamps;
}

В конструктор контейнера добавим

    lamps.append(lamp1);
    lamps.append(lamp2);
    lamps.append(lamp3);
    lamps.append(lamp4);
    lamps.append(lamp5);

Таким образом мы заполняем список ссылок на виджеты.

Изменяем статус лампочек 

Теперь, когда у нас есть доступ к самим лампочкам, мы можем изменить их состояние. Для примера отключим среднюю лампочку:

    block1->getLamps().at(2)->setStatus(QLampWidget::off);

Запустим: 

Заключение 

Сегодня мы рассмотрели создание составного виджета-контейнера. 

Был создан новый класс для виджета. 

Мы создали разметку (layout) для содержимого виджета и добавили к разметке пять лампочек.

Добавили поле класса для хранения ссылок на лампочки.

Отключили среднюю лампочку используя метод для доступа к лампочкам.

Исходный код проекта вы можете найти на GitFlic.