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

Так же мы реализуем механизм смены размера виджета.

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

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

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

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

Запустим:

Заключение 

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

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

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

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