Расширяем функционал виджета - меняем цвет и размер - Виджеты (компоненты) в Qt5.

Мы будем использовать проект из предыдущей статьи.

Подготовка формы

Для начала очистим конструктор главной формы от лишнего кода и удалим все слоты:

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QVBoxLayout *vlay = new QVBoxLayout();

    QHBoxLayout *hlay1 = new QHBoxLayout();

    lamp = new QLampWidget();
    hlay1->addWidget(lamp);
    vlay->addLayout(hlay1);

    hlay1->addStretch(1);

    vlay->addStretch(1);

    ui->centralwidget->setLayout(vlay);

}

Устанавливаем цвет отключенной лампы

Допустим, нам нужно, чтобы во включенном состоянии лампочка горела зеленым, а в выключенном – красным.

Добавим в класс приватное поле

    QString offcolor;

И методы для него

QString QLampWidget::getOffcolor() const
{
    return offcolor;
}

void QLampWidget::setOffcolor(const QString &value)
{
    offcolor = value;
}

Добавим конструктор для установки цвета и внесем изменения в остальные конструкторы: 

QLampWidget::QLampWidget(QWidget *parent)
{
    this->setParent(parent);
    this->setFixedWidth(32);
    this->setFixedHeight(32);
    this->setStatus(QLampWidget::on);
    this->color = "#f00";
    this->offColor = "#808080";
}

QLampWidget::QLampWidget()
{
    this->setFixedWidth(32);
    this->setFixedHeight(32);
    this->setStatus(QLampWidget::on);
    this->color = "#f00";
    this->offColor = "#808080";
}

QLampWidget::QLampWidget(QString color)
{
    this->setFixedWidth(32);
    this->setFixedHeight(32);
    this->color = color;
    this->setStatus(QLampWidget::on);
    this->offColor = "#808080";
}


QLampWidget::QLampWidget(QString color, int status)
{
    this->setFixedWidth(32);
    this->setFixedHeight(32);
    this->color = color;
    this->setStatus(status);
    this->offColor = "#808080";
}

QLampWidget::QLampWidget(QString color, QString offcolor, int status)
{
    this->setFixedWidth(32);
    this->setFixedHeight(32);
    this->color = color;
    this->offColor = offcolor;
    this->setStatus(status);
}

Внесем изменения в метод paintEvent(): 

    QString offColor = this->offColor;
    QColor mainColorOff = QColor(offColor);
    QColor subColorOff = QColor(offColor);
    subColorOff.setHsl(0,100,95,0);

    QLinearGradient linearGrad(QPointF(4, 4), QPointF(28, 28));

    if (this->getStatus()==QLampWidget::on)
    {
        linearGrad.setColorAt(0, subColorOn);
        linearGrad.setColorAt(1, mainColorOn);
    } else  {
        linearGrad.setColorAt(0, subColorOff);
        linearGrad.setColorAt(1, mainColorOff);
    }


    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    painter.setPen(QPen(QColor("#f00"), 0.1));
    painter.setBrush(linearGrad);

    painter.drawEllipse(QRectF(4,4,24,24));

}

Внесем изменения в конструктор формы, для простоты добавим еще одну лампочку. Первая будет во включенном состоянии, вторая в выключенном.

Запустим

Как видите включенная лампочка зеленая, выключенная – красная.

Устанавливаем размер лампочки

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

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

void QLampWidget::setSize(int width, int height)
{
    this->setFixedWidth(width);
    this->setFixedHeight(height);
}

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

QLampWidget::QLampWidget(QString color, QString offcolor, int status, int wwidth, int wheight)
{
    this->color = color;
    this->offColor = offcolor;
    this->setStatus(status);
    this->setSize(wwidth, wheight);
}

Изменим код в конструкторе формы:

    QVBoxLayout *vlay = new QVBoxLayout();

    QHBoxLayout *hlay1 = new QHBoxLayout();

    lamp = new QLampWidget("#557d00","#F00",QLampWidget::on, 32, 32);
    hlay1->addWidget(lamp);

    lamp2 = new QLampWidget("#557d00","#F00",QLampWidget::off, 64, 64);
    hlay1->addWidget(lamp2);

    vlay->addLayout(hlay1);

    hlay1->addStretch(1);

    vlay->addStretch(1);

    ui->centralwidget->setLayout(vlay);

Изменим метод paintEvent(): 

void QLampWidget::paintEvent(QPaintEvent *event)
{
    QString onColor = this->color;
    QColor mainColorOn = QColor(onColor);
    QColor subColorOn = QColor(onColor);
    subColorOn.setHsl(0,100,95,0);


    QString aoffColor = this->offColor;
    QColor mainColorOff = QColor(aoffColor);
    QColor subColorOff = QColor(aoffColor);
    subColorOff.setHsl(0,100,95,0);

    QLinearGradient linearGrad(QPointF(4, 4), QPointF(this->width()-4, this->height()-4));

    if (this->getStatus()==QLampWidget::on)
    {
        linearGrad.setColorAt(0, subColorOn);
        linearGrad.setColorAt(1, mainColorOn);
    } else  {
        linearGrad.setColorAt(0, subColorOff);
        linearGrad.setColorAt(1, mainColorOff);
    }


    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    painter.setPen(QPen(QColor("#f00"), 0.1));
    painter.setBrush(linearGrad);

    painter.drawEllipse(QRectF(4,4,this->width()-8,this->height()-8)); 
}

Запустим:

Заключение 

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

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

В следующей статье мы рассмотрим механизм взаимодействия с виджетом с помощью мыши - одинарный и двойной щелчок.

Скачать исходный код проекта вы можете с Github.