Qt: Step by Step (setStyleSheet)

Привіт. Я продовжую свою серію статей про Qt і сьогодні я розповім про те як додати для нашої Qt-програми ізюминку у вигляді власного дизайну. Все це робиться одним рядком.

Для прикладу візьмемо нашу Hello World App, про яку я написав у попередній статті, і трохи модифікуємо.

#include <QApplication>
#include <QPushButton>

int main (int argc, char *argv[]) {
    QApplication app(argc, argv);
    QPushButton *newbtn = new QPushButton(QObject::tr("Hello World"));
    QObject::connect(newbtn, SIGNAL(clicked()), &app, SLOT(quit()));
    newbtn->resize(180, 40);
    newbtn->show();
    return app.exec();
}

Після того як Ви скомпілюєте даний код, Ви отримаєте приблизно такий результат:

А тепер дамо нашій кнопці деякого забарвлення:

newbtn->setStyleSheet("color: red; background-color: blue;");

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

#include <QApplication>
#include <QPushButton>

int main (int argc, char *argv[]) {
    QApplication app(argc, argv);
    QPushButton *newbtn = new QPushButton(QObject::tr("Hello World"));
    newbtn->setStyleSheet("color: red; background-color: blue;");
    QObject::connect(newbtn, SIGNAL(clicked()), &app, SLOT(quit()));
    newbtn->resize(180, 40);
    newbtn->show();
    return app.exec();
}

А ось так буде виглядати вікно:

Щось не дуже у нас вийшло, тому ще трохи змінимо код, а саме додамо межі кнопки і змінимо колір фону на градієнтну заливку:

newbtn->setStyleSheet("border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde);");

На моїй Ubuntu 10.04 LTS не дуже добре виглядає:

Як Ви вже напевно зрозуміли усі стилі задаються через CSS. Тому хто знайомий із CSS зможе без проблем робити дизайни для Qt-програм.

Ну що ж, фінальний код у нас такий:

#include <QApplication>
#include <QPushButton>

int main (int argc, char *argv[]) {
    QApplication app(argc, argv);
    QPushButton *newbtn = new QPushButton(QObject::tr("Hello World"));
    newbtn->setStyleSheet("border: 2px solid #8f8f91; border-radius: 6px; background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7fa, stop: 1 #dadbde);");
    QObject::connect(newbtn, SIGNAL(clicked()), &app, SLOT(quit()));
    newbtn->resize(180, 40);
    newbtn->show();
    return app.exec();
}

Сподіваюсь я відповів на Ваші запитання щодо стилів у Qt. Можете трохи поекспериментувати і надати кнопці якогось унікального стилю — все це Ваша фантазія.

Коментарі 6

Syancya - 03 травня 2010, 15:16

Відповіли) дякую, обов'язково спробую!

memorizer - 04 травня 2010, 19:09

У наступній версії QT 4.7 буде доступною опція опису довільного UI за допомогою QML(загалом гібрид Javascript + CSS). Її метою є збільшення гнучкості у кодуванні інтерфейсів користувача за рахунок відділення коду для опису UI від логіки програми. Tech preview QT & Creator тут.

coirius - 04 травня 2010, 20:54

То є добре, тому що я зараз ніяк не можу знайти опис стилю який я задав через Qt Designer.

memorizer - 04 травня 2010, 21:11

Підозрюю, що вам варто звернутися до хедера для форми із префіксом ui_ ;)

coirius - 04 травня 2010, 21:13

еее, точно все там знаходиться, дякую за підказку!

memorizer - 04 травня 2010, 21:15

Завжди будь ласка :)

Коментувати
© 2009 - 2020, Розробка - соціальна ІТ спільнота.
Контакти: info@rozrobka.com
Правила користування