Расширяем функционал виджета - меняем цвет и размер

29 декабря 2020

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

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

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

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

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

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

Запустим: