Четверг, 07 января 2021 18:51

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

Россия
Оцените материал
(0 голосов)

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

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

Изменяем цвет подписи

Добавим поле для хранения цвета подписи и сеттер/геттер:  

private:
    QString captionColor;

QString QLampWidget::getCaptionColor() const
{
    return captionColor;
}

void QLampWidget::setCaptionColor(const QString &value)
{
    captionColor = value;
    repaint();
}

 Во все конструкторы виджета добавим строку:

    this->captionColor = "#000";

 В методе paintEvent() перед строкой

    painter.drawText(QPoint(0,40),this->getCaption());

добавим

    painter.setPen(QPen(QColor(this->captionColor), 1));

Запустим:

2021-01-07_17-08-36.png

Подписи стали черными.

Теперь добавим в конструктор главной формы строки:

lamp->setCaptionColor("#F00");
lamp2->setCaptionColor("#00F");

Запустим:

2021-01-07_17-10-25.png

Мы можем контролировать цвет подписей для лампочек.

Изменяем шрифт лампочки

Добавим поле класса для хранения информации о шрифте подписи:  

private:
    QFont captionFont;

QFont QLampWidget::getCaptionFont() const
{
    return captionFont;
}

void QLampWidget::setCaptionFont(const QFont &value)
{
    captionFont = value;
    repaint();
}

Добавим в конструкторы нашего виджета строку:

    this->captionFont = this->font();

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

Добавим в метод paintEvent() перед

painter.drawText(QPoint(0,40),this->getCaption());

строку

painter.setFont(this->captionFont);

Запустим – ничего не изменилось.

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

    lamp->setCaptionFont(QFont("Courier new"));
    lamp2->setCaptionFont(QFont("System"));

Запустим:

2021-01-07_17-20-56.png

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

Чтобы исправить эту ошибку перенесем в методе paintEvent() строку

painter.setFont(this->captionFont);

поместив её перед

QFontMetrics metrics(painter.font());

Запустим:

2021-01-07_17-27-53.png

Теперь текст отображается корректно.

Изменяем размер шрифта

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

lamp->setCaptionFont(QFont("Courier new"));

на строки

    QFont font = QFont("Courier new");
    font.setPixelSize(24);
    lamp->setCaptionFont(font);

Запустим:

2021-01-07_18-34-51.png

Размер шрифта поменялся.

Исправление бага с размером виджета и шрифта

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

    lamp = new QLampWidget("#557d00","#F00",QLampWidget::on, 64, "1");
    hlay1->addWidget(lamp);
    lamp->setCaption("Lamp 1"); 

    QFont font = QFont("Courier new");
    font.setPixelSize(32);
    lamp->setCaptionFont(font);

Запустим:

2021-01-07_18-37-49.png

Текст неправильно отрисовывается по вертикали.

Всё дело в том, что мы не учитываем размер лампочки при выводе текста:

    painter.drawText(QPoint(0,40),this->getCaption());

Исправим эту строку на:

    painter.drawText(QPoint(0,this->getLampSize()+heightOfText/2),this->getCaption());

Запустим:

2021-01-07_18-47-42.png

Теперь вне зависимости от размера лампочки и шрифта подпись находится в верном положении.

Заключение

Сегодня мы добавили возможность изменять цвет подписи нашего виджета.

Были добавлены методы для смены шрифта подписи.

Был рассмотрен способ изменения размера шрифта подписи.

Исправили положение подписи при изменении размера лампочки и шрифта.

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

Прочитано 553 раз Последнее изменение Среда, 13 января 2021 12:10