Как изменить цвет заполнения ProgressBar или кнопки?

@shyub · Регистрация: 11.07.2013

Author24 — интернет-сервис помощи студентам

Как изменить цвет заполнения ProgressBar или кнопки?

Добрый день всем участникам форума.
Недавно писал программу, в интерфейсе которой необходимо было отображать уровень жидкости. Задачу решил просто: разместил на форме рисунок ёмкости а сверху поставил ProgressBar, изменив цвет отображения прогресса на голубой, а фона – на серый.
Аналогичную задачу решил испробовать на Qt, но оказалось всё значительно сложнее:

Испробовал вот такой вариант, но оказалось, что изменяется фон только текстовой надписи справа от виджета:

C++ (Qt)

    QPalette p;
//    p.setColor(ui->progressBar->backgroundRole(), Qt::blue);
    p.setBrush(ui->progressBar->backgroundRole(),Qt::blue);
    ui->progressBar->setPalette(p);
        ui->progressBar->setAutoFillBackground(true);

Поэксперементировал с такой конструкцией, но ожидаемого результата не получил (меняется только цвет текста):

C++ (Qt)

    QColor c(Qt::red);
 
    QPalette  pal = ui->progressBar->palette();
    pal.setColor(QPalette::Active, QPalette::Foreground, c);
//    pal.setBrush(QPalette::Active, QPalette::Foreground, c);
    ui->progressBar->setPalette(pal);
 
     ui->progressBar->setValue(55); // На всякий случай.

Может это только с компонентом QProgressBar такая “ерунда”?
Испробовал setColor() и setBrush() при всевозможных параметрах для кнопки QPushButton – результат аналогичный (меняется только цвет надписи).

Если кто-нибудь знает, как решить данную задачу, прошу поделиться.

@Flassie · 28.05.2014, 14:12

QSS пробовали?

C++ (Qt)

1 2	QPushButton *b = new QPushButton(this); b->setStyleSheet("background: blue; border: 1px solid black;");

@alexey_rage · 28.05.2014, 14:25

Flassie, только вот так:

C++ (Qt)

1 2	QPushButton *b = new QPushButton(this); b->setStyleSheet("QPushButton{background-color: blue; border: 1px solid black; }");

А вообще, вот:
http://doc.crossplatform.ru/qt... rence.html

@shyub · 28.05.2014, 14:26 **[ТС]**

Да, но это делается при "ручном" размещении компонентов, а хотелось бы размещать компоненты Дизайнером, а потом в конструкторе виджета внести изменения. Возможен ли такой вариант?

@Flassie · 28.05.2014, 14:32

Сообщение от alexey_rage

только вот так:

тогда уж лучше всегда будет

C++ (Qt)

1	b->setStyleSheet("*{background-color: blue; border: 1px solid black; }");

в данном конкретном случае

Сообщение от shyub

Да, но это делается при "ручном" размещении компонентов, а хотелось бы размещать компоненты Дизайнером, а потом в конструкторе виджета внести изменения. Возможен ли такой вариант?

Да. А в чем проблема? У вас есть доступ ко всем элементам формы, вот и устанавливаете QSS на них:

C++ (Qt)

1	ui->pushButton->setStyleSheet("*{background-color: blue;}");

Добавлено через 2 минуты

Не по теме:

Сообщение от alexey_rage

background-color

А существует ли какое-то существенное различие в использовании background и background-color для установки цвета (не картинки) фона?

@shyub · 28.05.2014, 14:58 **[ТС]**

А как узнать, что необходимо указывать в строке

C++ (Qt)

1	ui->pushButton->setStyleSheet("*{background-color: blue;}");

Сдалал то же для ProgressBar, но ничего не изменилось:

C++ (Qt)

1	ui->progressBar_2->setStyleSheet("*{background-color: blue;}");

Чтобы "вытащить", что туда надо писать? Сделал так:

C++ (Qt)

1 2	qDebug()<<ui->progressBar_2->style(); Результат: QStyleSheetStyle(0x12f212a8)

Получившийся результат ни очём не говорит (во всяком случае для меня).

@alexey_rage · 28.05.2014, 15:07

Сообщение от Flassie

А существует ли какое-то существенное различие в использовании background и background-color для установки цвета (не картинки) фона?

Различие в том, что команда background: не будет работать.
Есть отдельные теги для цвета фона background-color: ,для картинки background-image: ,для текста color: и т.д.

Добавлено через 2 минуты

Сообщение от shyub

Сдалал то же для ProgressBar, но ничего не изменилось:
Код C++ (QT)
1
ui->progressBar_2->setStyleSheet("*{background-color: blue;}");

В место звездочки нужно указывать тип объекта.
В данном случае QProgressBar

Сообщение от shyub

А как узнать, что необходимо указывать в строке

Я же вам дал ссылку на руководство по таблицам и стилям. Там для каждого класса все подробно расписано.
К тому же на русском.

@shyub · 28.05.2014, 15:33 **[ТС]**

Спасибо, очень интересные возможности. Получился вариант с синим прогрессом на красном фоне и серой оконтовкой по периметру:

C++ (Qt)

1	ui->progressBar_2->setStyleSheet("QProgressBar {background-color: red; border: 2px solid grey; border-radius: 5px;} QProgressBar::chunk {background-color: blue;}");

Правда один маленький дефект: надпись с % при проектировании находилась справа от виджета, а после установки стиля сместилась в левый край прогресса.

