-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathch10-02.htm
2138 lines (1398 loc) · 138 KB
/
ch10-02.htm
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
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>ch10-02</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css">
<script src="thumbnailviewer.js" type="text/javascript">
/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script> </head>
<body>
<div class="os1">10.2 滚动区域和工具箱</div>
<br>
本节介绍两种控件容器 Scroll Area、Tool Box，可以对窗口里面的控件视图扩展，容纳原本放不下的很多控件。Scroll Area
滚动区域，就是指该容器具有水平和垂直的滚动条，当容器内控件尺寸超出容器矩形区域时，将显示滚动条，通过拖动滚动条切换显示内部控件的位置。<br>
Tool Box 工具箱是支持多个页面集合到一起，每次显示一个页面，点击页面标题可以切换各个页面。<br>
<br>
<div class="os2">10.2.1 Scroll Area 滚动区域</div>
<br>
滚动区域的类是 QScrollArea，该类可以设置唯一的子控件，通过滚动条切换内部尺寸较大的控件视口（viewport）。
在不涉及滚动式，视口与控件矩形一样大。当子控件实际尺寸超过视口时，如下图所示：<br>
<center> <img src="images/ch10/ch10-02-01.png" alt="viewport"></center>
黄色矩形是真实的子控件区域，比如一张很大的图片，而我们的 QScrollArea 矩形可能只有蓝色矩形那么大的尺寸，这时候 QScrollArea
就会显示水平和垂直的滚动条，滚动条往下移动时，对应的视口矩形就向下滑动，切换显示子控件的区域。视口就是一个可以实际看见的小窗口，通过不断地滑动，来轮流显示控件的
各个区域。<br>
QScrollArea 设置唯一子控件的函数为：<br>
<div class="code">void setWidget(QWidget * widget)</div>
设置子控件之后，还可以设置子控件的对齐显示方式：<br>
<div class="code">void setAlignment(Qt::Alignment)</div>
这个对齐是子控件尺寸小于视口尺寸时才能看到效果，就是视口很大，有空余地方，决定小尺寸的子控件摆在哪个位置合适。对齐方式分为水平和垂直：<br>
<br>
<table class="tabel">
<tbody>
<tr class="d1">
<td style="width: 180px;" align="center">常量</td>
<td style="width: 120px;" align="center">数值</td>
<td align="center"><b> 描述</b></td>
</tr>
<tr>
<td>Qt::AlignLeft</td>
<td> 0x0001</td>
<td> 水平左对齐。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">Qt::AlignRight</td>
<td> 0x0002</td>
<td> 水平右对齐。</td>
</tr>
<tr>
<td style="height: 16px;">Qt::AlignHCenter</td>
<td> 0x0004</td>
<td> 水平居中。</td>
</tr>
<tr class="d1">
<td>Qt::AlignTop</td>
<td> 0x0020</td>
<td> 垂直顶部对齐。</td>
</tr>
<tr>
<td>Qt::AlignBottom</td>
<td> 0x0040</td>
<td style="height: 16px;"> 垂直底部对齐。</td>
</tr>
<tr class="d1">
<td>Qt::AlignVCenter</td>
<td style="height: 16px;"> 0x0080</td>
<td> 垂直居中。</td>
</tr>
</tbody>
</table>
<br>
水平和垂直的对齐方式可以用二进制或 | 同时设置，比如水平居中和垂直居中： <br>
Qt::AlignHCenter | Qt::AlignVCenter<br>
一般显示图片的应用程序通常图片水平和垂直都居中。<br>
QScrollArea 还可以设置 widgetResizable 属性：<br>
<div class="code">bool widgetResizable() const<br>
void setWidgetResizable(bool resizable)</div>
widgetResizable 属性默认是 false，代表 QScrollArea 尊重子控件原本的尺寸设置，程序员可以通过函数
widget()->resize() 调整子控件的尺寸， QScrollArea 自动根据调整后的子控件调整自己的滚动条显示。<br>
如果 widgetResizable 属性设置为 true，那么 QScrollArea
则可以自己做主调整子控件大小，尽量调整子控件尺寸，以避免使用到滚动条，从而有更多视口区域显示内部子控件。滚动条的绘制会占用一定的视口区
域，widgetResizable 为 true 时， QScrollArea 会尽量调整子控件尺寸避免绘制滚动条。<br>
<br>
QScrollArea 通常有两种用途，一种是显示很大的图片，比如：<br>
<div class="code">QLabel *imageLabel = new QLabel;<br>
QImage image("happyguy.png");<br>
imageLabel->setPixmap(QPixmap::fromImage(image));<br>
<br>
scrollArea = new QScrollArea;<br>
scrollArea->setBackgroundRole(QPalette::Dark);<br>
scrollArea->setWidget(imageLabel);</div>
如果图片太大，就用滚动条显示图片各个区域。<br>
第二种是显示很大的子控件容器，比如：<br>
<div class="code"> //控件容器<br>
QWidget *widContainer = new QWidget();<br>
//垂直布局器<br>
QVBoxLayout *layout = new QVBoxLayout();<br>
<br>
QLabel *curLabel;<br>
//一百个文本标签举例<br>
for(int i=0; i<100; i++)<br>
{<br>
QString strTemp = tr("Label
%1").arg( i );<br>
curLabel = new QLabel( strTemp
);<br>
layout->addWidget( curLabel
);<br>
}<br>
//容器布局<br>
widContainer->setLayout( layout );<br>
//将容器设置为滚动区域唯一子控件<br>
ui->scrollArea->setWidget( widContainer );</div>
我们将这 100 个标签控件放进布局器，然后布局器设置给容器对象，容器对象再设置给滚动区域，我们就通过滚动区域轮流显示100个标签控件。<br>
针对两种场景，QScrollArea 可以通过两个函数来移动视口位置：<br>
<div class="code">void ensureVisible(int x, int y, int
xmargin = 50, int ymargin = 50)</div>
子控件的左上角为 x=0，顶部 y=0，ensureVisible() 默认显示 (x,y) 点位置及包含该点的50*50矩形区域。<br>
改变 x 和 y 数值，视口就会移动到能够显示该坐标点的位置。<br>
第二个函数是移动视口，确保某个子孙控件显示出来：<br>
<div class="code">void ensureWidgetVisible(QWidget *
childWidget, int xmargin = 50, int ymargin = 50)</div>
QScrollArea 总是显示直接子控件的，上面函数通常是显示孙子级或更低级别的重孙、玄孙等内部控件。<br>
<br>
滚动条默认的显示策略是有必要时才显示，即子控件真实尺寸大于视口尺寸时才显示，这个策略可以设置：<br>
<div class="code">Qt::ScrollBarPolicy
horizontalScrollBarPolicy()
const //获取水平滚动条的显示策略<br>
void
setHorizontalScrollBarPolicy(Qt::ScrollBarPolicy)
//设置水平滚动条的显示策略<br>
Qt::ScrollBarPolicy verticalScrollBarPolicy()
const
//获取垂直滚动条的显示策略<br>
void
setVerticalScrollBarPolicy(Qt::ScrollBarPolicy)
//设置垂直滚动条的显示策略</div>
Qt::ScrollBarPolicy 枚举常量包括如下数值：<br>
<br>
<table class="tabel">
<tbody>
<tr class="d1">
<td style="width: 180px;" align="center">常量</td>
<td style="width: 120px;" align="center">数值</td>
<td align="center"><b> 描述</b></td>
</tr>
<tr>
<td>Qt::ScrollBarAsNeeded</td>
<td> 0</td>
<td> 内容超出视口区域才显示滚动条，否则不显示，默认策略就是该数值。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">Qt::ScrollBarAlwaysOff</td>
<td> 1</td>
<td> 永远不显示滚动条，通过鼠标滚轮或键盘上下键盲滚动。</td>
</tr>
<tr>
<td style="height: 16px;">Qt::ScrollBarAlwaysOn</td>
<td> 2</td>
<td> 不管内容区域多大，总是显示滚动条。对于Mac10.7以上系统，滚动条是瞬态显示的，就会忽略该数值。</td>
</tr>
</tbody>
</table>
<br>
默认数值 Qt::ScrollBarAsNeeded 是比较合适的，有需要就显示，不需要就不显示。<br>
通常 ensureVisible() 和 ensureWidgetVisible()
两个函数能够应付大多数的需要滚动的场景，如果有额外需求，那么还可以直接获取水平滚动条和垂直滚动条来设置：<br>
<div class="code">QScrollBar * QAbstractScrollArea::horizontalScrollBar()
const<br>
QScrollBar * QAbstractScrollArea::verticalScrollBar() const</div>
这两个函数是从基类 QAbstractScrollArea 继承的，滚动条的类型是 QScrollBar，可以使用滚动条自己的函数来设置滚动到的位置：<br>
<div class="code">void
QScrollBar::setValue(int)
//设置滚动到参数值位置，只能介 于最小值和最大值之间<br>
int QScrollBar::value()
const //获取滚动条当前位置<br>
int QScrollBar::minimum() const //最小位置<br>
int QScrollBar::maximum() const //最大位置</div>
<br>
当 QScrollArea
包裹控件容器时，有可能对子孙控件的显示缩放不合适，子孙控件由于缩放被隐藏了，这时候通过调用子控件的QWidget::setMinimumSize()
函数，设置子孙控件的最小尺寸，这样保证子孙控件的绘图区域，从而避免被隐藏。<br>
使用布局器时，布局器的 sizeConstraint 属性也会影响子孙控件的缩放，该枚举常量数值如下表所示：<br>
<br>
<table class="tabel">
<tbody>
<tr class="d1">
<td style="width: 180px;" align="center">常量</td>
<td style="width: 120px;" align="center">数值</td>
<td align="center"><b> 描述</b></td>
</tr>
<tr>
<td>QLayout::SetDefaultConstraint</td>
<td> 0</td>
<td> 控件的最小尺寸默认设置为 QLayout::minimumSize() ，除非控件自己设置了最小尺寸。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">QLayout::SetFixedSize</td>
<td> 3</td>
<td> 控件尺寸设置为 QLayoutItem::sizeHint()，尺寸固定不能变化。</td>
</tr>
<tr>
<td style="height: 16px;">QLayout::SetMinimumSize</td>
<td> 2</td>
<td> 控件最小尺寸为 QLayout::minimumSize()，不能更小。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">QLayout::SetMaximumSize</td>
<td> 4</td>
<td> 控件最大尺寸为 QLayout::maximumSize()，不能更大。</td>
</tr>
<tr>
<td style="height: 16px;">QLayout::SetMinAndMaxSize</td>
<td> 5</td>
<td> 控件尺寸位于 QLayout::minimumSize() 和 QLayout::maximumSize() 之间。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">QLayout::SetNoConstraint</td>
<td> 1</td>
<td> 控件尺寸没有任何限制。</td>
</tr>
</tbody>
</table>
<br>
修改布局器的 sizeConstraint 属性，QScrollArea 也会根据这个属性变化改变子孙控件布局。布局器
sizeConstraint 属性的默认值为 QLayout::SetDefaultConstraint 。<br>
QScrollArea 的内容介绍到这，下面我们学习一个滚动区域的示例。<br>
我们先下载两个文件，一个是地图图片，另一个是省份在图片中像素位置的文本文件：<br>
<a href="https://qtguide.ustclug.org/QtProjects/ch10/geography/china.png" target="new">
https://qtguide.ustclug.org/QtProjects/ch10/geography/china.png</a><br>
<a href="https://qtguide.ustclug.org/QtProjects/ch10/geography/china.txt" target="new">
https://qtguide.ustclug.org/QtProjects/ch10/geography/china.txt</a><br>
下载好 china.png 、china.txt 备用。<br>
我们打开 QtCreator，新建一个 Qt Widgets Application 项目，在新建项目的向导里填写：<br>
①项目名称 geography，创建路径 D:\QtProjects\ch10，点击下一步；<br>
②套件选择里面选择全部套件，点击下一步；<br>
③基类选择 QWidget，点击下一步；<br>
④项目管理不修改，点击完成。<br>
我们把下载好的 china.png 、china.txt 复制到项目文件夹 D:\QtProjects\ch10\geography，然后我们在
QtCreator 界面项目视图，右击根节点项目名geography，在右键菜单选择“添加新文件”，弹出新建文件的对话框，在新建文件对话框中，左边选择
“Qt” ，右边选择“Qt Resource File”，如图所示：<br>
<center> <img src="images/ch10/ch10-02-02.png" alt="newfile1" width="600"></center>
点击新建文件对话框的 “Choose...”按钮，进入下一步：<br>
<center> <img src="images/ch10/ch10-02-03.png" alt="newfile2" width="600"></center>
在文件名称编辑框里填写： map.qrc<br>
然后路径不变，点击“下一步” 按钮，进入下面界面：<br>
<center> <img src="images/ch10/ch10-02-04.png" alt="newfile3" width="600"></center>
不用修改，点击“完成”按钮，回到 QtCreator 界面，这样我们就新建了 Qt 资源文件 map.qrc 。<br>
我们在左边项目视图右击 map.qrc 文件，在右键菜单选择“添加现有文件...”，然后选择 china.png 、china.txt 两个文件添加到
map.qrc 资源文件里面。添加好之后，可以看到 map.qrc 现在包含两个资源：<br>
<center> <img src="images/ch10/ch10-02-05.png" alt="newfile4" width="600"></center>
资源文件就编辑好了。这个例子我们显示一张中国地图，然后新建 34 个单选按钮，点击哪个按钮，就显示哪个省份地图位置。<br>
地图较大，我们使用 QScrollArea 包裹地图以便于滚动显示；34个单选按钮也很多，我们使用容器包裹这些单选按钮，然后用 QScrollArea
包裹容器，这样可以滚动显示很多的按钮。<br>
按钮特别多情况下，我们这里使用代码来创建界面，widget.ui 界面文件我们不修改，全都用代码来生成。<br>
下面我们开始编辑头文件 widget.h 的内容：<br>
<div class="code"><span style=" color:#000080;">#ifndef</span><span style=" color:#c0c0c0;">
</span>WIDGET_H
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#define</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000080;">WIDGET_H</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QWidget></span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QScrollArea></span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//滚动区域</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QLabel></span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//标签用于显示图片</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QRadioButton></span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//单选按钮</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QHBoxLayout></span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//水平布局器</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QVBoxLayout></span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//垂直布局器</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QStringList></span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QList></span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QPoint></span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QPixmap></span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QSignalMapper></span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//信号高级映射</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">namespace</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">Ui</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">class</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">Widget</span><span style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">}</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">class</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">Widget</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">:</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">public</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QWidget</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">Q_OBJECT</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">public</span><span style=" color:#000000;">:</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">explicit</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">(</span><span style=" color:#800080;">QWidget</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span>parent<span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000080;">0</span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">~</span><span style=" font-style:italic; color:#000000;">Widget</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//初始化控件</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">void</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">InitControls</span><span
style=" color:#000000;">();</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">public</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">slots</span><span style=" color:#000000;">:</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//信号映射将所有按钮的信号都发给该槽函数</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">void</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">ShowProvince</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">int</span><span style=" color:#c0c0c0;"> </span>index<span
style=" color:#000000;">);</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">private</span><span style=" color:#000000;">:</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Ui</span><span
style=" color:#000000;">::</span><span style=" color:#800080;">Widget</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">ui</span><span
style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//省份名称</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QStringList</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listProvinces</span><span
style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//像素点位置</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QList</span><span
style=" color:#000000;"><</span><span style=" color:#800080;">QPoint</span><span
style=" color:#000000;">></span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listPoints</span><span
style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//地图</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QPixmap</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_map</span><span
style=" color:#000000;">;</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//加载地图和文本数据，包含省份和像素点位置</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">void</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">LoadData</span><span
style=" color:#000000;">();</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//信号映射对象指针</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QSignalMapper</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">m_pSigMapper</span><span
style=" color:#000000;">;</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//标签显示图片</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QLabel</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">m_labelMap</span><span
style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//左边滚动区域显示绘图</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QScrollArea</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">m_saLeftMap</span><span
style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//右边滚动区域显示一大堆按钮</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QScrollArea</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">m_saRightButtons</span><span
style=" color:#000000;">;</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">};</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#endif</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">WIDGET_H</span></pre></div>
文件开头我们添加多个类的包含，然后为窗口类添加控件初始化函数 InitControls() ；<br>手动编辑一个公开槽函数 ShowProvince(int) ，这个参数是按钮映射的整数序号，通过序号区分 34 个单选按钮；<br>我们添加成员变量 m_listProvinces 保存省份名称，m_listPoints 保存省份在地图的坐标位置，<br>m_map 保存地图图片，LoadData() 函数用于初始化时从资源文件加载图片和文本文件，<br>m_pSigMapper 保存信号映射对象，专门批量处理 34 个单选按钮的点击信号，m_labelMap 保存标签对象，用于显示绘图，<br>m_saLeftMap 保存用于左边显示地图的滚动区域对象，m_saRightButtons 用于保存右边显示按钮的滚动区域对象。<br><br>
下面我们分段编辑 widget.cpp 源文件，首先是构造函数部分：<br>
<div class="code"><span style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">"widget.h"</span>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">"ui_widget.h"</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QDebug></span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QFile></span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#800080;">Widget</span><span style=" color:#000000;">::</span><span
style=" color:#000000;">Widget</span><span style=" color:#000000;">(</span><span
style=" color:#800080;">QWidget</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span><span style=" color:#000000;">parent</span><span
style=" color:#000000;">)</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">:</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QWidget</span><span
style=" color:#000000;">(</span><span style=" color:#000000;">parent</span><span
style=" color:#000000;">),</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">ui</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">Ui</span><span style=" color:#000000;">::</span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">)</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">ui</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setupUi</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">this</span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//加载地图和文本数据，包含省份和像素点位置</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">LoadData</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//初始化控件</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">InitControls</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">}</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#800080;">Widget</span><span style=" color:#000000;">::~</span><span
style=" font-style:italic; color:#000000;">Widget</span><span style=" color:#000000;">()</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">delete</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">ui</span><span style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">}</span></pre></div>
在构造函数添加了 LoadData() 从资源文件加载数据，然后调用 InitControls() 初始化界面控件。<br>我们下面编辑加载数据的函数：<br>
<div class="code">
<style type="text/css">
p, li { white-space: pre-wrap; }
</style>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#008000;">//加载地图和文本数据，包含省份和像素点位置</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">void</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">LoadData</span><span
style=" color:#000000;">()</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//加载地图</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_map</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">load</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">":/china.png"</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//读取文本文件</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QFile</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">fileIn</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">":/china.txt"</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listProvinces</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">clear</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listPoints</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">clear</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//打开文件</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">fileIn</span><span
style=" color:#000000;">.</span><span style=" font-style:italic; color:#000000;">open</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QIODevice</span><span
style=" color:#000000;">::</span><span style=" color:#800080;">ReadOnly</span><span
style=" color:#000000;">|</span><span style=" color:#800080;">QIODevice</span><span
style=" color:#000000;">::</span><span style=" color:#800080;">Text</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">while</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">!</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">fileIn</span><span
style=" color:#000000;">.</span><span style=" font-style:italic; color:#000000;">atEnd</span><span
style=" color:#000000;">()</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">)</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QByteArray</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">baLine</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">fileIn</span><span style=" color:#000000;">.</span><span
style=" color:#000000;">readLine</span><span style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QString</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strLine</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">QString</span><span style=" color:#000000;">::</span><span
style=" color:#000000;">fromUtf8</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">baLine</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QStringList</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">liParts</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">strLine</span><span style=" color:#000000;">.</span><span
style=" color:#000000;">split</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">'\t'</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QPoint</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pt</span><span style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listProvinces</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;"><<</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">liParts</span><span
style=" color:#000000;">[</span><span style=" color:#000080;">0</span><span style=" color:#000000;">];</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pt</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">setX</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">liParts</span><span
style=" color:#000000;">[</span><span style=" color:#000080;">1</span><span style=" color:#000000;">].</span><span
style=" color:#000000;">toInt</span><span style=" color:#000000;">()</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pt</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">setY</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">liParts</span><span
style=" color:#000000;">[</span><span style=" color:#000080;">2</span><span style=" color:#000000;">].</span><span
style=" color:#000000;">toInt</span><span style=" color:#000000;">()</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listPoints</span><span
style=" color:#000000;"><<</span><span style=" color:#000000;">pt</span><span
style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">}</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//加载完毕</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">qDebug</span><span
style=" color:#000000;">()<<</span><span style=" color:#800000;">m_listProvinces</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">size</span><span style=" color:#000000;">()<<</span><span
style=" color:#800000;">m_listProvinces</span><span style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">qDebug</span><span
style=" color:#000000;">()<<</span><span style=" color:#800000;">m_listPoints</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">size</span><span style=" color:#000000;">()<<</span><span
style=" color:#800000;">m_listPoints</span><span style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">}</span></pre></div>
使用 m_map 的 load() 函数读取资源中的地图文件 ":/china.png" ；<br>根据文本文件 ":/china.txt" 新建文件读取对象 fileIn，清空 m_listProvinces 和 m_listPoints 两个列表；<br>以只读模式打开文件对象 fileIn；然后循环读取文件每一行到字节数组 baLine；<br>文件中的汉字使用 utf-8 编码，因此使用字符串的函数 QString::fromUtf8() 把字节数组转为字符串 strLine；<br>文本文件每一行都是三个数据，使用 '\t' 制表符分隔，因此使用切分函数，一行文本切成三段：<br>第 0 段是省份名称，第 1 段是 x 坐标，第 2 段是 y 坐标。<br>针对每行的三段文本，省份名称直接存到 m_listProvinces；<br>第 1 段和第 2 段转为整数之后存到 pt 点，然后把 pt 点存到 m_listPoints。<br>处理完文件后，我们打印省份个数和列表，打印点的个数和点列表。<br><br>
接下里我们重点学习这个初始化控件函数：<br>
<div class="code">
<style type="text/css">
p, li { white-space: pre-wrap; }
</style>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#008000;">//初始化控件</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">void</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">InitControls</span><span
style=" color:#000000;">()</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//使用QLabel绘图</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_labelMap</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QLabel</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_labelMap</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setPixmap</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_map</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//构建滚动区域包裹标签</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saLeftMap</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QScrollArea</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saLeftMap</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setWidget</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_labelMap</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//右边容器和布局器</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QWidget</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#000000;">pWidRight</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QWidget</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QVBoxLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#000000;">pLayoutRight</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QVBoxLayout</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//用于循环新建单选按钮</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QRadioButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#000000;">curButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000080;">NULL</span><span style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_pSigMapper</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QSignalMapper</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">this</span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//个数</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">int</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">nCount</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800000;">m_listProvinces</span><span style=" color:#000000;">.</span><span
style=" color:#000000;">size</span><span style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">for</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">int</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">i</span><span style=" color:#000000;">=</span><span style=" color:#000080;">0</span><span
style=" color:#000000;">;</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">i</span><span
style=" color:#000000;"><</span><span style=" color:#000000;">nCount</span><span
style=" color:#000000;">;</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">i</span><span
style=" color:#000000;">++)</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">curButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QRadioButton</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listProvinces</span><span
style=" color:#000000;">[</span><span style=" color:#000000;">i</span><span style=" color:#000000;">]</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//关联信号到信号映射对象</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">connect</span><span
style=" color:#000000;">(</span><span style=" color:#000000;">curButton</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">SIGNAL</span><span
style=" color:#000000;">(</span>clicked<span style=" color:#000000;">()),</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_pSigMapper</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">SLOT</span><span
style=" color:#000000;">(</span>map<span style=" color:#000000;">())</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//设置映射参数，将当前按钮的编号设置为</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">i</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_pSigMapper</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setMapping</span><span
style=" color:#000000;">(</span><span style=" color:#000000;">curButton</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">i</span><span
style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//添加到布局器</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pLayoutRight</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addWidget</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">curButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">}</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//将信号映射对象的</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">mapped()</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">信号关联到统一的槽函数</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">connect</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">m_pSigMapper</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">SIGNAL</span><span
style=" color:#000000;">(</span>mapped<span style=" color:#000000;">(</span><span
style=" color:#808000;">int</span><span style=" color:#000000;">)),</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">this</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">SLOT</span><span
style=" color:#000000;">(</span>ShowProvince<span style=" color:#000000;">(</span><span
style=" color:#808000;">int</span><span style=" color:#000000;">))</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">);</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//布局器设置给右边容器</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pWidRight</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setLayout</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pLayoutRight</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//新建右边滚动区域，将容器设置给右边滚动区域</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saRightButtons</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QScrollArea</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saRightButtons</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setWidget</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pWidRight</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//主界面布局器</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QHBoxLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#000000;">pMainLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">new</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QHBoxLayout</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pMainLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addWidget</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saLeftMap</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pMainLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addWidget</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saRightButtons</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pMainLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setStretch</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000080;">0</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000080;">4</span><span
style=" color:#000000;">);</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//左边拉伸因子</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">4</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pMainLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setStretch</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000080;">1</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000080;">1</span><span
style=" color:#000000;">);</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//右边拉伸因子</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">1</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//主窗口布局器</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">setLayout</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">pMainLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//窗口大小</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">resize</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">800</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">600</span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//最后一个单选按钮选中</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">curButton</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setChecked</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">true</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//显示最后一个单选按钮</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saRightButtons</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">ensureWidgetVisible</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">curButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//视口保证最后一个点会显示</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saLeftMap</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">ensureVisible</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listPoints</span><span
style=" color:#000000;">[</span><span style=" color:#000000;">nCount</span><span
style=" color:#000000;">-</span><span style=" color:#000080;">1</span><span style=" color:#000000;">].</span><span
style=" color:#000000;">x</span><span style=" color:#000000;">(),</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800000;">m_listPoints</span><span style=" color:#000000;">[</span><span
style=" color:#000000;">nCount</span><span style=" color:#000000;">-</span><span
style=" color:#000080;">1</span><span style=" color:#000000;">].</span><span style=" color:#000000;">y</span><span
style=" color:#000000;">(),</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000080;">200</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000080;">200</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">}</span></pre></div>
该函数先创建了标签对象存到 m_labelMap，并设置显示图片 m_map；<br>新建滚动区域存到 m_saLeftMap，设置滚动区域的子控件为 m_labelMap，用于显示大地图。<br>然后我们新建右边的容器 pWidRight、布局器 pLayoutRight；<br>curButton 指针用于临时保存后面循环中创建的每个按钮对象；<br>新建信号映射对象存到 m_pSigMapper，信号映射 QSignalMapper 的作用就是将大量有规律的信号映射到一个槽函数，批量处理。<br>然后获取省份计数，循环开始处理：<br> 新建单选按钮存到 curButton；<br> 关联按钮的点击信号到 m_pSigMapper 的槽函数 map() ；<br> 调用 m_pSigMapper->setMapping(curButton, i)，设置当前按钮映射的规律序号为 i ；<br> 将按钮 curButton 添加到右边布局器 pLayoutRight；<br>循环处理完之后，我们将 m_pSigMapper 对象的信号 mapped(int) 关联到槽函数 ShowProvince(int)，参数就是按钮映射的规律序号；<br>然后我们将右边布局器 pLayoutRight 设置给容器 pWidRight；<br>新建右边的滚动区域对象 m_saRightButtons，把容器 pWidRight 设置给右边滚动区域来显示；<br>接下来我们新建主界面布局器 pMainLayout，把两个滚动区域 m_saLeftMap、m_saRightButtons 添加给主界面布局器；<br>设置主界面布局器两个控件的拉伸因子分别为 4 和 1，这样左边地图滚动区域和右边按钮滚动区域的宽度显示比例 4:1 ；<br>将 pMainLayout 设置给主界面窗口；调整窗口大小为 800*600；<br>我们设置最后的单选按钮 curButton 为选中状态；<br>通过 m_saRightButtons->ensureWidgetVisible() 函数显示该按钮的区域；<br>通过 m_saLeftMap->ensureVisible() 函数显示该按钮对应的地图点所在区域。<br><br>这里说明一下 QSignalMapper ，信号映射类专门处理批量的信号，该类的用法就是三步走：<br>第一步，将批量控件的信号关联到 QSignalMapper 的槽函数 map() ；<br>
第二步，将批量控件对象映射为整数序号或字符串：<br>
<div class="code">void setMapping(QObject * sender, int id)<br>void setMapping(QObject * sender, const QString & text)</div>
第三步，将 QSignalMapper 的信号 mapped() 关联到一个槽函数，槽函数的参数与该信号的参数一样：<br>
<div class="code">void mapped(int i)<br>void mapped(const QString & text)</div>
这些批量的控件发信号时，QSignalMapper 自动根据源对象信号，生成新的带参数映射信号，调用带参数的槽函数，槽函数可以通过参数的整数值或字符串来判断是谁发的信号，就根据源头控件进行处理。除了整数序号和字符串，QSignalMapper 也支持参数里为 QWidget * widget 或者QObject * object映射，可以将发射信号的控件指针直接传给槽函数。<br><br>对于大批量的控件信号，如果使用普通办法一个个新建槽函数，那么槽函数添加太多也容易出错，最好的办法是使用 QSignalMapper 映射，这样我们只需要一个槽函数就能处理大批量控件的信号。<br><br>
最后我们来编辑槽函数 ShowProvince(int)代码：<br>
<div class="code">
<style type="text/css">
p, li { white-space: pre-wrap; }
</style>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#008000;">//信号映射将所有按钮的信号都发给该槽函数</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">void</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">ShowProvince</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">int</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">index</span><span style=" color:#000000;">)</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_saLeftMap</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">ensureVisible</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listPoints</span><span
style=" color:#000000;">[</span><span style=" color:#000000;">index</span><span
style=" color:#000000;">].</span><span style=" color:#000000;">x</span><span style=" color:#000000;">(),</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_listPoints</span><span
style=" color:#000000;">[</span><span style=" color:#000000;">index</span><span
style=" color:#000000;">].</span><span style=" color:#000000;">y</span><span style=" color:#000000;">(),</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">200</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">200</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">}</span></pre></div>
这个槽函数根据参数 index 决定点的序号，然后使用 m_saLeftMap->ensureVisible() 滚动显示该点位置，就是省份所在位置。<br>例子代码讲解到这，我们生成项目，运行例子：<br>
<center> <img src="images/ch10/ch10-02-06.png" alt="run1"></center>
示例程序启动时，左边地图显示了“澳门”区域，右边也滚动到了“澳门特别行政区”的单选按钮，就是代码里设置的效果，<br>单选按钮只显示了一半，因为滚动区域判断能看到该单选按钮就可以了，没有设置显示控件的全貌，属于能凑合显示就行的设置。<br>我们滚动右边按钮区域，点击“黑龙江省”的单选按钮，地图就自动切换显示黑龙江省的区域：<br>
<center> <img src="images/ch10/ch10-02-07.png" alt="run2"></center>
如果点击的省份点坐标不在当前显示区域内，滚动区域就会滚动显示到该省份；<br>如果点击的省份点坐标在当前显示区域内，点击了就没有反应，因为已经显示了，不需要挪动。<br>本示例内容介绍到这，下面我们介绍工具箱容器。<br>
<br>
<div class="os2">10.2.2 Tool Box 工具箱</div>
<br>
工具箱容器 QToolBox 可以容纳多个标签页，每个标签页就像柜子的抽屉一样堆叠在一起，通过点击多个标签页标题栏切换页面显示，每次显示一个标签页。<br>多个标签页可以按照功能分类，将同类型控件放在一个标签页内，多个标签页切换显示，就可以实现很多的功能。QToolBox 如下图所示：<br>
<center> <img src="images/ch10/ch10-02-08.png" alt="toolbox1"></center>
Page1 是默认显示的标签页，标题栏是黄色背景的文本 "Page 1"，标签页的背景色是绿色的，当我们点击 "Page 2" 标题栏时，就会切换显示第二个标签页，多个标签页切换像是单选按钮，每次启用一个：<br>
<center> <img src="images/ch10/ch10-02-09.png" alt="toolbox2"></center>
QToolBox 将每个页面当做一个 item，每个 item 都有 widget 页面，并且 item 可以带有标题文本、序号、图标、工具提示（ToolTip），比较接近列表控件的条目，列表控件的条目是文本图标为主，而 QToolBox 条目都是一个带标题的标签页 widget。<br>
QToolBox 添加标签页条目的函数如下：<br>
<div class="code">int addItem(QWidget * widget, const QIcon & iconSet, const QString & text)<br>int addItem(QWidget * w, const QString & text)<br>int insertItem(int index, QWidget * widget, const QIcon & icon, const QString & text)<br>int insertItem(int index, QWidget * widget, const QString & text)</div>
addItem() 函数将新标签页追加到所有标签页的末尾，是追加最后一个；insertItem() 是将新标签页插入到序号为 index 的位置，原来序号之后的标签页往后挪动一个。注意 widget 页面不能为空，文本一般不为空，表示该标签页的功能描述，图标可以没有。<br>
删除条目的函数如下：<br>
<div class="code">void removeItem(int index)</div>
注意 removeItem() 仅是将指定序号的标签页卸载下来，该页面不会被 delete，删除的是工具箱条目信息，而不会删除标签页 widget 控件本身。<br><br>获取工具箱包含的标签页总数使用下面函数：<br>
<div class="code">int count() const</div>
工具箱的标签页每次只能激活一个当前页面，获取当前页面的序号、标签页指针使用下面函数：<br>
<div class="code">int currentIndex() const //获取当前页面的序号，如果工具箱没有任何标签页，返回 -1<br>QWidget * currentWidget() const ////获取当前页面的指针，如果工具箱没有任何标签页，返回 NULL</div>
设置当前激活的页面是两个槽函数：<br>
<div class="code">void setCurrentIndex(int index) //槽函数，根据序号设置新的当前页面<br>void setCurrentWidget(QWidget * widget) ////槽函数，根据页面指针设置新的当前页面</div>当前页面序号变化时，会触发序号变化的信号：<br>
<div class="code">void currentChanged(int index) //当前页面切换时触发的信号</div><br>根据标签页的序号，可以修改标题文本、图标以及工具提示：<br>
<div class="code">QIcon itemIcon(int index) const //获取页面标题图标<br>QString itemText(int index) const //获取页面标题文本<br>QString itemToolTip(int index) const //获取页面标题工具提示<br>void setItemIcon(int index, const QIcon & icon) //设置页面标题图标<br>void setItemText(int index, const QString & text) //设置页面标题文本<br>void setItemToolTip(int index, const QString & toolTip) //设置页面标题工具提示</div>
<br>可以根据序号查页面指针，也可以根据页面指针反查序号，使用下面一对函数：<br>
<div class="code">QWidget * widget(int index) const //序号正确，返回正确的页面指针，如果序号错误或没有任何页面，返回 NULL<br>int indexOf(QWidget * widget) const //如果页面属于工具子页面，那么返回序号，如果不属于工具箱，返回 -1</div>
<b>使用工具箱的函数时，注意返回的序号数值可能是 -1，返回的指针可能是 NULL，要注意判断这些异常值，避免产生 bug。</b><br><br>每个标签页可以设置为启用状态或禁用状态，禁用的标签页里面子控件也都处于禁用状态：<br>
<div class="code">bool isItemEnabled(int index) const //根据序号查询标签页是否启用<br>void setItemEnabled(int index, bool enabled) //根据序号设置标签页的启用或禁用状态</div>
QToolBox 的基类是 QFrame，继承了边框绘制功能，可以参照 “10.1.2 Frame 框架”小节设置定制的边框。<br>工具箱类的内容介绍到这，下面我们学习一个示例，通过工具箱内容设置一个 Label 控件。<br>我们打开 QtCreator，新建一个 Qt Widgets Application 项目，在新建项目的向导里填写：<br>①项目名称 labeldesign，创建路径 D:\QtProjects\ch10，点击下一步；<br>②套件选择里面选择全部套件，点击下一步；<br>③基类选择 QWidget，点击下一步；<br>④项目管理不修改，点击完成。<br>我们打开 widget.ui 界面文件，向里面拖入一个标签 Label 和一个 Tool Box 容器：<br>
<center> <img src="images/ch10/ch10-02-10.png" alt="ui1" width="800"></center>
我们将标签的对象名修改为 labelShow ，设置标签 sizePolicy 的水平和垂直策略都为 Expanding：<br>
<center> <img src="images/ch10/ch10-02-11.png" alt="ui2" width="800"></center>
工具箱容器默认就有两个页面，将右边工具箱容器长宽调整拉大一些，方便后续拖入子控件。<br>点击右边工具箱的 Page 1 标题栏，修改 toolBox 当前页的属性，将 currentItemText 修改为“编辑文本”，将 currentItemName 修改为 pageText：<br>
<center> <img src="images/ch10/ch10-02-12.png" alt="ui3" width="800"></center>
这样就修改了第 0 序号的页面标题和页面对象名。<br>我们点击“Page 2”标题栏，点击该标题后会展开第 1 序号页面，再修改 currentItemText 修改为“字体字号”，将 currentItemName 修改为 pageFont：<br>
<center> <img src="images/ch10/ch10-02-13.png" alt="ui4" width="800"></center>
工具箱容器支持更多的页面，我们右击工具箱容器，在右键菜单选择“插入页”-->“在当前页之后”：<br>
<center> <img src="images/ch10/ch10-02-14.png" alt="ui5" width="800"></center>
点击在当前页之后插入页，工具箱容器就会新增一个页面，序号为 2：<br>
<center> <img src="images/ch10/ch10-02-15.png" alt="ui6" width="800"></center>
点击“页”标题栏，我们再修改工具箱容器的 currentItemText 修改为“颜色设置”，将 currentItemName 修改为 pageColor：<br>
<center> <img src="images/ch10/ch10-02-16.png" alt="ui7" width="800"></center>
这样我们设置了三个标签页，如果希望删除某个页面，先点击该页的标题展开页面，然后右击该页面，在右键菜单“N 的页N”-->“删除页”即可，N代表该页面的序号数字。<br>如果希望调整页面排序，那么右击工具箱容器，点击右键菜单“改变页顺序...”，弹出对话框：<br>
<center> <img src="images/ch10/ch10-02-17.png" alt="ui8" width="800"></center>
在该对话框可以用右边上下箭头按钮调整页面的排序，我们这里例子不需要修改排序，点击“Cancel”即可。<br>现在三个标签页是空的，未填充子控件，我们先点击“编辑文本”标题栏，展开第 0 序号标签，向其中拖入单行编辑器和一个按钮，<br>单行编辑器对象名修改为 lineEditText ，按钮对象名 pushButtonEditText，显示文本为“修改文本”：<br>
<center> <img src="images/ch10/ch10-02-18.png" alt="pageText" width="800"></center>
工具箱内容的布局，总是以选中 toolBox 开始布局，而不是选中 pageText 子页面布局，子页面属于容器，在界面编辑时不算独立控件，不能以子页面操作布局器。<br>我们点击选中工具箱容器 toolBox，然后点击上方垂直布局按钮，对工具箱的当前页面实现布局操作：<br>
<center> <img src="images/ch10/ch10-02-19.png" alt="pageTextLayout"></center>
无论是编辑工具箱页面标题还是布局器，都是以选中工具箱容器为基础，然后修改属性或进行布局，修改或布局操作会自动处理工具箱的当前页面。<br>我们再点击“字体字号”页面，展开该页面，我们拖入 Font Combo Box 和 Spin Box，字体组合框对象名 fontComboBox，字号的旋钮框对象名为 spinBoxSize：<br>
<center> <img src="images/ch10/ch10-02-20.png" alt="pageFont" width="800"></center>
然后我们选中 toolBox 对象，点击上方垂直布局按钮，对当前的“字体字号”页面进行垂直布局：<br>
<center> <img src="images/ch10/ch10-02-21.png" alt="pageFontLayout"></center>
接下来我们点击“颜色设置”标题栏，展开该页面，拖入两个标签和两个组合框，<br>第一行的标签文本“前景色”，组合框对象名为 comboBoxFGColor；第二行标签文本 “背景色”，组合框对象名 comboBoxBGColor：<br>
<center> <img src="images/ch10/ch10-02-22.png" alt="pageColor" width="800"></center>
对于现在展开的“颜色设置”页面，我们选中工具箱 toolBox 对象，然后点击上方的栅格布局器按钮，进行网格布局：<br>
<center> <img src="images/ch10/ch10-02-23.png" alt="pageColorLayout"></center>
这样我们完成了三个标签页的子控件拖入和布局。<br>对于主窗口，我们选中 Widget 根节点，点击水平布局按钮，将 labelShow 控件和工具箱容器按照水平布局：<br>
<center> <img src="images/ch10/ch10-02-24.png" alt="mainLayout"></center>
主窗口大小修改为为 520*400，这样方便展示较宽的字体组合框。<br>下面我们为工具箱容器中的子控件添加槽函数：<br>点击“编辑文本”标题栏，展开该标签页，右击“修改文本”按钮，右键菜单选择“转到槽...”，为该按钮添加 clicked() 信号的槽函数：<br>
<center> <img src="images/slots/buttonclicked.png" alt="slot1"></center>
点击“字体字号”标题栏，展开该标签页，右击字体组合框，右键菜单选择“转到槽...”，为该控件添加 currentIndexChanged(QString) 信号的槽函数：<br>
<center> <img src="images/slots/comboBoxIndexChangedQString.png" alt="slot2"></center>
右击 spinBoxSize 旋钮编辑框，右键菜单选择“转到槽...”，为该控件添加 valueChanged(int) 信号的槽函数：<br>
<center> <img src="images/slots/valueChangedint.png" alt="slot3"></center>
然后我们点击“颜色设置”标题栏，展开该标签页，右击前景色组合框，为该控件添加 currentIndexChanged(QString) 信号的槽函数：<br>
<center> <img src="images/slots/comboBoxIndexChangedQString.png" alt="slot4"></center>
我们再右击背景色组合框，为该控件添加 currentIndexChanged(QString) 信号的槽函数：<br>
<center> <img src="images/slots/comboBoxIndexChangedQString.png" alt="slot5"></center>
添加好五个控件对应的槽函数之后，我们就可以保存并关闭 widget.ui 文件，开始编辑代码。<br>我们打开 widget.h 头文件，编辑如下：<br>
<div class="code"><span style=" color:#000080;">#ifndef</span><span style=" color:#c0c0c0;"> </span>WIDGET_H
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#define</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000080;">WIDGET_H</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QWidget></span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">namespace</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">Ui</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">class</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">Widget</span><span style=" color:#000000;">;</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">}</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">class</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">Widget</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">:</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">public</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QWidget</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#000000;">{</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">Q_OBJECT</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">public</span><span style=" color:#000000;">:</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">explicit</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">(</span><span style=" color:#800080;">QWidget</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span>parent<span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000080;">0</span><span style=" color:#000000;">);</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">~</span><span style=" font-style:italic; color:#000000;">Widget</span><span
style=" color:#000000;">();</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//初始化控件</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">void</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">InitControls</span><span
style=" color:#000000;">();</span></pre>
<pre style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#808000;">private</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">slots</span><span style=" color:#000000;">:</span></pre>
<pre style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">void</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">on_pushButtonEditText_clicked</span><span
style=" color:#000000;">();</span></pre>