<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qt4-styles.qdoc -->
<title>Qt 4.8: The Qt 4 Style API</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>The Qt 4 Style API</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="qt4-network.html" />
<link rel="next" href="qt4-threads.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qt4-network.html">The Network Module in Qt 4</a>
<a class="nextPage" href="qt4-threads.html">Thread Support in Qt 4</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#general-overview">General Overview</a></li>
<li class="level1"><a href="#example-code">Example Code</a></li>
<li class="level1"><a href="#comparison-with-qt-3">Comparison with Qt 3</a></li>
</ul>
</div>
<h1 class="title">The Qt 4 Style API</h1>
<span class="subtitle"></span>
<!-- $$$qt4-styles.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt's style API is responsible for performing the widget drawing for built-in widgets. The Qt 4 style API has been revised to make it possible for a style to draw widgets without calling any functions on the widget.</p>
<p>Because Qt 4 is split across multiple libraries, Qt needed this update to be able to draw widgets from other libraries than <a href="qtgui.html">QtGui</a>. For application developers, this has other benefits, such as more managable parameter lists and the possibility of drawing any graphical element without having a widget of a specific type.</p>
<a name="general-overview"></a>
<h2>General Overview</h2>
<p>The <a href="qstyle.html">QStyle</a> class is an abstract base class that encapsulates the look and feel of a GUI. Qt's built-in widgets use it to perform nearly all of their drawing, ensuring that they look exactly like the equivalent native widgets.</p>
<p>Most draw functions now take four arguments:</p>
<ul>
<li>an enum value specifying which graphical element to draw</li>
<li>a <a href="qstyleoption.html">QStyleOption</a> specifying how and where to render that element</li>
<li>a <a href="qpainter.html">QPainter</a> that should be used to draw the element</li>
<li>a <a href="qwidget.html">QWidget</a> on which the drawing is performed (optional)</li>
</ul>
<p>The style gets all the information it needs to render the graphical element from <a href="qstyleoption.html">QStyleOption</a>. The widget is passed as the last argument in case the style needs it to perform special effects (such as animated default buttons on Mac OS X), but it isn't mandatory. In fact, <a href="qstyle.html">QStyle</a> can be used to draw on any paint device, not just widgets, by setting the <a href="qpainter.html">QPainter</a> properly.</p>
<p>Thanks to <a href="qstyleoption.html">QStyleOption</a>, it is now possible to make <a href="qstyle.html">QStyle</a> draw widgets without linking in any code for the widget. This is how Qt's built-in styles can draw Qt 3 widgets such as <a href="q3listview.html" class="compat">Q3ListView</a> without necessarily linking against the <a href="qt3support.html">Qt3Support</a> library. Another significant benefit of the new approach is that it's now possible to use <a href="qstyle.html">QStyle</a>'s draw functions on other widgets than the built-in widgets; for example, you can draw a combobox on any widget, not just on a <a href="qcombobox.html">QComboBox</a>.</p>
<p><a href="qstyleoption.html">QStyleOption</a> has various subclasses for the various types of graphical elements that can be drawn, and it's possible to create custom subclasses. For example, the <a href="qstyle.html#PrimitiveElement-enum">QStyle::PE_FrameFocusRect</a> element expects a <a href="qstyleoptionfocusrect.html">QStyleOptionFocusRect</a> argument. This is documented for each enum value.</p>
<p>When reimplementing <a href="qstyle.html">QStyle</a> functions that take a <a href="qstyleoption.html">QStyleOption</a> parameter, you often need to cast the <a href="qstyleoption.html">QStyleOption</a> to a subclass (e.g., <a href="qstyleoptionfocusrect.html">QStyleOptionFocusRect</a>). For safety, you can use <a href="qstyleoption.html#qstyleoption_cast">qstyleoption_cast</a>() to ensure that the pointer type is correct. If the object isn't of the right type, <a href="qstyleoption.html#qstyleoption_cast">qstyleoption_cast</a>() returns 0. For example:</p>
<pre class="cpp"> <span class="keyword">const</span> <span class="type"><a href="qstyleoptionfocusrect.html">QStyleOptionFocusRect</a></span> <span class="operator">*</span>focusRectOption <span class="operator">=</span>
qstyleoption_cast<span class="operator"><</span><span class="keyword">const</span> <span class="type"><a href="qstyleoptionfocusrect.html">QStyleOptionFocusRect</a></span> <span class="operator">*</span><span class="operator">></span>(option);
<span class="keyword">if</span> (focusRectOption) {
<span class="operator">.</span><span class="operator">.</span><span class="operator">.</span>
}</pre>
<p>For performance reasons, there are few member functions and the access to the variables is direct. This "low-level" feel makes the structures use straightforward and emphasizes that these are simply parameters used by the style functions. In addition, the caller of a <a href="qstyle.html">QStyle</a> function usually creates <a href="qstyleoption.html">QStyleOption</a> objects on the stack. This combined with Qt's extensive use of <a href="implicit-sharing.html">implicit sharing</a> for types such as <a href="qstring.html">QString</a>, <a href="qpalette.html">QPalette</a>, and <a href="qcolor.html">QColor</a> ensures that no memory allocation needlessly takes place. (Dynamic memory allocation can be an expensive operation, especially when drawing very often in a short time.)</p>
<a name="example-code"></a>
<h2>Example Code</h2>
<p>The following code snippet illustrates how to use <a href="qstyle.html">QStyle</a> to draw the focus rectangle from a custom widget's paintEvent():</p>
<pre class="cpp"> <span class="type">void</span> MyWidget<span class="operator">::</span>paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>event)
{
<span class="type"><a href="qpainter.html">QPainter</a></span> painter(<span class="keyword">this</span>);
<span class="operator">.</span><span class="operator">.</span><span class="operator">.</span>
<span class="type"><a href="qstyleoptionfocusrect.html">QStyleOptionFocusRect</a></span> option(<span class="number">1</span>);
option<span class="operator">.</span>init(<span class="keyword">this</span>);
option<span class="operator">.</span>backgroundColor <span class="operator">=</span> palette()<span class="operator">.</span>color(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Window);
style()<span class="operator">.</span>drawPrimitive(<span class="type"><a href="qstyle.html">QStyle</a></span><span class="operator">::</span>PE_FrameFocusRect<span class="operator">,</span> <span class="operator">&</span>option<span class="operator">,</span> <span class="operator">&</span>painter<span class="operator">,</span>
<span class="keyword">this</span>);
}</pre>
<p>The next example shows how to derive from an existing style to customize the look of a graphical element:</p>
<pre class="cpp"> <span class="keyword">class</span> CustomStyle : <span class="keyword">public</span> <span class="type"><a href="qwindowsstyle.html">QWindowsStyle</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
CustomStyle()
<span class="operator">~</span>CustomStyle() {}
<span class="type">void</span> drawPrimitive(PrimitiveElement element<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qstyleoption.html">QStyleOption</a></span> <span class="operator">*</span>option<span class="operator">,</span>
<span class="type"><a href="qpainter.html">QPainter</a></span> <span class="operator">*</span>painter<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget) <span class="keyword">const</span>;
};
<span class="type">void</span> CustomStyle<span class="operator">::</span>drawPrimitive(PrimitiveElement element<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qstyleoption.html">QStyleOption</a></span> <span class="operator">*</span>option<span class="operator">,</span>
<span class="type"><a href="qpainter.html">QPainter</a></span> <span class="operator">*</span>painter<span class="operator">,</span> <span class="keyword">const</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget) <span class="keyword">const</span>
{
<span class="keyword">if</span> (element <span class="operator">=</span><span class="operator">=</span> PE_IndicatorSpinUp <span class="operator">|</span><span class="operator">|</span> element <span class="operator">=</span><span class="operator">=</span> PE_IndicatorSpinDown) {
<span class="type"><a href="qpolygon.html">QPolygon</a></span> points(<span class="number">3</span>);
<span class="type">int</span> x <span class="operator">=</span> option<span class="operator">-</span><span class="operator">></span>rect<span class="operator">.</span>x();
<span class="type">int</span> y <span class="operator">=</span> option<span class="operator">-</span><span class="operator">></span>rect<span class="operator">.</span>y();
<span class="type">int</span> w <span class="operator">=</span> option<span class="operator">-</span><span class="operator">></span>rect<span class="operator">.</span>width() <span class="operator">/</span> <span class="number">2</span>;
<span class="type">int</span> h <span class="operator">=</span> option<span class="operator">-</span><span class="operator">></span>rect<span class="operator">.</span>height() <span class="operator">/</span> <span class="number">2</span>;
x <span class="operator">+</span><span class="operator">=</span> (option<span class="operator">-</span><span class="operator">></span>rect<span class="operator">.</span>width() <span class="operator">-</span> w) <span class="operator">/</span> <span class="number">2</span>;
y <span class="operator">+</span><span class="operator">=</span> (option<span class="operator">-</span><span class="operator">></span>rect<span class="operator">.</span>height() <span class="operator">-</span> h) <span class="operator">/</span> <span class="number">2</span>;
<span class="keyword">if</span> (element <span class="operator">=</span><span class="operator">=</span> PE_IndicatorSpinUp) {
points<span class="operator">[</span><span class="number">0</span><span class="operator">]</span> <span class="operator">=</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x<span class="operator">,</span> y <span class="operator">+</span> h);
points<span class="operator">[</span><span class="number">1</span><span class="operator">]</span> <span class="operator">=</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x <span class="operator">+</span> w<span class="operator">,</span> y <span class="operator">+</span> h);
points<span class="operator">[</span><span class="number">2</span><span class="operator">]</span> <span class="operator">=</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x <span class="operator">+</span> w <span class="operator">/</span> <span class="number">2</span><span class="operator">,</span> y);
} <span class="keyword">else</span> { <span class="comment">// PE_SpinBoxDown</span>
points<span class="operator">[</span><span class="number">0</span><span class="operator">]</span> <span class="operator">=</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x<span class="operator">,</span> y);
points<span class="operator">[</span><span class="number">1</span><span class="operator">]</span> <span class="operator">=</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x <span class="operator">+</span> w<span class="operator">,</span> y);
points<span class="operator">[</span><span class="number">2</span><span class="operator">]</span> <span class="operator">=</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x <span class="operator">+</span> w <span class="operator">/</span> <span class="number">2</span><span class="operator">,</span> y <span class="operator">+</span> h);
}
<span class="keyword">if</span> (option<span class="operator">-</span><span class="operator">></span>state <span class="operator">&</span> State_Enabled) {
painter<span class="operator">-</span><span class="operator">></span>setPen(option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>mid()<span class="operator">.</span>color());
painter<span class="operator">-</span><span class="operator">></span>setBrush(option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>buttonText());
} <span class="keyword">else</span> {
painter<span class="operator">-</span><span class="operator">></span>setPen(option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>buttonText()<span class="operator">.</span>color());
painter<span class="operator">-</span><span class="operator">></span>setBrush(option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>mid());
}
painter<span class="operator">-</span><span class="operator">></span>drawPolygon(points);
} <span class="keyword">else</span> {
<span class="type"><a href="qwindowsstyle.html">QWindowsStyle</a></span><span class="operator">::</span>drawPrimitive(element<span class="operator">,</span> option<span class="operator">,</span> painter<span class="operator">,</span> widget);
}
}</pre>
<p>See also the <a href="widgets-styles.html">Styles Example</a> for a more detailed description of how custom styles can be created.</p>
<a name="comparison-with-qt-3"></a>
<h2>Comparison with Qt 3</h2>
<p>The <a href="qstyle.html">QStyle</a> class has a similar API in Qt 4 as in Qt 3, with more or less the same functions. What has changed is the signature of the functions and the role played by <a href="qstyleoption.html">QStyleOption</a>. For example, here's the signature of the <a href="qstyle.html#drawControl">QStyle::drawControl</a>() function in Qt 3:</p>
<pre class="cpp"> <span class="type">void</span> drawControl(ControlElement element<span class="operator">,</span>
<span class="type"><a href="qpainter.html">QPainter</a></span> <span class="operator">*</span>painter<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qrect.html">QRect</a></span> <span class="operator">&</span>rect<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qcolorgroup.html">QColorGroup</a></span> <span class="operator">&</span>colorGroup<span class="operator">,</span>
SFlags how <span class="operator">=</span> Style_Default<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstyleoption.html">QStyleOption</a></span> <span class="operator">&</span>option <span class="operator">=</span> <span class="type"><a href="qstyleoption.html">QStyleOption</a></span><span class="operator">::</span>Default) <span class="keyword">const</span>;</pre>
<p>Here's the signature of the same function in Qt 4:</p>
<pre class="cpp"> <span class="type">void</span> drawControl(ControlElement element<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qstyleoption.html">QStyleOption</a></span> <span class="operator">*</span>option<span class="operator">,</span>
<span class="type"><a href="qpainter.html">QPainter</a></span> <span class="operator">*</span>painter<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget <span class="operator">=</span> <span class="number">0</span>) <span class="keyword">const</span>;</pre>
<p>In Qt 3, some of the information required to draw a graphical element was stored in a <a href="qstyleoption.html">QStyleOption</a> parameter, while the rest was deduced by querying the widget. In Qt 4, everything is stored in the <a href="qstyleoption.html">QStyleOption</a> parameter.</p>
</div>
<!-- @@@qt4-styles.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qt4-network.html">The Network Module in Qt 4</a>
<a class="nextPage" href="qt4-threads.html">Thread Support in Qt 4</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
