×
Namespaces

Variants
Actions

Изменение внешнего вида объектов формы

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

Совместимость
Платформа(ы):
Symbian

Статья
Автор: night_amir (20 Dec 2009)
Последнее редактирование: hamishwillee (08 May 2013)


Общая информация

Разберем внешний вид графических элементов формы - кнопок, текстбоксов, списков и тд. При создании стандартной кнопки мы увидим весьма некрасивого вида, который зачастую не спишется в дизайн программы (если таковой есть). Выглядеть она будет вот так:



Appfullscrqt.PNG

Думаю, такой вид многим не понравится, и будет желание его изменить. В этом Qt Creator дает нам инструментов. Вернее инструмент один, а вот параметров много! Итак, чтобы изменить внешний вид любого объекта формы жмем правой кнопкой мыши по нему и выбираем пункт меню "Изменить styleSheet". Откроется окно определения стиля объекта, в котором вы можете абсолютно произвольно задавать параметры цветов, размеров, границ и других параметров.

Вот описание некоторых из них:

color: rgb(0, 255, 29); - цвет шрифта
border-color: rgb(116, 211, 255); - цвет обводки
font: 75 italic 16pt "Mistral"; - задание стиля шрифта
text-decoration: underline; - подчеркивание

Используя этот редактор стилей, можно смастерить что-то наподобие этого:

Qtstyle.jpg

Очень удобно то, что Qt Creator выдает вам списки со всеми возможными параметрами для каждого элемента. Кроме того, есть анализатор правильности задания таблицы стиля.


Для быстрого старта

Чтобы увидеть работу таблицы стилей, создайте приложение и пропишите в исходнике:

#include <QApplication>
#include <QPushButton>
#include <QLabel>
#include <QWidget>
#include <QVBoxLayout>
#include<QLineEdit>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget *win = new QWidget;
QVBoxLayout *layout = new QVBoxLayout;
QPushButton *button = new QPushButton("Click");
QLabel *label = new QLabel("Hello");
QLineEdit *line=new QLineEdit();
win->setStyleSheet("* { color: #676767;border-style:dashed ; border-width: 4px; border-color: #00FFFF; padding: 7px}}");
button->setStyleSheet("* { background-color: rgb(255,125,100) }");
label->setStyleSheet("* { background-color: blue }");
line->setStyleSheet("*{background-color:yellow}");
layout->addWidget(label);
 
layout->addWidget(button);
layout->addWidget(line);
win->setLayout(layout);
win->showMaximized();
return app.exec();
}

Вот что вы увидите:
Style1.JPG

This page was last modified on 8 May 2013, at 03:00.
86 page views in the last 30 days.
×