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

From Qt Wiki
Jump to navigation Jump to search
(Corrected Style)
(h)
 
(4 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{LangSwitch}}
[[Category:HowTo]]
[[Category:HowTo]]
__NOEDITSECTION__
__NOEDITSECTION__
__NOTOC__
__NOTOC__
 
==Introduction==
'''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]]
 
== Introduction ==


{{DocLink|QWidget}} 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.
{{DocLink|QWidget}} 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 ==
==Using the Palette==


The first example demonstrates how to change the background color using {{DocLink|QPalette}}
The first example demonstrates how to change the background color using {{DocLink|QPalette}}<syntaxhighlight lang="c++">
m_myWidget = new QWidget(this);
m_myWidget->setGeometry(0, 0, 300, 100);


<code>
QPalette pal = QPalette();
m_pMyWidget = new QWidget(this);
m_pMyWidget->setGeometry(0,0,300,100);
QPalette Pal(palette());


// set black background
// set black background
Pal.setColor(QPalette::Background, Qt::black);
// Qt::black / "#000000" / "black"
m_pMyWidget->setAutoFillBackground(true);
pal.setColor(QPalette::Window, Qt::black);
m_pMyWidget->setPalette(Pal);
m_pMyWidget->show();
</code>


== Using Style Sheet ==
m_myWidget->setAutoFillBackground(true);
m_myWidget->setPalette(pal);
m_myWidget->show();
</syntaxhighlight>


The style sheet contains a textual description of customizations to the widget's style, as described in the [http://doc.qt.io/qt-5/stylesheet.html Qt Style Sheets document].
==Using Style Sheet==


<code>
'''Warning:''' Function [https://doc.qt.io/qt-5/qwidget.html#styleSheet-prop setStyleSheet] is particularly useful for demonstration purposes, where you want to show Qt's styling capabilities. Real applications should avoid it and use one consistent GUI style instead. As applicable to [https://doc.qt.io/qt-5/qwidget.html#setStyle setStyle] too.
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 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 :


<code>
The style sheet contains a textual description of customizations to the widget's style, as described in the [http://doc.qt.io/qt-5/stylesheet.html Qt Style Sheets document].<syntaxhighlight lang="c++">
void CustomWidget::paintEvent(QPaintEvent *)
m_myWidget = new QWidget(this);
m_myWidget->setGeometry(0, 0, 300, 100);
m_myWidget->setStyleSheet("background-color:black;");
m_myWidget->show();
</syntaxhighlight>'''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 :<syntaxhighlight lang="c++">
void CustomWidget::paintEvent(QPaintEvent* event)
{
{
QStyleOption opt;
    QStyleOption opt;
opt.init(this);
    opt.init(this);
QPainter p(this);
    QPainter p(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
 
    QWidget::paintEvent(event);
}
}
</code>
</syntaxhighlight>Both ways to change the background color of QWidget have been successfully built using Qt SDK 1.1 and tested on Symbian devices.

Latest revision as of 01:54, 13 March 2022

En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh


Introduction

QWidget 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

m_myWidget = new QWidget(this);
m_myWidget->setGeometry(0, 0, 300, 100);

QPalette pal = QPalette();

// set black background
// Qt::black / "#000000" / "black"
pal.setColor(QPalette::Window, Qt::black);

m_myWidget->setAutoFillBackground(true); 
m_myWidget->setPalette(pal);
m_myWidget->show();

Using Style Sheet

Warning: Function setStyleSheet is particularly useful for demonstration purposes, where you want to show Qt's styling capabilities. Real applications should avoid it and use one consistent GUI style instead. As applicable to setStyle too.


The style sheet contains a textual description of customizations to the widget's style, as described in the Qt Style Sheets document.

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

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* event)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);

    QWidget::paintEvent(event);
}

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

Retrieved from "https://wiki.qt.io/index.php?title=How_to_Change_the_Background_Color_of_QWidget&oldid=39124"