How to Change the Background Color of QWidget: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
[[Category:snippets]]<br />[[Category:HowTo]]
[[Category:snippets]]
[[Category:HowTo]]


'''English''' | [[How_to_Change_the_Background_Color_of_QWidget_German|Deutsch]] | [[How_to_Change_the_Background_Color_of_QWidget_Bulgarian|Български]] | [[How_to_Change_the_Background_Color_of_QWidget_Japanese|日本語]] | [[How_to_Change_the_Background_Color_of_QWidget_Spanish|Español]] | [[How_to_Change_the_Background_Color_of_QWidget_SimplifiedChinese|简体中文]]| [[How_to_Change_the_Background_Color_of_QWidget_Persian|Persian]]
'''English''' | [[How_to_Change_the_Background_Color_of_QWidget_German|Deutsch]] | [[How_to_Change_the_Background_Color_of_QWidget_Bulgarian|Български]] | [[How_to_Change_the_Background_Color_of_QWidget_Japanese|日本語]] | [[How_to_Change_the_Background_Color_of_QWidget_Spanish|Español]] | [[How_to_Change_the_Background_Color_of_QWidget_SimplifiedChinese|简体中文]]| [[How_to_Change_the_Background_Color_of_QWidget_Persian|Persian]]
Line 11: Line 12:
The first example demonstrates how to change the background color using "QPalette":http://doc.qt.io/qt-5.0/qtgui/qpalette.html
The first example demonstrates how to change the background color using "QPalette":http://doc.qt.io/qt-5.0/qtgui/qpalette.html


<code><br />m_pMyWidget = new QWidget(this);<br />m_pMyWidget->setGeometry(0,0,300,100);<br />QPalette Pal(palette());<br />// set black background<br />Pal.setColor(QPalette::Background, Qt::black);<br />m_pMyWidget->setAutoFillBackground(true);<br />m_pMyWidget->setPalette(Pal);<br />m_pMyWidget->show();<br /></code>
<code>
m_pMyWidget = new QWidget(this);
m_pMyWidget->setGeometry(0,0,300,100);
QPalette Pal(palette());
// set black background
Pal.setColor(QPalette::Background, Qt::black);
m_pMyWidget->setAutoFillBackground(true);
m_pMyWidget->setPalette(Pal);
m_pMyWidget->show();
</code>


== Using Style Sheet ==
== Using Style Sheet ==
Line 17: Line 27:
The style sheet contains a textual description of customizations to the widget's style, as described in the "Qt Style Sheets document":http://doc.qt.io/qt-5.0/qtwidgets/stylesheet.html.
The style sheet contains a textual description of customizations to the widget's style, as described in the "Qt Style Sheets document":http://doc.qt.io/qt-5.0/qtwidgets/stylesheet.html.


<code><br />m_pMyWidget = new QWidget(this);<br />m_pMyWidget->setGeometry(0,0,300,100);<br />m_pMyWidget->setStyleSheet("background-color:black;");<br />m_pMyWidget->show();<br /></code>
<code>
m_pMyWidget = new QWidget(this);
m_pMyWidget->setGeometry(0,0,300,100);
m_pMyWidget->setStyleSheet("background-color:black;");
m_pMyWidget->show();
</code>


Both ways to change the background color of QWidget have been successfully built using Qt SDK 1.1 and tested on Symbian^3 devices.
Both ways to change the background color of QWidget have been successfully built using Qt SDK 1.1 and tested on Symbian^3 devices.
Line 23: Line 38:
'''Note:''' If you subclass a custom widget from QWidget, then in order to use the StyleSheets you need to provide a paintEvent to the custom widget :
'''Note:''' If you subclass a custom widget from QWidget, then in order to use the StyleSheets you need to provide a paintEvent to the custom widget :


<code>void CustomWidget::paintEvent(QPaintEvent *)<br /> {<br /> QStyleOption opt;<br /> opt.init(this);<br /> QPainter p(this);<br /> style()->drawPrimitive(QStyle::PE_Widget, &amp;opt, &amp;p, this);
<code>void CustomWidget::paintEvent(QPaintEvent *)
{
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &amp;opt, &amp;p, this);

Revision as of 08:35, 25 February 2015


English | Deutsch | Български | 日本語 | Español | 简体中文| Persian

How to Change the Background Color of QWidget

"QWidget":http://doc.qt.io/qt-5.0/qtwidgets/qwidget.html is the base class of all user interface objects which means that the same approaches for changing the background color can be used with them too.

Using the Palette

The first example demonstrates how to change the background color using "QPalette":http://doc.qt.io/qt-5.0/qtgui/qpalette.html

m_pMyWidget = new QWidget(this);
m_pMyWidget->setGeometry(0,0,300,100);
QPalette Pal(palette());
// set black background
Pal.setColor(QPalette::Background, Qt::black);
m_pMyWidget->setAutoFillBackground(true);
m_pMyWidget->setPalette(Pal);
m_pMyWidget->show();

Using Style Sheet

The style sheet contains a textual description of customizations to the widget's style, as described in the "Qt Style Sheets document":http://doc.qt.io/qt-5.0/qtwidgets/stylesheet.html.

m_pMyWidget = new QWidget(this);
m_pMyWidget->setGeometry(0,0,300,100);
m_pMyWidget->setStyleSheet("background-color:black;");
m_pMyWidget->show();

Both ways to change the background color of QWidget have been successfully built using Qt SDK 1.1 and tested on Symbian^3 devices.

Note: If you subclass a custom widget from QWidget, then in order to use the StyleSheets you need to provide a paintEvent to the custom widget :

void CustomWidget::paintEvent(QPaintEvent *)

{
QStyleOption opt;
opt.init(this);
QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);