Мы будем использовать проект из предыдущей статьи.
Подготовка формы
Для начала очистим конструктор главной формы от лишнего кода и удалим все слоты:
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.