@alexey_rage · 28.05.2014, 16:15

Сообщение от shyub

Правда один маленький дефект: надпись с % при проектировании находилась справа от виджета, а после установки стиля сместилась в левый край прогресса.

Да, действительно. Странный эффект. Надо бы с этим разобраться, почему так происходит.
Как вариант можно установить его в центр setAlignment(Qt::AlignCenter), так получше выглядит по моему.

Добавлено через 11 минут
shyub, кстати в стили можно добавлять и градиент:

C++ (Qt)

1
2

QProgressBar {color: rgb(255, 255, 0); background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(100,0,0,255), stop: 1 rgba(200,0,0,255)); border: 2px solid grey; border-radius: 5px;} 
QProgressBar::chunk {background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgba(0,200,255,255), stop: 1 rgba(0,0,255,255));}

@shyub · 28.05.2014, 16:59 **[ТС]**

А с текстовой надписью вообще этот компонент в Qt "не дружит". Попробуйте разместить QProgressBar на форме вертикально (стиль не изменяйте). Надпись вообще пропадает.

@Flassie · 28.05.2014, 19:28

Сообщение от alexey_rage

Различие в том, что команда background: не будет работать.

Да ладно? Вы попытайтесь

Добавлено через 28 секунд

Сообщение от alexey_rage

В место звездочки нужно указывать тип объекта.

Звездочка указывает на то, что используется ТОЛЬКО этот объект

Добавлено через 6 минут
Если брать за пример случай, который я показывал в самом начале (присвоение свойств кнопке) - то все будет работать отлично. Можно не указывать ни тип, ни звездочку и при этом не нужны фигурные скобки, однако если у кнопки будет дочерний элемент (что-то сомневаюсь, что у кнопки будет дочерний элемент) то он приобретет те же самые свойства, что у кнопки

@alexey_rage · 29.05.2014, 09:22

Сообщение от Flassie

Цитата Сообщение от alexey_rage Посмотреть сообщение
Различие в том, что команда background: не будет работать.
Да ладно? Вы попытайтесь

Признаю свою ошибку. Это действительно работает.

P.S. Век живи - век учись!

@The_name · 07.04.2015, 23:39

C++

1
2

ui->progressBar->setStyleSheet("QProgressBar { border: 2px solid grey; text-align: middle; border-radius: 5px;} 
QProgressBar::chunk {background-color: lightblue; width: 10px;}");  //Устанавливаем голубые chunk'и  и серую заливу

@shyub 392 / 191 / 48 Регистрация: 11.07.2013 Сообщений: 1,184
	28.05.2014, 14:26 [ТС]	4
	Да, но это делается при "ручном" размещении компонентов, а хотелось бы размещать компоненты Дизайнером, а потом в конструкторе виджета внести изменения. Возможен ли такой вариант? 0

@alexey_rage 596 / 396 / 79 Регистрация: 23.10.2013 Сообщений: 1,143
	28.05.2014, 15:07	7
	Сообщение от Flassie А существует ли какое-то существенное различие в использовании background и background-color для установки цвета (не картинки) фона? Различие в том, что команда background: не будет работать. Есть отдельные теги для цвета фона background-color: ,для картинки background-image: ,для текста color: и т.д. Добавлено через 2 минуты Сообщение от shyub Сдалал то же для ProgressBar, но ничего не изменилось: Код C++ (QT) 1 ui->progressBar_2->setStyleSheet("{background-color: blue;}"); В место звездочки нужно указывать тип объекта. В данном случае QProgressBar Сообщение от shyub* А как узнать, что необходимо указывать в строке Я же вам дал ссылку на руководство по таблицам и стилям. Там для каждого класса все подробно расписано. К тому же на русском. 1

@shyub 392 / 191 / 48 Регистрация: 11.07.2013 Сообщений: 1,184
	28.05.2014, 16:59 [ТС]	10
	А с текстовой надписью вообще этот компонент в Qt "не дружит". Попробуйте разместить QProgressBar на форме вертикально (стиль не изменяйте). Надпись вообще пропадает. 0

@Flassie 187 / 172 / 38 Регистрация: 03.08.2012 Сообщений: 596
	28.05.2014, 19:28	11
	Сообщение от alexey_rage Различие в том, что команда background: не будет работать. Да ладно? Вы попытайтесь Добавлено через 28 секунд Сообщение от alexey_rage В место звездочки нужно указывать тип объекта. Звездочка указывает на то, что используется ТОЛЬКО этот объект Добавлено через 6 минут Если брать за пример случай, который я показывал в самом начале (присвоение свойств кнопке) - то все будет работать отлично. Можно не указывать ни тип, ни звездочку и при этом не нужны фигурные скобки, однако если у кнопки будет дочерний элемент (что-то сомневаюсь, что у кнопки будет дочерний элемент) то он приобретет те же самые свойства, что у кнопки 1

@alexey_rage 596 / 396 / 79 Регистрация: 23.10.2013 Сообщений: 1,143
	29.05.2014, 09:22	12
	Сообщение от Flassie Цитата Сообщение от alexey_rage Посмотреть сообщение Различие в том, что команда background: не будет работать. Да ладно? Вы попытайтесь Признаю свою ошибку. Это действительно работает. P.S. Век живи - век учись! 0

Как изменить цвет заполнения ProgressBar или кнопки?

Решение