1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
|
<?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" />
<!-- styles.qdoc -->
<title>Qt 4.8: Styles Example</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Styles Example</li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#norwegianwoodstyle-class-definition">NorwegianWoodStyle Class Definition</a></li>
<li class="level1"><a href="#norwegianwoodstyle-class-implementation">NorwegianWoodStyle Class Implementation</a></li>
<li class="level1"><a href="#widgetgallery-class">WidgetGallery Class</a></li>
</ul>
</div>
<h1 class="title">Styles Example</h1>
<span class="subtitle"></span>
<!-- $$$widgets/styles-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="widgets-styles-norwegianwoodstyle-cpp.html">widgets/styles/norwegianwoodstyle.cpp</a></li>
<li><a href="widgets-styles-norwegianwoodstyle-h.html">widgets/styles/norwegianwoodstyle.h</a></li>
<li><a href="widgets-styles-widgetgallery-cpp.html">widgets/styles/widgetgallery.cpp</a></li>
<li><a href="widgets-styles-widgetgallery-h.html">widgets/styles/widgetgallery.h</a></li>
<li><a href="widgets-styles-main-cpp.html">widgets/styles/main.cpp</a></li>
<li><a href="widgets-styles-styles-pro.html">widgets/styles/styles.pro</a></li>
<li><a href="widgets-styles-styles-qrc.html">widgets/styles/styles.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/widgets/styles/images/woodbackground.png">widgets/styles/images/woodbackground.png</a></li>
<li><a href="images/used-in-examples/widgets/styles/images/woodbutton.png">widgets/styles/images/woodbutton.png</a></li>
</ul>
<p>The Styles example illustrates how to create custom widget drawing styles using Qt, and demonstrates Qt's predefined styles.<p class="centerAlign"><img src="images/styles-enabledwood.png" alt="Screenshot of the Styles example" /></p><p>A style in Qt is a subclass of <a href="qstyle.html">QStyle</a> or of one of its subclasses. Styles perform drawing on behalf of widgets. Qt provides a whole range of predefined styles, either built into the <a href="qtgui.html">QtGui</a> library or found in plugins. Custom styles are usually created by subclassing one of Qt's existing style and reimplementing a few virtual functions.</p>
<p>In this example, the custom style is called <tt>NorwegianWoodStyle</tt> and derives from <a href="qmotifstyle.html">QMotifStyle</a>. Its main features are the wooden textures used for filling most of the widgets and its round buttons and comboboxes.</p>
<p>To implement the style, we use some advanced features provided by <a href="qpainter.html">QPainter</a>, such as <a href="qpainter.html#RenderHint-enum">antialiasing</a> (to obtain smoother button edges), <a href="qcolor.html#alpha">alpha blending</a> (to make the buttons appeared raised or sunken), and <a href="qpainterpath.html">painter paths</a> (to fill the buttons and draw the outline). We also use many features of <a href="qbrush.html">QBrush</a> and <a href="qpalette.html">QPalette</a>.</p>
<p>The example consists of the following classes:</p>
<ul>
<li><tt>NorwegianWoodStyle</tt> inherits from <a href="qmotifstyle.html">QMotifStyle</a> and implements the Norwegian Wood style.</li>
<li><tt>WidgetGallery</tt> is a <tt>QDialog</tt> subclass that shows the most common widgets and allows the user to switch style dynamically.</li>
</ul>
<a name="norwegianwoodstyle-class-definition"></a>
<h2>NorwegianWoodStyle Class Definition</h2>
<p>Here's the definition of the <tt>NorwegianWoodStyle</tt> class:</p>
<pre class="cpp"> <span class="keyword">class</span> NorwegianWoodStyle : <span class="keyword">public</span> <span class="type"><a href="qmotifstyle.html">QMotifStyle</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
NorwegianWoodStyle() {}
<span class="type">void</span> polish(<span class="type"><a href="qpalette.html">QPalette</a></span> <span class="operator">&</span>palette);
<span class="type">void</span> polish(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget);
<span class="type">void</span> unpolish(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget);
<span class="type">int</span> pixelMetric(PixelMetric metric<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="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">int</span> styleHint(StyleHint hint<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="keyword">const</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget<span class="operator">,</span> <span class="type"><a href="qstylehintreturn.html">QStyleHintReturn</a></span> <span class="operator">*</span>returnData) <span class="keyword">const</span>;
<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> drawControl(ControlElement control<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">private</span>:
<span class="keyword">static</span> <span class="type">void</span> setTexture(<span class="type"><a href="qpalette.html">QPalette</a></span> <span class="operator">&</span>palette<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>ColorRole role<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qpixmap.html">QPixmap</a></span> <span class="operator">&</span>pixmap);
<span class="keyword">static</span> <span class="type"><a href="qpainterpath.html">QPainterPath</a></span> roundRectPath(<span class="keyword">const</span> <span class="type"><a href="qrect.html">QRect</a></span> <span class="operator">&</span>rect);
};</pre>
<p>The public functions are all declared in <a href="qstyle.html">QStyle</a> (<a href="qmotifstyle.html">QMotifStyle</a>'s grandparent class) and reimplemented here to override the Motif look and feel. The private functions are helper functions.</p>
<a name="norwegianwoodstyle-class-implementation"></a>
<h2>NorwegianWoodStyle Class Implementation</h2>
<p>We will now review the implementation of the <tt>NorwegianWoodStyle</tt> class.</p>
<pre class="cpp"> <span class="type">void</span> NorwegianWoodStyle<span class="operator">::</span>polish(<span class="type"><a href="qpalette.html">QPalette</a></span> <span class="operator">&</span>palette)
{
<span class="type"><a href="qcolor.html">QColor</a></span> brown(<span class="number">212</span><span class="operator">,</span> <span class="number">140</span><span class="operator">,</span> <span class="number">95</span>);
<span class="type"><a href="qcolor.html">QColor</a></span> beige(<span class="number">236</span><span class="operator">,</span> <span class="number">182</span><span class="operator">,</span> <span class="number">120</span>);
<span class="type"><a href="qcolor.html">QColor</a></span> slightlyOpaqueBlack(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">63</span>);
<span class="type"><a href="qpixmap.html">QPixmap</a></span> backgroundImage(<span class="string">":/images/woodbackground.png"</span>);
<span class="type"><a href="qpixmap.html">QPixmap</a></span> buttonImage(<span class="string">":/images/woodbutton.png"</span>);
<span class="type"><a href="qpixmap.html">QPixmap</a></span> midImage <span class="operator">=</span> buttonImage;
<span class="type"><a href="qpainter.html">QPainter</a></span> painter;
painter<span class="operator">.</span>begin(<span class="operator">&</span>midImage);
painter<span class="operator">.</span>setPen(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>NoPen);
painter<span class="operator">.</span>fillRect(midImage<span class="operator">.</span>rect()<span class="operator">,</span> slightlyOpaqueBlack);
painter<span class="operator">.</span>end();</pre>
<p>The <tt>polish()</tt> function is reimplemented from <a href="qstyle.html">QStyle</a>. It takes a <a href="qpalette.html">QPalette</a> as a reference and adapts the palette to fit the style. Most styles don't need to reimplement that function. The Norwegian Wood style reimplements it to set a "wooden" palette.</p>
<p>We start by defining a few <a href="qcolor.html">QColor</a>s that we'll need. Then we load two PNG images. The <tt>:</tt> prefix in the file path indicates that the PNG files are <a href="resources.html">embedded resources</a>.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/woodbackground.png" alt="" /></td><td ><b>woodbackground.png</b><p>This texture is used as the background of most widgets. The wood pattern is horizontal.</p>
</td></tr>
<tr valign="top" class="even"><td ><img src="images/woodbutton.png" alt="" /></td><td ><b>woodbutton.png</b><p>This texture is used for filling push buttons and comboboxes. The wood pattern is vertical and more reddish than the texture used for the background.</p>
</td></tr>
</table>
<p>The <tt>midImage</tt> variable is initialized to be the same as <tt>buttonImage</tt>, but then we use a <a href="qpainter.html">QPainter</a> and fill it with a 25% opaque black color (a black with an <a href="qcolor.html#alpha">alpha channel</a> of 63). The result is a somewhat darker image than <tt>buttonImage</tt>. This image will be used for filling buttons that the user is holding down.</p>
<pre class="cpp"> palette <span class="operator">=</span> <span class="type"><a href="qpalette.html">QPalette</a></span>(brown);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>BrightText<span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>white);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Base<span class="operator">,</span> beige);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Highlight<span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>darkGreen);
setTexture(palette<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Button<span class="operator">,</span> buttonImage);
setTexture(palette<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Mid<span class="operator">,</span> midImage);
setTexture(palette<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Window<span class="operator">,</span> backgroundImage);
<span class="type"><a href="qbrush.html">QBrush</a></span> brush <span class="operator">=</span> palette<span class="operator">.</span>background();
brush<span class="operator">.</span>setColor(brush<span class="operator">.</span>color()<span class="operator">.</span>dark());
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Disabled<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>WindowText<span class="operator">,</span> brush);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Disabled<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Text<span class="operator">,</span> brush);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Disabled<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>ButtonText<span class="operator">,</span> brush);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Disabled<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Base<span class="operator">,</span> brush);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Disabled<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Button<span class="operator">,</span> brush);
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Disabled<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Mid<span class="operator">,</span> brush);
}</pre>
<p>We initialize the palette. Palettes have various <a href="qpalette.html#ColorRole-enum">color roles</a>, such as <a href="qpalette.html#ColorRole-enum">QPalette::Base</a> (used for filling text editors, item views, etc.), <a href="qpalette.html#ColorRole-enum">QPalette::Text</a> (used for foreground text), and <a href="qpalette.html#ColorRole-enum">QPalette::Background</a> (used for the background of most widgets). Each role has its own <a href="qbrush.html">QBrush</a>, which usually is a plain color but can also be a brush pattern or even a texture (a <a href="qpixmap.html">QPixmap</a>).</p>
<p>In addition to the roles, palettes have several <a href="qpalette.html#ColorGroup-enum">color groups</a>: active, disabled, and inactive. The active color group is used for painting widgets in the active window. The disabled group is used for disabled widgets. The inactive group is used for all other widgets. Most palettes have identical active and inactive groups, while the disabled group uses darker shades.</p>
<p>We initialize the <a href="qpalette.html">QPalette</a> object with a brown color. Qt automatically derivates all color roles for all color groups from that single color. We then override some of the default values. For example, we use <a href="qt.html#GlobalColor-enum">Qt::darkGreen</a> instead of the default (<a href="qt.html#GlobalColor-enum">Qt::darkBlue</a>) for the <a href="qpalette.html#ColorRole-enum">QPalette::Highlight</a> role. The <a href="qpalette.html#setBrush">QPalette::setBrush</a>() overload that we use here sets the same color or brush for all three color groups.</p>
<p>The <tt>setTexture()</tt> function is a private function that sets the texture for a certain color role, while preserving the existing color in the <a href="qbrush.html">QBrush</a>. A <a href="qbrush.html">QBrush</a> can hold both a solid color and a texture at the same time. The solid color is used for drawing text and other graphical elements where textures don't look good.</p>
<p>At the end, we set the brush for the disabled color group of the palette. We use <tt>woodbackground.png</tt> as the texture for all disabled widgets, including buttons, and use a darker color to accompany the texture.</p>
<p class="centerAlign"><img src="images/styles-disabledwood.png" alt="The Norwegian Wood style with disabled widgets" /></p><p>Let's move on to the other functions reimplemented from <a href="qmotifstyle.html">QMotifStyle</a>:</p>
<pre class="cpp"> <span class="type">void</span> NorwegianWoodStyle<span class="operator">::</span>polish(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget)
{
<span class="keyword">if</span> (qobject_cast<span class="operator"><</span><span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span><span class="operator">></span>(widget)
<span class="operator">|</span><span class="operator">|</span> qobject_cast<span class="operator"><</span><span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span><span class="operator">></span>(widget))
widget<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_Hover<span class="operator">,</span> <span class="keyword">true</span>);
}</pre>
<p>This <a href="qstyle.html#polish">QStyle::polish</a>() overload is called once on every widget drawn using the style. We reimplement it to set the <a href="qt.html#WidgetAttribute-enum">Qt::WA_Hover</a> attribute on <a href="qpushbutton.html">QPushButton</a>s and <a href="qcombobox.html">QComboBox</a>es. When this attribute is set, Qt generates paint events when the mouse pointer enters or leaves the widget. This makes it possible to render push buttons and comboboxes differently when the mouse pointer is over them.</p>
<pre class="cpp"> <span class="type">void</span> NorwegianWoodStyle<span class="operator">::</span>unpolish(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget)
{
<span class="keyword">if</span> (qobject_cast<span class="operator"><</span><span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span><span class="operator">></span>(widget)
<span class="operator">|</span><span class="operator">|</span> qobject_cast<span class="operator"><</span><span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span><span class="operator">></span>(widget))
widget<span class="operator">-</span><span class="operator">></span>setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_Hover<span class="operator">,</span> <span class="keyword">false</span>);
}</pre>
<p>This <a href="qstyle.html#unpolish">QStyle::unpolish</a>() overload is called to undo any modification done to the widget in <tt>polish()</tt>. For simplicity, we assume that the flag wasn't set before <tt>polish()</tt> was called. In an ideal world, we would remember the original state for each widgets (e.g., using a <a href="qmap.html">QMap</a><<a href="qwidget.html">QWidget</a> *, bool>) and restore it in <tt>unpolish()</tt>.</p>
<pre class="cpp"> <span class="type">int</span> NorwegianWoodStyle<span class="operator">::</span>pixelMetric(PixelMetric metric<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="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">switch</span> (metric) {
<span class="keyword">case</span> PM_ComboBoxFrameWidth:
<span class="keyword">return</span> <span class="number">8</span>;
<span class="keyword">case</span> PM_ScrollBarExtent:
<span class="keyword">return</span> <span class="type"><a href="qmotifstyle.html">QMotifStyle</a></span><span class="operator">::</span>pixelMetric(metric<span class="operator">,</span> option<span class="operator">,</span> widget) <span class="operator">+</span> <span class="number">4</span>;
<span class="keyword">default</span>:
<span class="keyword">return</span> <span class="type"><a href="qmotifstyle.html">QMotifStyle</a></span><span class="operator">::</span>pixelMetric(metric<span class="operator">,</span> option<span class="operator">,</span> widget);
}
}</pre>
<p>The <a href="qstyle.html#pixelMetric">pixelMetric()</a> function returns the size in pixels for a certain user interface element. By reimplementing this function, we can affect the way certain widgets are drawn and their size hint. Here, we return 8 as the width around a shown in a <a href="qcombobox.html">QComboBox</a>, ensuring that there is enough place around the text and the arrow for the Norwegian Wood round corners. The default value for this setting in the Motif style is 2.</p>
<p>We also change the extent of <a href="qscrollbar.html">QScrollBar</a>s, i.e., the height for a horizontal scroll bar and the width for a vertical scroll bar, to be 4 pixels more than in the Motif style. This makes the style a bit more distinctive.</p>
<p>For all other <a href="qstyle.html#PixelMetric-enum">QStyle::PixelMetric</a> elements, we use the Motif settings.</p>
<pre class="cpp"> <span class="type">int</span> NorwegianWoodStyle<span class="operator">::</span>styleHint(StyleHint hint<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="keyword">const</span> <span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>widget<span class="operator">,</span>
<span class="type"><a href="qstylehintreturn.html">QStyleHintReturn</a></span> <span class="operator">*</span>returnData) <span class="keyword">const</span>
{
<span class="keyword">switch</span> (hint) {
<span class="keyword">case</span> SH_DitherDisabledText:
<span class="keyword">return</span> <span class="type">int</span>(<span class="keyword">false</span>);
<span class="keyword">case</span> SH_EtchDisabledText:
<span class="keyword">return</span> <span class="type">int</span>(<span class="keyword">true</span>);
<span class="keyword">default</span>:
<span class="keyword">return</span> <span class="type"><a href="qmotifstyle.html">QMotifStyle</a></span><span class="operator">::</span>styleHint(hint<span class="operator">,</span> option<span class="operator">,</span> widget<span class="operator">,</span> returnData);
}
}</pre>
<p>The <a href="qstyle.html#styleHint">styleHint()</a> function returns some hints to widgets or to the base style (in our case <a href="qmotifstyle.html">QMotifStyle</a>) about how to draw the widgets. The Motif style returns <tt>true</tt> for the <a href="qstyle.html#StyleHint-enum">QStyle::SH_DitherDisabledText</a> hint, resulting in a most unpleasing visual effect. We override this behavior and return <tt>false</tt> instead. We also return <tt>true</tt> for the <a href="qstyle.html#StyleHint-enum">QStyle::SH_EtchDisabledText</a> hint, meaning that disabled text is rendered with an embossed look (as <a href="qwindowsstyle.html">QWindowsStyle</a> does).</p>
<pre class="cpp"> <span class="type">void</span> NorwegianWoodStyle<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">switch</span> (element) {
<span class="keyword">case</span> PE_PanelButtonCommand:
{
<span class="type">int</span> delta <span class="operator">=</span> (option<span class="operator">-</span><span class="operator">></span>state <span class="operator">&</span> State_MouseOver) <span class="operator">?</span> <span class="number">64</span> : <span class="number">0</span>;
<span class="type"><a href="qcolor.html">QColor</a></span> slightlyOpaqueBlack(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">63</span>);
<span class="type"><a href="qcolor.html">QColor</a></span> semiTransparentWhite(<span class="number">255</span><span class="operator">,</span> <span class="number">255</span><span class="operator">,</span> <span class="number">255</span><span class="operator">,</span> <span class="number">127</span> <span class="operator">+</span> delta);
<span class="type"><a href="qcolor.html">QColor</a></span> semiTransparentBlack(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">127</span> <span class="operator">-</span> delta);
<span class="type">int</span> x<span class="operator">,</span> y<span class="operator">,</span> width<span class="operator">,</span> height;
option<span class="operator">-</span><span class="operator">></span>rect<span class="operator">.</span>getRect(<span class="operator">&</span>x<span class="operator">,</span> <span class="operator">&</span>y<span class="operator">,</span> <span class="operator">&</span>width<span class="operator">,</span> <span class="operator">&</span>height);</pre>
<p>The <a href="qstyle.html#drawPrimitive">drawPrimitive()</a> function is called by Qt widgets to draw various fundamental graphical elements. Here we reimplement it to draw <a href="qpushbutton.html">QPushButton</a> and <a href="qcombobox.html">QComboBox</a> with round corners. The button part of these widgets is drawn using the <a href="qstyle.html#PrimitiveElement-enum">QStyle::PE_PanelButtonCommand</a> primitive element.</p>
<p>The <tt>option</tt> parameter, of type <a href="qstyleoption.html">QStyleOption</a>, contains everything we need to know about the widget we want to draw on. In particular, <tt>option->rect</tt> gives the rectangle within which to draw the primitive element. The <tt>painter</tt> parameter is a <a href="qpainter.html">QPainter</a> object that we can use to draw on the widget.</p>
<p>The <tt>widget</tt> parameter is the widget itself. Normally, all the information we need is available in <tt>option</tt> and <tt>painter</tt>, so we don't need <tt>widget</tt>. We can use it to perform special effects; for example, <a href="qmacstyle.html">QMacStyle</a> uses it to animate default buttons. If you use it, be aware that the caller is allowed to pass a null pointer.</p>
<p>We start by defining three <a href="qcolor.html">QColor</a>s that we'll need later on. We also put the x, y, width, and height components of the widget's rectangle in local variables. The value used for the <tt>semiTransparentWhite</tt> and for the <tt>semiTransparentBlack</tt> color's alpha channel depends on whether the mouse cursor is over the widget or not. Since we set the <a href="qt.html#WidgetAttribute-enum">Qt::WA_Hover</a> attribute on <a href="qpushbutton.html">QPushButton</a>s and <a href="qcombobox.html">QComboBox</a>es, we can rely on the <a href="qstyle.html#StateFlag-enum">QStyle::State_MouseOver</a> flag to be set when the mouse is over the widget.</p>
<pre class="cpp"> <span class="type"><a href="qpainterpath.html">QPainterPath</a></span> roundRect <span class="operator">=</span> roundRectPath(option<span class="operator">-</span><span class="operator">></span>rect);
<span class="type">int</span> radius <span class="operator">=</span> <a href="qtglobal.html#qMin">qMin</a>(width<span class="operator">,</span> height) <span class="operator">/</span> <span class="number">2</span>;</pre>
<p>The <tt>roundRect</tt> variable is a <a href="qpainterpath.html">QPainterPath</a>. A <a href="qpainterpath.html">QPainterPath</a> is is a vectorial specification of a shape. Any shape (rectangle, ellipse, spline, etc.) or combination of shapes can be expressed as a path. We will use <tt>roundRect</tt> both for filling the button background with a wooden texture and for drawing the outline. The <tt>roundRectPath()</tt> function is a private function; we will come back to it later.</p>
<pre class="cpp"> <span class="type"><a href="qbrush.html">QBrush</a></span> brush;
<span class="type">bool</span> darker;
<span class="keyword">const</span> <span class="type"><a href="qstyleoptionbutton.html">QStyleOptionButton</a></span> <span class="operator">*</span>buttonOption <span class="operator">=</span>
qstyleoption_cast<span class="operator"><</span><span class="keyword">const</span> <span class="type"><a href="qstyleoptionbutton.html">QStyleOptionButton</a></span> <span class="operator">*</span><span class="operator">></span>(option);
<span class="keyword">if</span> (buttonOption
<span class="operator">&</span><span class="operator">&</span> (buttonOption<span class="operator">-</span><span class="operator">></span>features <span class="operator">&</span> <span class="type"><a href="qstyleoptionbutton.html">QStyleOptionButton</a></span><span class="operator">::</span>Flat)) {
brush <span class="operator">=</span> option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>background();
darker <span class="operator">=</span> (option<span class="operator">-</span><span class="operator">></span>state <span class="operator">&</span> (State_Sunken <span class="operator">|</span> State_On));
} <span class="keyword">else</span> {
<span class="keyword">if</span> (option<span class="operator">-</span><span class="operator">></span>state <span class="operator">&</span> (State_Sunken <span class="operator">|</span> State_On)) {
brush <span class="operator">=</span> option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>mid();
darker <span class="operator">=</span> <span class="operator">!</span>(option<span class="operator">-</span><span class="operator">></span>state <span class="operator">&</span> State_Sunken);
} <span class="keyword">else</span> {
brush <span class="operator">=</span> option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>button();
darker <span class="operator">=</span> <span class="keyword">false</span>;
}
}</pre>
<p>We define two variables, <tt>brush</tt> and <tt>darker</tt>, and initialize them based on the state of the button:</p>
<ul>
<li>If the button is a <a href="qpushbutton.html#flat-prop">flat button</a>, we use the <a href="qpalette.html#ColorRole-enum">Background</a> brush. We set <tt>darker</tt> to <tt>true</tt> if the button is <a href="qabstractbutton.html#down-prop">down</a> or <a href="qabstractbutton.html#checked-prop">checked</a>.</li>
<li>If the button is currently held down by the user or in the <a href="qabstractbutton.html#checked-prop">checked</a> state, we use the <a href="qpalette.html#ColorRole-enum">Mid</a> component of the palette. We set <tt>darker</tt> to <tt>true</tt> if the button is <a href="qabstractbutton.html#checked-prop">checked</a>.</li>
<li>Otherwise, we use the <a href="qpalette.html#ColorRole-enum">Button</a> component of the palette.</li>
</ul>
<p>The screenshot below illustrates how <a href="qpushbutton.html">QPushButton</a>s are rendered based on their state:</p>
<p class="centerAlign"><img src="images/styles-woodbuttons.png" alt="Norwegian Wood buttons in different states" /></p><p>To discover whether the button is flat or not, we need to cast the <tt>option</tt> parameter to <a href="qstyleoptionbutton.html">QStyleOptionButton</a> and check if the <a href="qstyleoptionbutton.html#features-var">features</a> member specifies the <a href="qstyleoptionbutton.html#ButtonFeature-enum">QStyleOptionButton::Flat</a> flag. The <a href="qstyleoption.html#qstyleoption_cast">qstyleoption_cast</a>() function performs a dynamic cast; if <tt>option</tt> is not a <a href="qstyleoptionbutton.html">QStyleOptionButton</a>, <a href="qstyleoption.html#qstyleoption_cast">qstyleoption_cast</a>() returns a null pointer.</p>
<pre class="cpp"> painter<span class="operator">-</span><span class="operator">></span>save();
painter<span class="operator">-</span><span class="operator">></span>setRenderHint(<span class="type"><a href="qpainter.html">QPainter</a></span><span class="operator">::</span>Antialiasing<span class="operator">,</span> <span class="keyword">true</span>);
painter<span class="operator">-</span><span class="operator">></span>fillPath(roundRect<span class="operator">,</span> brush);
<span class="keyword">if</span> (darker)
painter<span class="operator">-</span><span class="operator">></span>fillPath(roundRect<span class="operator">,</span> slightlyOpaqueBlack);</pre>
<p>We turn on antialiasing on <a href="qpainter.html">QPainter</a>. Antialiasing is a technique that reduces the visual distortion that occurs when the edges of a shape are converted into pixels. For the Norwegian Wood style, we use it to obtain smoother edges for the round buttons.</p>
<p class="centerAlign"><img src="images/styles-aliasing.png" alt="Norwegian wood buttons with and without antialiasing" /></p><p>The first call to <a href="qpainter.html#fillPath">QPainter::fillPath</a>() draws the background of the button with a wooden texture. The second call to <a href="qpainter.html#fillPath">fillPath()</a> paints the same area with a semi-transparent black color (a black color with an alpha channel of 63) to make the area darker if <tt>darker</tt> is true.</p>
<pre class="cpp"> <span class="type">int</span> penWidth;
<span class="keyword">if</span> (radius <span class="operator"><</span> <span class="number">10</span>)
penWidth <span class="operator">=</span> <span class="number">3</span>;
<span class="keyword">else</span> <span class="keyword">if</span> (radius <span class="operator"><</span> <span class="number">20</span>)
penWidth <span class="operator">=</span> <span class="number">5</span>;
<span class="keyword">else</span>
penWidth <span class="operator">=</span> <span class="number">7</span>;
<span class="type"><a href="qpen.html">QPen</a></span> topPen(semiTransparentWhite<span class="operator">,</span> penWidth);
<span class="type"><a href="qpen.html">QPen</a></span> bottomPen(semiTransparentBlack<span class="operator">,</span> penWidth);
<span class="keyword">if</span> (option<span class="operator">-</span><span class="operator">></span>state <span class="operator">&</span> (State_Sunken <span class="operator">|</span> State_On))
<a href="qtalgorithms.html#qSwap">qSwap</a>(topPen<span class="operator">,</span> bottomPen);</pre>
<p>Next, we draw the outline. The top-left half of the outline and the bottom-right half of the outline are drawn using different <a href="qpen.html">QPen</a>s to produce a 3D effect. Normally, the top-left half of the outline is drawn lighter whereas the bottom-right half is drawn darker, but if the button is <a href="qabstractbutton.html#down-prop">down</a> or <a href="qabstractbutton.html#checked-prop">checked</a>, we invert the two <a href="qpen.html">QPen</a>s to give a sunken look to the button.</p>
<pre class="cpp"> <span class="type">int</span> x1 <span class="operator">=</span> x;
<span class="type">int</span> x2 <span class="operator">=</span> x <span class="operator">+</span> radius;
<span class="type">int</span> x3 <span class="operator">=</span> x <span class="operator">+</span> width <span class="operator">-</span> radius;
<span class="type">int</span> x4 <span class="operator">=</span> x <span class="operator">+</span> width;
<span class="keyword">if</span> (option<span class="operator">-</span><span class="operator">></span>direction <span class="operator">=</span><span class="operator">=</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>RightToLeft) {
<a href="qtalgorithms.html#qSwap">qSwap</a>(x1<span class="operator">,</span> x4);
<a href="qtalgorithms.html#qSwap">qSwap</a>(x2<span class="operator">,</span> x3);
}
<span class="type"><a href="qpolygon.html">QPolygon</a></span> topHalf;
topHalf <span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x1<span class="operator">,</span> y)
<span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x4<span class="operator">,</span> y)
<span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x3<span class="operator">,</span> y <span class="operator">+</span> radius)
<span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x2<span class="operator">,</span> y <span class="operator">+</span> height <span class="operator">-</span> radius)
<span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qpoint.html">QPoint</a></span>(x1<span class="operator">,</span> y <span class="operator">+</span> height);
painter<span class="operator">-</span><span class="operator">></span>setClipPath(roundRect);
painter<span class="operator">-</span><span class="operator">></span>setClipRegion(topHalf<span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>IntersectClip);
painter<span class="operator">-</span><span class="operator">></span>setPen(topPen);
painter<span class="operator">-</span><span class="operator">></span>drawPath(roundRect);</pre>
<p>We draw the top-left part of the outline by calling <a href="qpainter.html#drawPath">QPainter::drawPath</a>() with an appropriate <a href="qpainter.html#setClipRegion">clip region</a>. If the <a href="qstyleoption.html#direction-var">layout direction</a> is right-to-left instead of left-to-right, we swap the <tt>x1</tt>, <tt>x2</tt>, <tt>x3</tt>, and <tt>x4</tt> variables to obtain correct results. On right-to-left desktop, the "light" comes from the top-right corner of the screen instead of the top-left corner; raised and sunken widgets must be drawn accordingly.</p>
<p>The diagram below illustrates how 3D effects are drawn according to the layout direction. The area in red on the diagram corresponds to the <tt>topHalf</tt> polygon:</p>
<p class="centerAlign"><img src="images/styles-3d.png" alt="" /></p><p>An easy way to test how a style looks in right-to-left mode is to pass the <tt>-reverse</tt> command-line option to the application. This option is recognized by the <a href="qapplication.html">QApplication</a> constructor.</p>
<pre class="cpp"> <span class="type"><a href="qpolygon.html">QPolygon</a></span> bottomHalf <span class="operator">=</span> topHalf;
bottomHalf<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>(x4<span class="operator">,</span> y <span class="operator">+</span> height);
painter<span class="operator">-</span><span class="operator">></span>setClipPath(roundRect);
painter<span class="operator">-</span><span class="operator">></span>setClipRegion(bottomHalf<span class="operator">,</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>IntersectClip);
painter<span class="operator">-</span><span class="operator">></span>setPen(bottomPen);
painter<span class="operator">-</span><span class="operator">></span>drawPath(roundRect);
painter<span class="operator">-</span><span class="operator">></span>setPen(option<span class="operator">-</span><span class="operator">></span>palette<span class="operator">.</span>foreground()<span class="operator">.</span>color());
painter<span class="operator">-</span><span class="operator">></span>setClipping(<span class="keyword">false</span>);
painter<span class="operator">-</span><span class="operator">></span>drawPath(roundRect);
painter<span class="operator">-</span><span class="operator">></span>restore();
}
<span class="keyword">break</span>;
<span class="keyword">default</span>:
<span class="type"><a href="qmotifstyle.html">QMotifStyle</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>The bottom-right part of the outline is drawn in a similar fashion. Then we draw a one-pixel wide outline around the entire button, using the <a href="qpalette.html#ColorRole-enum">Foreground</a> component of the <a href="qpalette.html">QPalette</a>.</p>
<p>This completes the <a href="qstyle.html#PrimitiveElement-enum">QStyle::PE_PanelButtonCommand</a> case of the <tt>switch</tt> statement. Other primitive elements are handled by the base style. Let's now turn to the other <tt>NorwegianWoodStyle</tt> member functions:</p>
<pre class="cpp"> <span class="type">void</span> NorwegianWoodStyle<span class="operator">::</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="keyword">const</span>
{
<span class="keyword">switch</span> (element) {
<span class="keyword">case</span> CE_PushButtonLabel:
{
<span class="type"><a href="qstyleoptionbutton.html">QStyleOptionButton</a></span> myButtonOption;
<span class="keyword">const</span> <span class="type"><a href="qstyleoptionbutton.html">QStyleOptionButton</a></span> <span class="operator">*</span>buttonOption <span class="operator">=</span>
qstyleoption_cast<span class="operator"><</span><span class="keyword">const</span> <span class="type"><a href="qstyleoptionbutton.html">QStyleOptionButton</a></span> <span class="operator">*</span><span class="operator">></span>(option);
<span class="keyword">if</span> (buttonOption) {
myButtonOption <span class="operator">=</span> <span class="operator">*</span>buttonOption;
<span class="keyword">if</span> (myButtonOption<span class="operator">.</span>palette<span class="operator">.</span>currentColorGroup()
<span class="operator">!</span><span class="operator">=</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>Disabled) {
<span class="keyword">if</span> (myButtonOption<span class="operator">.</span>state <span class="operator">&</span> (State_Sunken <span class="operator">|</span> State_On)) {
myButtonOption<span class="operator">.</span>palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>ButtonText<span class="operator">,</span>
myButtonOption<span class="operator">.</span>palette<span class="operator">.</span>brightText());
}
}
}
<span class="type"><a href="qmotifstyle.html">QMotifStyle</a></span><span class="operator">::</span>drawControl(element<span class="operator">,</span> <span class="operator">&</span>myButtonOption<span class="operator">,</span> painter<span class="operator">,</span> widget);
}
<span class="keyword">break</span>;
<span class="keyword">default</span>:
<span class="type"><a href="qmotifstyle.html">QMotifStyle</a></span><span class="operator">::</span>drawControl(element<span class="operator">,</span> option<span class="operator">,</span> painter<span class="operator">,</span> widget);
}
}</pre>
<p>We reimplement <a href="qstyle.html#drawControl">QStyle::drawControl</a>() to draw the text on a <a href="qpushbutton.html">QPushButton</a> in a bright color when the button is <a href="qabstractbutton.html#down-prop">down</a> or <a href="qabstractbutton.html#checked-prop">checked</a>.</p>
<p>If the <tt>option</tt> parameter points to a <a href="qstyleoptionbutton.html">QStyleOptionButton</a> object (it normally should), we take a copy of the object and modify its <a href="qstyleoption.html#palette-var">palette</a> member to make the <a href="qpalette.html#ColorRole-enum">QPalette::ButtonText</a> be the same as the <a href="qpalette.html#ColorRole-enum">QPalette::BrightText</a> component (unless the widget is disabled).</p>
<pre class="cpp"> <span class="type">void</span> NorwegianWoodStyle<span class="operator">::</span>setTexture(<span class="type"><a href="qpalette.html">QPalette</a></span> <span class="operator">&</span>palette<span class="operator">,</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>ColorRole role<span class="operator">,</span>
<span class="keyword">const</span> <span class="type"><a href="qpixmap.html">QPixmap</a></span> <span class="operator">&</span>pixmap)
{
<span class="keyword">for</span> (<span class="type">int</span> i <span class="operator">=</span> <span class="number">0</span>; i <span class="operator"><</span> <span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>NColorGroups; <span class="operator">+</span><span class="operator">+</span>i) {
<span class="type"><a href="qcolor.html">QColor</a></span> color <span class="operator">=</span> palette<span class="operator">.</span>brush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>ColorGroup(i)<span class="operator">,</span> role)<span class="operator">.</span>color();
palette<span class="operator">.</span>setBrush(<span class="type"><a href="qpalette.html">QPalette</a></span><span class="operator">::</span>ColorGroup(i)<span class="operator">,</span> role<span class="operator">,</span> <span class="type"><a href="qbrush.html">QBrush</a></span>(color<span class="operator">,</span> pixmap));
}
}</pre>
<p>The <tt>setTexture()</tt> function is a private function that sets the <a href="qbrush.html#texture">texture</a> component of the <a href="qbrush.html">QBrush</a>es for a certain <a href="qpalette.html#ColorRole-enum">color role</a>, for all three <a href="qpalette.html#ColorGroup-enum">color groups</a> (active, disabled, inactive). We used it to initialize the Norwegian Wood palette in <tt>polish(QPalette &)</tt>.</p>
<pre class="cpp"> <span class="type"><a href="qpainterpath.html">QPainterPath</a></span> NorwegianWoodStyle<span class="operator">::</span>roundRectPath(<span class="keyword">const</span> <span class="type"><a href="qrect.html">QRect</a></span> <span class="operator">&</span>rect)
{
<span class="type">int</span> radius <span class="operator">=</span> <a href="qtglobal.html#qMin">qMin</a>(rect<span class="operator">.</span>width()<span class="operator">,</span> rect<span class="operator">.</span>height()) <span class="operator">/</span> <span class="number">2</span>;
<span class="type">int</span> diam <span class="operator">=</span> <span class="number">2</span> <span class="operator">*</span> radius;
<span class="type">int</span> x1<span class="operator">,</span> y1<span class="operator">,</span> x2<span class="operator">,</span> y2;
rect<span class="operator">.</span>getCoords(<span class="operator">&</span>x1<span class="operator">,</span> <span class="operator">&</span>y1<span class="operator">,</span> <span class="operator">&</span>x2<span class="operator">,</span> <span class="operator">&</span>y2);
<span class="type"><a href="qpainterpath.html">QPainterPath</a></span> path;
path<span class="operator">.</span>moveTo(x2<span class="operator">,</span> y1 <span class="operator">+</span> radius);
path<span class="operator">.</span>arcTo(<span class="type"><a href="qrect.html">QRect</a></span>(x2 <span class="operator">-</span> diam<span class="operator">,</span> y1<span class="operator">,</span> diam<span class="operator">,</span> diam)<span class="operator">,</span> <span class="number">0.0</span><span class="operator">,</span> <span class="operator">+</span><span class="number">90.0</span>);
path<span class="operator">.</span>lineTo(x1 <span class="operator">+</span> radius<span class="operator">,</span> y1);
path<span class="operator">.</span>arcTo(<span class="type"><a href="qrect.html">QRect</a></span>(x1<span class="operator">,</span> y1<span class="operator">,</span> diam<span class="operator">,</span> diam)<span class="operator">,</span> <span class="number">90.0</span><span class="operator">,</span> <span class="operator">+</span><span class="number">90.0</span>);
path<span class="operator">.</span>lineTo(x1<span class="operator">,</span> y2 <span class="operator">-</span> radius);
path<span class="operator">.</span>arcTo(<span class="type"><a href="qrect.html">QRect</a></span>(x1<span class="operator">,</span> y2 <span class="operator">-</span> diam<span class="operator">,</span> diam<span class="operator">,</span> diam)<span class="operator">,</span> <span class="number">180.0</span><span class="operator">,</span> <span class="operator">+</span><span class="number">90.0</span>);
path<span class="operator">.</span>lineTo(x1 <span class="operator">+</span> radius<span class="operator">,</span> y2);
path<span class="operator">.</span>arcTo(<span class="type"><a href="qrect.html">QRect</a></span>(x2 <span class="operator">-</span> diam<span class="operator">,</span> y2 <span class="operator">-</span> diam<span class="operator">,</span> diam<span class="operator">,</span> diam)<span class="operator">,</span> <span class="number">270.0</span><span class="operator">,</span> <span class="operator">+</span><span class="number">90.0</span>);
path<span class="operator">.</span>closeSubpath();
<span class="keyword">return</span> path;
}</pre>
<p>The <tt>roundRectPath()</tt> function is a private function that constructs a <a href="qpainterpath.html">QPainterPath</a> object for round buttons. The path consists of eight segments: four arc segments for the corners and four lines for the sides.</p>
<p>With around 250 lines of code, we have a fully functional custom style based on one of the predefined styles. Custom styles can be used to provide a distinct look to an application or family of applications.</p>
<a name="widgetgallery-class"></a>
<h2>WidgetGallery Class</h2>
<p>For completeness, we will quickly review the <tt>WidgetGallery</tt> class, which contains the most common Qt widgets and allows the user to change style dynamically. Here's the class definition:</p>
<pre class="cpp"> <span class="keyword">class</span> WidgetGallery : <span class="keyword">public</span> <span class="type"><a href="qdialog.html">QDialog</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
WidgetGallery(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="keyword">private</span> <span class="keyword">slots</span>:
<span class="type">void</span> changeStyle(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>styleName);
<span class="type">void</span> changePalette();
<span class="type">void</span> advanceProgressBar();
<span class="keyword">private</span>:
<span class="type">void</span> createTopLeftGroupBox();
<span class="type">void</span> createTopRightGroupBox();
<span class="type">void</span> createBottomLeftTabWidget();
<span class="type">void</span> createBottomRightGroupBox();
<span class="type">void</span> createProgressBar();
<span class="type"><a href="qpalette.html">QPalette</a></span> originalPalette;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>styleLabel;
<span class="type"><a href="qcombobox.html">QComboBox</a></span> <span class="operator">*</span>styleComboBox;
<span class="type"><a href="qcheckbox.html">QCheckBox</a></span> <span class="operator">*</span>useStylePaletteCheckBox;
<span class="type"><a href="qcheckbox.html">QCheckBox</a></span> <span class="operator">*</span>disableWidgetsCheckBox;
...
};</pre>
<p>Here's the <tt>WidgetGallery</tt> constructor:</p>
<pre class="cpp"> WidgetGallery<span class="operator">::</span>WidgetGallery(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qdialog.html">QDialog</a></span>(parent)
{
originalPalette <span class="operator">=</span> <span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>palette();
styleComboBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcombobox.html">QComboBox</a></span>;
styleComboBox<span class="operator">-</span><span class="operator">></span>addItem(<span class="string">"NorwegianWood"</span>);
styleComboBox<span class="operator">-</span><span class="operator">></span>addItems(<span class="type"><a href="qstylefactory.html">QStyleFactory</a></span><span class="operator">::</span>keys());
styleLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"&Style:"</span>));
styleLabel<span class="operator">-</span><span class="operator">></span>setBuddy(styleComboBox);
useStylePaletteCheckBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcheckbox.html">QCheckBox</a></span>(tr(<span class="string">"&Use style's standard palette"</span>));
useStylePaletteCheckBox<span class="operator">-</span><span class="operator">></span>setChecked(<span class="keyword">true</span>);
disableWidgetsCheckBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcheckbox.html">QCheckBox</a></span>(tr(<span class="string">"&Disable widgets"</span>));
createTopLeftGroupBox();
createTopRightGroupBox();
createBottomLeftTabWidget();
createBottomRightGroupBox();
createProgressBar();</pre>
<p>We start by creating child widgets. The <b>Style</b> combobox is initialized with all the styles known to <a href="qstylefactory.html">QStyleFactory</a>, in addition to <tt>NorwegianWood</tt>. The <tt>create...()</tt> functions are private functions that set up the various parts of the <tt>WidgetGallery</tt>.</p>
<pre class="cpp"> connect(styleComboBox<span class="operator">,</span> SIGNAL(activated(<span class="type"><a href="qstring.html">QString</a></span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(changeStyle(<span class="type"><a href="qstring.html">QString</a></span>)));
connect(useStylePaletteCheckBox<span class="operator">,</span> SIGNAL(toggled(<span class="type">bool</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(changePalette()));
connect(disableWidgetsCheckBox<span class="operator">,</span> SIGNAL(toggled(<span class="type">bool</span>))<span class="operator">,</span>
topLeftGroupBox<span class="operator">,</span> SLOT(setDisabled(<span class="type">bool</span>)));
connect(disableWidgetsCheckBox<span class="operator">,</span> SIGNAL(toggled(<span class="type">bool</span>))<span class="operator">,</span>
topRightGroupBox<span class="operator">,</span> SLOT(setDisabled(<span class="type">bool</span>)));
connect(disableWidgetsCheckBox<span class="operator">,</span> SIGNAL(toggled(<span class="type">bool</span>))<span class="operator">,</span>
bottomLeftTabWidget<span class="operator">,</span> SLOT(setDisabled(<span class="type">bool</span>)));
connect(disableWidgetsCheckBox<span class="operator">,</span> SIGNAL(toggled(<span class="type">bool</span>))<span class="operator">,</span>
bottomRightGroupBox<span class="operator">,</span> SLOT(setDisabled(<span class="type">bool</span>)));</pre>
<p>We connect the <b>Style</b> combobox to the <tt>changeStyle()</tt> private slot, the <b>Use style's standard palette</b> check box to the <tt>changePalette()</tt> slot, and the <b>Disable widgets</b> check box to the child widgets' <a href="qwidget.html#setDisabled">setDisabled()</a> slot.</p>
<pre class="cpp"> <span class="type"><a href="qhboxlayout.html">QHBoxLayout</a></span> <span class="operator">*</span>topLayout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qhboxlayout.html">QHBoxLayout</a></span>;
topLayout<span class="operator">-</span><span class="operator">></span>addWidget(styleLabel);
topLayout<span class="operator">-</span><span class="operator">></span>addWidget(styleComboBox);
topLayout<span class="operator">-</span><span class="operator">></span>addStretch(<span class="number">1</span>);
topLayout<span class="operator">-</span><span class="operator">></span>addWidget(useStylePaletteCheckBox);
topLayout<span class="operator">-</span><span class="operator">></span>addWidget(disableWidgetsCheckBox);
<span class="type"><a href="qgridlayout.html">QGridLayout</a></span> <span class="operator">*</span>mainLayout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qgridlayout.html">QGridLayout</a></span>;
mainLayout<span class="operator">-</span><span class="operator">></span>addLayout(topLayout<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">2</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(topLeftGroupBox<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">0</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(topRightGroupBox<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(bottomLeftTabWidget<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">0</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(bottomRightGroupBox<span class="operator">,</span> <span class="number">2</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(progressBar<span class="operator">,</span> <span class="number">3</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">2</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>setRowStretch(<span class="number">1</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>setRowStretch(<span class="number">2</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>setColumnStretch(<span class="number">0</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>setColumnStretch(<span class="number">1</span><span class="operator">,</span> <span class="number">1</span>);
setLayout(mainLayout);
setWindowTitle(tr(<span class="string">"Styles"</span>));
changeStyle(<span class="string">"NorwegianWood"</span>);
}</pre>
<p>Finally, we put the child widgets in layouts.</p>
<pre class="cpp"> <span class="type">void</span> WidgetGallery<span class="operator">::</span>changeStyle(<span class="keyword">const</span> <span class="type"><a href="qstring.html">QString</a></span> <span class="operator">&</span>styleName)
{
<span class="keyword">if</span> (styleName <span class="operator">=</span><span class="operator">=</span> <span class="string">"NorwegianWood"</span>) {
<span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>setStyle(<span class="keyword">new</span> NorwegianWoodStyle);
} <span class="keyword">else</span> {
<span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>setStyle(<span class="type"><a href="qstylefactory.html">QStyleFactory</a></span><span class="operator">::</span>create(styleName));
}
changePalette();
}</pre>
<p>When the user changes the style in the combobox, we call <a href="qapplication.html#setStyle">QApplication::setStyle</a>() to dynamically change the style of the application.</p>
<pre class="cpp"> <span class="type">void</span> WidgetGallery<span class="operator">::</span>changePalette()
{
<span class="keyword">if</span> (useStylePaletteCheckBox<span class="operator">-</span><span class="operator">></span>isChecked())
<span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>setPalette(<span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>style()<span class="operator">-</span><span class="operator">></span>standardPalette());
<span class="keyword">else</span>
<span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>setPalette(originalPalette);
}</pre>
<p>If the user turns the <b>Use style's standard palette</b> on, the current style's <a href="qstyle.html#standardPalette">standard palette</a> is used; otherwise, the system's default palette is honored.</p>
<p>For the Norwegian Wood style, this makes no difference because we always override the palette with our own palette in <tt>NorwegianWoodStyle::polish()</tt>.</p>
<pre class="cpp"> <span class="type">void</span> WidgetGallery<span class="operator">::</span>advanceProgressBar()
{
<span class="type">int</span> curVal <span class="operator">=</span> progressBar<span class="operator">-</span><span class="operator">></span>value();
<span class="type">int</span> maxVal <span class="operator">=</span> progressBar<span class="operator">-</span><span class="operator">></span>maximum();
progressBar<span class="operator">-</span><span class="operator">></span>setValue(curVal <span class="operator">+</span> (maxVal <span class="operator">-</span> curVal) <span class="operator">/</span> <span class="number">100</span>);
}</pre>
<p>The <tt>advanceProgressBar()</tt> slot is called at regular intervals to advance the progress bar. Since we don't know how long the user will keep the Styles application running, we use a logarithmic formula: The closer the progress bar gets to 100%, the slower it advances.</p>
<p>We will review <tt>createProgressBar()</tt> in a moment.</p>
<pre class="cpp"> <span class="type">void</span> WidgetGallery<span class="operator">::</span>createTopLeftGroupBox()
{
topLeftGroupBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qgroupbox.html">QGroupBox</a></span>(tr(<span class="string">"Group 1"</span>));
radioButton1 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qradiobutton.html">QRadioButton</a></span>(tr(<span class="string">"Radio button 1"</span>));
radioButton2 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qradiobutton.html">QRadioButton</a></span>(tr(<span class="string">"Radio button 2"</span>));
radioButton3 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qradiobutton.html">QRadioButton</a></span>(tr(<span class="string">"Radio button 3"</span>));
radioButton1<span class="operator">-</span><span class="operator">></span>setChecked(<span class="keyword">true</span>);
checkBox <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qcheckbox.html">QCheckBox</a></span>(tr(<span class="string">"Tri-state check box"</span>));
checkBox<span class="operator">-</span><span class="operator">></span>setTristate(<span class="keyword">true</span>);
checkBox<span class="operator">-</span><span class="operator">></span>setCheckState(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>PartiallyChecked);
<span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span> <span class="operator">*</span>layout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span>;
layout<span class="operator">-</span><span class="operator">></span>addWidget(radioButton1);
layout<span class="operator">-</span><span class="operator">></span>addWidget(radioButton2);
layout<span class="operator">-</span><span class="operator">></span>addWidget(radioButton3);
layout<span class="operator">-</span><span class="operator">></span>addWidget(checkBox);
layout<span class="operator">-</span><span class="operator">></span>addStretch(<span class="number">1</span>);
topLeftGroupBox<span class="operator">-</span><span class="operator">></span>setLayout(layout);
}</pre>
<p>The <tt>createTopLeftGroupBox()</tt> function creates the <a href="qgroupbox.html">QGroupBox</a> that occupies the top-left corner of the <tt>WidgetGallery</tt>. We skip the <tt>createTopRightGroupBox()</tt>, <tt>createBottomLeftTabWidget()</tt>, and <tt>createBottomRightGroupBox()</tt> functions, which are very similar.</p>
<pre class="cpp"> <span class="type">void</span> WidgetGallery<span class="operator">::</span>createProgressBar()
{
progressBar <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qprogressbar.html">QProgressBar</a></span>;
progressBar<span class="operator">-</span><span class="operator">></span>setRange(<span class="number">0</span><span class="operator">,</span> <span class="number">10000</span>);
progressBar<span class="operator">-</span><span class="operator">></span>setValue(<span class="number">0</span>);
<span class="type"><a href="qtimer.html">QTimer</a></span> <span class="operator">*</span>timer <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qtimer.html">QTimer</a></span>(<span class="keyword">this</span>);
connect(timer<span class="operator">,</span> SIGNAL(timeout())<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(advanceProgressBar()));
timer<span class="operator">-</span><span class="operator">></span>start(<span class="number">1000</span>);
}</pre>
<p>In <tt>createProgressBar()</tt>, we create a <a href="qprogressbar.html">QProgressBar</a> at the bottom of the <tt>WidgetGallery</tt> and connect its <a href="qtimer.html#timeout">timeout()</a> signal to the <tt>advanceProgressBar()</tt> slot.</p>
</div>
<!-- @@@widgets/styles -->
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation 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>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
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>
</body>
</html>
|
