-
Notifications
You must be signed in to change notification settings - Fork 7
/
ch06-02.htm
1800 lines (1207 loc) · 121 KB
/
ch06-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>ch06-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">6.2 水平和垂直布局器 </div>
<br>
关于 Qt 布局管理，有专门的帮助文档页面 Layout Management。本章的主要内容就是介绍布局管理的知识，Qt
设计师里面不仅有布局器的控件可以拖动使用，还可以在窗体里面选择控件，然后点击设计师上面的工具按钮自动添加布局器。本节首先大致介绍一下 Qt
设计师里面关于布局器的操作界面，主要介绍两个基本的水平布局器 QHBoxLayout 和垂直布局器 QVBoxLayout，
将控件和布局器由小到大搭成一个完整的界面。 <br>
<br>
<div class="os2">6.2.1 布局器概览</div>
<br>
我们以下图的 Qt 设计师界面来说明布局功能，QtCreator 设计模式的布局功能与 Qt 设计师是一样的。<br>
<center><img src="images/ch06/ch06-02-01.png" alt="designer"></center>
在设计师左边列表，可以看到 Layouts 栏目里有四个布局器：<br>
◆ 垂直布局器 QVBoxLayout：将内部的控件按照垂直方向排布，一行一个。<br>
◆ 水平布局器 QHBoxLayout：将内部的控件按照水平方向排布，一列一个。<br>
◆ 网格布局器 QGridLayout：按照多行、多列的网格排布内部控件，单个控件可以占一个格子或者占据连续多个格子。<br>
◆ 表单布局器 QFormLayout：Qt
设计师里把这个布局器称为窗体布局器，窗体布局器这个叫法不准。这个布局器就是对应网页设计的表单，通常用于接收用户输入。该布局器就如它的图标一样，就是固定的两列控
件，第一列通常是标签，第二列是输入控件或含有输入控件的布局器。<br>
◆ Qt 另外还有一个堆栈布局器 QStackedLayout，通常用于容纳多个子窗口布局，每次只显示其中一个。这个布局器隐含在堆栈部件
QStackedWidget 内部，一般直接用 QStackedWidget 就行了，不需要专门设置堆栈布局器。堆栈部件和堆栈布局器留到后面容器类控件的
章节讲解。<br>
<br>
与布局紧密关联的是两个空白条（或叫弹簧条）：Horizontal Spacer 水平空白条和 Vertical Spacer
垂直空白条，空白条的作用就是填充无用的空隙，如果不希望看到控件拉伸后变丑，就可以塞一个空白条到布局器里面，布局器通常会优先拉伸空白条。两种空白条的类名都是
QSpacerItem，两种空白条只是默认的拉伸方向不一样。<br>
<br>
对界面进行布局有两种方式，第一种方式是预先设计好整体布局，先拖入布局器，后拖入功能控件到布局器里面，这种方式不太方便，因为脑海里得提前做好布局规划。第二
种方式才是是最常用的，先把所有功能控件拖入主界面，然后根据设置好的功能控件来决定如何进行布局。Qt
的布局器中既可以添加普通功能控件，也可以添加其他布局器，所以布局器的使用是非常灵活的。界面里的控件，可以先按行排列布局，再按列排列布局；或者反过来，先排好列，再
排好行；当然也可以直接用网格布局器或表单布局器。条条大道通罗马，可以按实际控件的关系和用户喜好进行布局。<br>
<br>
Qt
设计师左边列的四个布局器，其实不是经常需要拖动它们到主界面，更为常见的操作是选中控件，然后点击设计师上面布局工具栏里的快捷按钮实现布局，这些快捷按钮的功能更丰
富，也更常用。布局工具栏有 8 个按钮，下面依次介绍：<br>
① 将选中控件添加到水平布局器排列。<br>
② 将选中控件添加到垂直布局器排列。<br>
③ 将选中控件添加到水平分裂器排列。<br>
④ 将选中控件添加到垂直分裂器排列。<br>
⑤ 将选中控件添加到网格布局器排布，行列的数目不限。<br>
⑥ 将选中控件添加到表单布局器排布，该布局器固定为两列控件。<br>
⑦ 打破布局，即保留布局器内部的控件和子布局，消除当前选中的布局器。<br>
⑧ 根据需要显示的内容，自动调整控件或窗体的尺寸，相当于调用一次 adjustSize() 函数。<br>
<br>
这里需要说明一下，布局器和空白条的基类其实都是 QLayoutItem，布局器仅用于辅助功能，帮助自动调整窗口里的控件布局，并不是实体控件，没有
show() 之类的显示函数，不能单独存在，必须要有实体控件才能设置布局器。<br>
我们上一章介绍的都是实体控件，基类都是 QWidget ，都可以单独存在，有 show() 之类的显示函数。<br>
分裂器具有布局功能，但分裂器的基类是 QFrame，分裂器是一个实体控件，分裂器不同于布局器，我们到 6.6 节专门讲分裂器。<br>
<br>
<div class="os2">6.2.2 QBoxLayout</div>
<br>
水平布局器 QHBoxLayout 和垂直布局器 QVBoxLayout 的基类都是
QBoxLayout，只是二者排列方向不同。水平和垂直布局器的主要功能函数都位于基类 QBoxLayout 里面，我们这里专门介绍一下这个基类的功能。<br>
<br>
QBoxLayout 构造函数和 setDirection() 都可以指定布局器的方向：<br>
<div class="code">QBoxLayout(Direction dir, QWidget * parent = 0)</div>
<div class="code">void setDirection(Direction direction)</div>
QBoxLayout 布局器的方向 QBoxLayout::Direction 枚举不仅可以指定水平和垂直，还能指定反方向排列：<br>
<br>
<table class="tabel">
<tbody>
<tr class="d1">
<td style="width: 200px;"><b>枚举常量</b></td>
<td style="width: 100px;"><b>数值</b></td>
<td><b>描述</b></td>
</tr>
<tr>
<td style="width: 200px;"><b>QBoxLayout::LeftToRight</b></td>
<td style="width: 100px;"> 0 </td>
<td> 水平布局，从左到右排列 </td>
</tr>
<tr class="d1">
<td style="width: 200px;"><b>QBoxLayout::RightToLeft</b></td>
<td style="width: 100px;"> 1 </td>
<td> 水平布局，从右到左排列 </td>
</tr>
<tr>
<td style="width: 200px;"><b>QBoxLayout::TopToBottom</b></td>
<td style="width: 100px;"> 2 </td>
<td> 垂直布局，从上到下排列 </td>
</tr>
<tr class="d1">
<td style="width: 200px;"><b>QBoxLayout::BottomToTop</b></td>
<td style="width: 100px;"> 3 </td>
<td> 垂直布局，从下到上排列 </td>
</tr>
</tbody>
</table>
<br>
水平布局器 QHBoxLayout 和垂直布局器 QVBoxLayout 默认是其中的两种：QBoxLayout::LeftToRight 和
QBoxLayout::TopToBottom 。<br>
<br>
布局器是一定要往里面添加控件才有用，添加控件的函数如下：<br>
<div class="code">void addWidget(QWidget * widget, int stretch = 0,
Qt::Alignment alignment = 0)</div>
<div class="code">void insertWidget(int index, QWidget * widget, int stretch
= 0, Qt::Alignment alignment = 0)</div>
widget 就是要添加的控件指针，stretch 是伸展因子（到 6.5 节再讲这个，本节先不管），伸展因子越大，窗口变大时拉伸越
多，alignment 一般不需要指定，用默认的即可。第一个 addWidget() 是将控件添加到布局里面的控件列表末尾，第二个
insertWidget() 是将控件插入到布局里控件列表序号为 index 的位置。<br>
对于布局器里的各个控件，可以设置相邻控件之间默认的间距：<br>
<div class="code">void setSpacing(int spacing)</div>
spacing 就是间隔的像素点数目。如果不设置 spacing，那么布局器会根据默认策略决定如何添加控件之间的间隙，一般是根据父窗口或父布局器的策略来
定。<br>
<br>
布局器中不仅可以添加控件，还可以直接添加其他布局：<br>
<div class="code">void addLayout(QLayout * layout, int stretch = 0)</div>
<div class="code">void insertLayout(int index, QLayout * layout, int stretch
= 0)</div>
参数里添加的 layout 布局器会作为一个整体，与父布局器里其他控件一块排布，stretch 也是伸展因子。<br>
<br>
对于 QBoxLayout、QHBoxLayout 、QVBoxLayout 布局器，通常不需要手动新建空白条对象，因为它们自带相关函数：<br>
<div class="code">void QBoxLayout::addSpacing(int size)
//添加 size 固定尺寸空白条到布局器</div>
<div class="code">void QBoxLayout::addStretch(int stretch = 0)
//添加自动拉伸的空白条到布局器</div>
<div class="code">void QBoxLayout::insertSpacing(int index, int size)
//插入 size 固定尺寸空白条到布局器</div>
<div class="code">void QBoxLayout::insertStretch(int index, int stretch =
0) //插入自动拉伸的空白条到布局器</div>
对于 add* 添加函数，因为布局器内部通常有多个控件，添加函数是把空白条添加到最后。<br>
而 insert* 插入函数，是把空白条插入到指定序号 index 的位置。<br>
<br>
如果要添加自己创建的空白条对象，也是可行的：<br>
<div class="code">void addSpacerItem(QSpacerItem * spacerItem)</div>
<div class="code">void insertSpacerItem(int index, QSpacerItem * spacerItem)</div>
另外，还可以自己从 QLayoutItem 派生新的布局器条目，对布局器条目进行自定义，这些新的布局器条目可以用如下函数添加：<br>
<div class="code">virtual void addItem(QLayoutItem * item)</div>
<div class="code">void insertItem(int index, QLayoutItem * item)</div>
<br>
讲了如何添加控件和其他布局器，当然也可以计算布局器里面的条目计数：<br>
<div class="code">virtual int count() const</div>
如果要获得布局器中某个序号的条目：
<div class="code">virtual QLayoutItem * itemAt(int index) const</div>
如果要删除布局器中某个序号的条目：
<div class="code">virtual QLayoutItem * takeAt(int index)</div>
布局器中无论是填充普通控件还是其他布局器，每个条目都是用 QLayoutItem 封装的，对于获得的 QLayoutItem
指针（非空指针），如果要获取里面封装的控件、布局器或空白条，使用如下函数：<br>
<div class="code">QWidget * QLayoutItem::widget()</div>
<div class="code">QLayout * QLayoutItem::layout()</div>
<div class="code">QSpacerItem * QLayoutItem::spacerItem()</div>
注意判断以上函数的返回值是否为 NULL 指针，如果是非空指针才能进行其他操作。关于水平和垂直布局器的内容介绍这么多，下面通过例子展示怎么用这些布局器。<br>
<br>
<div class="os2">6.2.3 网络参数示例的布局</div>
<br>
前一章 5.2.4 节有一个网络参数输入的数据验证器示例 netparas ，我们以这个项目为底板构造本节的布局例子。<br>
主界面的窗体都可以通过如下函数，将一个布局器设置为主布局器（或叫总布局器、顶级布局器）：<br>
<div class="code">void QWidget::setLayout(QLayout * layout)</div>
参数里的 layout 布局器就是主布局器，会自动占满窗体内部所有区域。我们可以设置好主布局器，然后通过该函数把主布局器设置给窗体。或者，如果在
layout 布局器构造参数里用主界面窗体的指针作为该布局器父指针 parent，主界面窗体只有这唯一一个直属的布局器（其他子布局器的 parent
设置为该布局器或其他子布局器），那么这个唯一直属布局器自动成为主布局器。<br>
<br>
下面我们把 5.2.4 小节 D:\QtProjects\ch05\ 目录里的 netparas 子文件夹复制一份，<br>
保存到第 6 章例子目录 D:\QtProjects\ch06\ 里面，然后进行下面操作：<br>
① 把新的 netparas 文件夹重命名为 netparasnew，并把 netparasnew 里面的 netparas.pro.user
文件删掉。<br>
② 进入 netparasnew 文件夹，把 netparas.pro 重命名为 netparasnew.pro 。<br>
③ 用记事本打开 netparasnew.pro ，修改里面的 TARGET 一行，变成下面这句：<br>
<div class="code">TARGET = netparasnew</div>
这样我们就得到了这个新例子 netparasnew 项目。<br>
<br>
双击打开 netparasnew.pro 文件或者用 QtCreator 打开这个 netparasnew.pro 项目，在配置项目界面选择所有套件并点
击 "Configure Project" ，配置好项目后，打开 widget.ui 界面文件，进入 QtCreator 设计模式：<br>
<center><img src="images/ch06/ch06-02-02.png" alt="ui" width="800"></center>
本节只用到图上标出的两个工具栏按钮，即水平布局和垂直布局。下面教大家两套布局操作，第一套操作，另外需要在 widget.cpp 文件构造函数里加一句
setLayout() 函数设置主布局器。第二套操作，不需要手动添加任何代码，单纯用设计师操作。<br>
<br>
◆ 先看第一套布局操作：<br>
按照下图，选中第一行的两个控件，点击设计模式上面的水平布局按钮：<br>
<center><img src="images/ch06/ch06-02-03.png" alt="layout1" width="800"></center>
点击水平布局按钮之后，看到如下图中红框框的布局器：<br>
<center><img src="images/ch06/ch06-02-04.png" alt="layout2" width="800"></center>
然后类似地，选中第二行控件，点击设计模式上面的水平布局按钮；<br>
再选中第三行控件，点击设计模式上面的水平布局按钮，得到如下图所示的三行布局器：<br>
<center><img src="images/ch06/ch06-02-05.png" alt="layout3" width="800"></center>
下面要把三行水平布局器在垂直方向在进行一次布局，得到主布局器。选中三行水平布局器，然后点击设计模式上面的垂直布局按钮：<br>
<center><img src="images/ch06/ch06-02-06.png" alt="layout4" width="800"></center>
最后得到包括所有控件的主布局器：<br>
<center><img src="images/ch06/ch06-02-07.png" alt="layout5" width="800"></center>
这时候垂直布局器 verticalLayout 就是我们需要的主布局器，在 widget.cpp 的构造函数里面末尾的位置还需要添加一句代码：<br>
<div class="code"><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//第一种布局操作需要的代码</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:#c0c0c0;"> </span><span style=" color:#000000;">setLayout</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">ui</span><span style=" color:#000000;">-></span><span
style=" color:#800000;">verticalLayout</span><span style=" color:#000000;">);</span></pre>
</div>
这是第一套操作的过程。<br>
<br>
◆ 再看第二套布局操作的过程<br>
我们回到窗体没有任何布局的状态，可以按快捷键 Ctrl+A ，选中刚才全部的布局器，点击设计模式的打破布局按钮：<br>
<center><img src="images/ch06/ch06-02-08.png" alt="break" width="800"></center>
上图打破布局按钮的功能是这样的，如果选中单个布局器，它就打破选中的那一个布局器；<br>
如果选中所有的控件和布局器，它就打破所有的布局器，只剩下普通控件。打破所有布局后，回到没有布局器的状态：<br>
<center><img src="images/ch06/ch06-02-09.png" alt="break2" width="800"></center>
然后我们从头开始布局，选中第一行的两个控件，点击上面水平布局按钮；<br>
选中第二行的两个控件，点击上面的水平布局按钮；<br>
再选中第三行的两个控件，也点击上面的水平布局按钮。得到三行水平布局：<br>
<center><img src="images/ch06/ch06-02-10.png" alt="lay1" width="800"></center>
得到三行水平布局之后，我们需要设置最后的主布局器，注意这里第二套操作的过程，与之前第一套的操作不同。<br>
<br>
<span style="font-weight: bold;">我们现在点击一下主界面窗体的标题或者空白位置，不选中任何布局和控件（其实就是唯一选中主
界面窗口自身），直接点击上面的垂直 布局按钮，主界面会变成下面所示的：</span><br>
<center><img src="images/ch06/ch06-02-11.png" alt="lay2" width="800"></center>
不选中任何布局和控件，直接在上面点击垂直布局器，这时候垂直布局器自动成为主窗体的主布局器，并且在右下角的属性编辑一栏会多出来一个 Layout 属性。<br>
因为现在 verticalLayout 自动成为了主布局器，它填满了整个主窗体，原先的三行水平布局器的高度都变高了，每个水平布局器大约是主窗体的三分之一
高。<br>
一般情况下，主界面的窗体 Widget 没有 Layout
属性，只有像刚才那样操作，不选中布局和控件，直接点击上面的布局器，才会自动为主界面的窗体添加主布局器，Widget 才有 Layout
属性，就是主布局器。<br>
无论是主布局器，还是一般的子布局器，都有几个可以设置的属性条目：<br>
① layoutName，布局器名称，uic 自动为界面生成窗体代码时，这个名字就是布局器对象的指针，比如 ui->verticalLayout
。<br>
②
layoutLeftMargin、layoutTopMargin、layoutRightMargin、layoutBottomMargin，四个边距，布局器内部
的控件或子布局器距离该布局器四个边的距离。设置了边距之后，控件距离布局四周会有个空隙，这样界面看起来不会太挤。上图的 verticalLayout
四个边距都是 9 。<br>
③ layoutSpacing，布局器内部的控件或子布局器的固定间距，上图的三个水平布局器之间的间隙就是 6 。<br>
④ layoutStretch，布局器内的控件或子布局器的伸缩因子，默认都是 0，这个留到 6.5 节专门讲。<br>
⑤ layoutSizeConstraint，布局器的尺寸约束，一般用默认的 QLayout::SetDefaultConstraint 即可。<br>
<br>
我们按照第二套操作方法，就不需要修改 *.h 和 *.cpp 中的源代码，界面布局的设置与源代码是分离的，只需要从设计师操作 *.ui 文件就够了，这是
非常方便的。<br>
<br>
当然，上面的主界面还有一点瑕疵，就是三个标签控件宽度不一样，会看起来比较别扭。第一行的标签宽度是 18，第二行的标签宽度是 12，第三行的标签宽度是
24，我们设置三个标签控件的 minimumSize 属性，把最小宽度都设置成 24，那么三个标签就自动对齐了：<br>
<center><img src="images/ch06/ch06-02-12.png" alt="lay3" width="800"></center>
设置好标签最小宽度之后，界面里的控件就全都对齐了，而且窗体无论变大变小，都能自动适应。<br>
<br>
一般修改并保存界面文件之后，需要从 QtCreator 的菜单，点击【 构建--> 重新构建项目 "项目名" 】，需要手动重新构建项目，这样
ui_*.h 文件才会根据 *.ui 文件做更新，手动重新构建项目之后，我们运行例子程序：<br>
<center><img src="images/ch06/ch06-02-13.png" alt="run"></center>
现在可以随意拉伸或缩小程序窗口，里面的控件布局会自动适应窗口大小。<br>
这样我们就不需要手动编写任何代码，Qt 布局器会自动完成控件的分布和尺寸调整。<br>
<br>
<div class="os2">6.2.4 简易 HTML 查看器示例的布局</div>
前一章 5.3.4 节有一个简易 HTML 查看器示例 simplebrowser，我们还是用水平和垂直布局器对它进行布局。Qt
的多种布局器都可以作为窗口的主布局器，上个例子使用垂直布局器作为窗口的主布局器，现在我们试一下把水平布局器设置成窗口的主布局器。<br>
以后设置主布局器我们都是用前面介绍的第二套布局操作，自动设置窗口的主布局器，而不需要添加任何布局代码。<br>
<br>
我们把 5.3.4 小节 D:\QtProjects\ch05\ 目录里的 simplebrowser 子文件夹复制一份，<br>
保存到第 6 章例子目录 D:\QtProjects\ch06\ 里面，然后进行下面操作：<br>
① 把新的 simplebrowser 文件夹重命名为 simplebrowsernew，并把 simplebrowsernew 文件夹里的
simplebrowser.pro.user 删掉。<br>
② 进入 simplebrowsernew 文件夹，把 simplebrowser.pro 文件重命名为 simplebrowsernew.pro 。<br>
③ 用记事本打开 simplebrowsernew.pro ，修改里面的 TARGET 一行，变成下面这句：<br>
<div class="code">TARGET = simplebrowsernew</div>
这样我们就得到了新的 simplebrowsernew 项目。<br>
<br>
双击打开新项目或者用 QtCreator 打开这个 simplebrowsernew.pro 项目文件，在配置项目界面选择所有套件并点击
"Configure Project" ，配置好项目后，打开 widget.ui 界面文件，进入 QtCreator 设计模式：<br>
<center><img src="images/ch06/ch06-02-14.png" alt="ui" width="800"></center>
这个窗体里的控件是比较有规律的，中间一道缝，两边各一半。<br>
下面有三个按钮，我们先处理一下按钮的布局。<br>
选中左边两个按钮，点击设计模式上面的水平布局按钮，得到下图所示的布局器：<br>
<center><img src="images/ch06/ch06-02-15.png" alt="lay1" width="800"></center>
然后选中左边的 textBrowser 控件和两个按钮的布局器，点击设计模式上面的垂直布局按钮，得到下图所示的左半部分布局器：<br>
<center><img src="images/ch06/ch06-02-16.png" alt="lay2" width="800"></center>
这时候我们就需要注意了，这两个按钮被拉得太宽，如果布局器跟着窗体变宽，那么按钮会被拉伸得非常宽，会比较丑，这不科学。<br>
<br>
我们希望避免按钮被拉伸，就可以使用前面 6.2.1 节的空白条，我们拖动一个水平空白条，塞到第二个按钮的右边的细缝里：<br>
<center><img src="images/ch06/ch06-02-17.png" alt="lay3" width="800"></center>
这样左半边的布局就设置好了。<br>
<br>
对于空白条的拖动，可以先设置布局，再塞入空白条。当然也可以预先拖一个空白条，然后选中空白条和控件一起进行布局。<br>
有了左半边布局的经验，我们也希望右边的按钮不被拉伸，我们预先拖一个水平空白条到 "打开HTML" 按钮的左边：<br>
<center><img src="images/ch06/ch06-02-18.png" alt="lay4" width="800"></center>
我们现在选中新的空白条和 "打开HTML" 按钮，点击设计模式上面的水平布局按钮，得到下图的布局器：<br>
<center><img src="images/ch06/ch06-02-19.png" alt="lay5" width="800"></center>
然后我们选中右边带空白条的布局器和 plainTextEdit 控件，点击设计模式上面的垂直布局按钮，会生成右半部的布局器：<br>
<center><img src="images/ch06/ch06-02-20.png" alt="lay6" width="800"></center>
两个半边的布局器都设置好了，现在我们点击主窗体下方的空白区域，不选中任何布局器和控件（其实就是唯一选中主界面窗口自身），直接点击设计模式上面的水平布局按
钮，这样新的水平布局自动成为主窗体 的 Layout 属性，就是主布局器：<br>
<center><img src="images/ch06/ch06-02-21.png" alt="lay7" width="800"></center>
现在布局工作就完成了。我们点击 QtCreator 菜单【 构建--> 重新构建项目 "项目名" 】，重新构建例子，然后运行它：<br>
<center><img src="images/ch06/ch06-02-22.png" alt="run"></center>
现在随便拉伸程序的窗口都可以，Qt 布局会自动调整里面的控件分布和尺寸，整个布局过程不需要添加任何一句代码。<br>
通过这个例子，主要是介绍空白条的使用，可以先布局，再塞空白条；或者先拖好空白条，再进行布局。两种操作方式都可以。<br>
<br>
<div class="os2">6.2.5 ui_*.h 文件中布局器的内幕代码</div>
<br>
虽然我们不需要手动编写布局器的代码，但是应该学习 uic 功能生成的布局器内幕代码，因为难免遇到需要自己编写布局器代码的时候。Qt
设计师也不是万能的，学 习 ui_*.h 里面的代码是很有必要的。<br>
我们就以刚才的简易 HTML 查看器示例布局为例，学习这个例子的 ui_widget.h 里面的代码，这个文件位于影子构建目录：<br>
D:\QtProjects\ch06\build-simplebrowsernew-Desktop_Qt_5_4_0_MinGW_32bit-Debug<br>
现在把它的内容贴出来：<br>
<div class="code"><span style=" color:#000080;">#ifndef</span><span style=" color:#c0c0c0;">
</span>UI_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>UI_WIDGET_H</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;"><QtCore/QVariant></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;"><QtWidgets/QAction></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;"><QtWidgets/QApplication></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;"><QtWidgets/QButtonGroup></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;"><QtWidgets/QHBoxLayout></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;"><QtWidgets/QHeaderView></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;"><QtWidgets/QPlainTextEdit></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;"><QtWidgets/QPushButton></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;"><QtWidgets/QSpacerItem></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;"><QtWidgets/QTextBrowser></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;"><QtWidgets/QVBoxLayout></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;"><QtWidgets/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:#800080;">QT_BEGIN_NAMESPACE</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>Ui_Widget</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:#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>QHBoxLayout<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>horizontalLayout_3<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>QVBoxLayout<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>verticalLayout<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>QTextBrowser<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>textBrowser<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>QHBoxLayout<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>horizontalLayout<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>QPushButton<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>pushButtonBackward<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>QPushButton<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>pushButtonForeward<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>QSpacerItem<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>horizontalSpacer<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>QVBoxLayout<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>verticalLayout_2<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>QPlainTextEdit<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>plainTextEdit<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>QHBoxLayout<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>horizontalLayout_2<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>QSpacerItem<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>horizontalSpacer_2<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>QPushButton<span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">*</span>pushButtonOpen<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:#808000;">void</span><span
style=" color:#c0c0c0;"> </span>setupUi<span style=" color:#000000;">(</span>QWidget<span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span>Widget<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:#808000;">if</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">(</span>Widget<span
style=" color:#000000;">-></span>objectName<span style=" color:#000000;">().</span>isEmpty<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>Widget<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"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>Widget<span style=" color:#000000;">-></span>resize<span
style=" color:#000000;">(</span><span style=" color:#000080;">630</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">350</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>horizontalLayout_3<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>QHBoxLayout<span style=" color:#000000;">(</span>Widget<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>horizontalLayout_3<span style=" color:#000000;">-></span>setSpacing<span
style=" color:#000000;">(</span><span style=" color:#000080;">6</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>horizontalLayout_3<span style=" color:#000000;">-></span>setContentsMargins<span
style=" color:#000000;">(</span><span style=" color:#000080;">11</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">11</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">11</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">11</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>horizontalLayout_3<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"horizontalLayout_3"</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>verticalLayout<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>QVBoxLayout<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>verticalLayout<span style=" color:#000000;">-></span>setSpacing<span
style=" color:#000000;">(</span><span style=" color:#000080;">6</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>verticalLayout<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"verticalLayout"</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>textBrowser<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>QTextBrowser<span style=" color:#000000;">(</span>Widget<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>textBrowser<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"textBrowser"</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>verticalLayout<span style=" color:#000000;">-></span>addWidget<span
style=" color:#000000;">(</span>textBrowser<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>horizontalLayout<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>QHBoxLayout<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>horizontalLayout<span style=" color:#000000;">-></span>setSpacing<span
style=" color:#000000;">(</span><span style=" color:#000080;">6</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>horizontalLayout<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"horizontalLayout"</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>pushButtonBackward<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>QPushButton<span style=" color:#000000;">(</span>Widget<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>pushButtonBackward<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"pushButtonBackward"</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>horizontalLayout<span style=" color:#000000;">-></span>addWidget<span
style=" color:#000000;">(</span>pushButtonBackward<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>pushButtonForeward<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>QPushButton<span style=" color:#000000;">(</span>Widget<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>pushButtonForeward<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"pushButtonForeward"</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>horizontalLayout<span style=" color:#000000;">-></span>addWidget<span
style=" color:#000000;">(</span>pushButtonForeward<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>horizontalSpacer<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>QSpacerItem<span style=" color:#000000;">(</span><span
style=" color:#000080;">40</span><span style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000080;">20</span><span style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span>QSizePolicy<span
style=" color:#000000;">::</span>Expanding<span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span>QSizePolicy<span style=" color:#000000;">::</span>Minimum<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>horizontalLayout<span style=" color:#000000;">-></span>addItem<span
style=" color:#000000;">(</span>horizontalSpacer<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="-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>verticalLayout<span style=" color:#000000;">-></span>addLayout<span
style=" color:#000000;">(</span>horizontalLayout<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="-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>horizontalLayout_3<span style=" color:#000000;">-></span>addLayout<span
style=" color:#000000;">(</span>verticalLayout<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>verticalLayout_2<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>QVBoxLayout<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>verticalLayout_2<span style=" color:#000000;">-></span>setSpacing<span
style=" color:#000000;">(</span><span style=" color:#000080;">6</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>verticalLayout_2<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"verticalLayout_2"</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>plainTextEdit<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>QPlainTextEdit<span style=" color:#000000;">(</span>Widget<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>plainTextEdit<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"plainTextEdit"</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>verticalLayout_2<span style=" color:#000000;">-></span>addWidget<span
style=" color:#000000;">(</span>plainTextEdit<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>horizontalLayout_2<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>QHBoxLayout<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>horizontalLayout_2<span style=" color:#000000;">-></span>setSpacing<span
style=" color:#000000;">(</span><span style=" color:#000080;">6</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>horizontalLayout_2<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"horizontalLayout_2"</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>horizontalSpacer_2<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>QSpacerItem<span style=" color:#000000;">(</span><span
style=" color:#000080;">40</span><span style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000080;">20</span><span style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span>QSizePolicy<span
style=" color:#000000;">::</span>Expanding<span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span>QSizePolicy<span style=" color:#000000;">::</span>Minimum<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>horizontalLayout_2<span style=" color:#000000;">-></span>addItem<span
style=" color:#000000;">(</span>horizontalSpacer_2<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>pushButtonOpen<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>QPushButton<span style=" color:#000000;">(</span>Widget<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>pushButtonOpen<span style=" color:#000000;">-></span>setObjectName<span
style=" color:#000000;">(</span>QStringLiteral<span style=" color:#000000;">(</span><span
style=" color:#008000;">"pushButtonOpen"</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>horizontalLayout_2<span style=" color:#000000;">-></span>addWidget<span
style=" color:#000000;">(</span>pushButtonOpen<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="-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>verticalLayout_2<span style=" color:#000000;">-></span>addLayout<span
style=" color:#000000;">(</span>horizontalLayout_2<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="-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>horizontalLayout_3<span style=" color:#000000;">-></span>addLayout<span
style=" color:#000000;">(</span>verticalLayout_2<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="-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>retranslateUi<span style=" color:#000000;">(</span>Widget<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>QMetaObject<span style=" color:#000000;">::</span>connectSlotsByName<span
style=" color:#000000;">(</span>Widget<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=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">setupUi</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:#808000;">void</span><span
style=" color:#c0c0c0;"> </span>retranslateUi<span style=" color:#000000;">(</span>QWidget<span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span>Widget<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>Widget<span style=" color:#000000;">-></span>setWindowTitle<span
style=" color:#000000;">(</span>QApplication<span style=" color:#000000;">::</span>translate<span
style=" color:#000000;">(</span><span style=" color:#008000;">"Widget"</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">"Widget"</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>pushButtonBackward<span style=" color:#000000;">-></span>setText<span
style=" color:#000000;">(</span>QApplication<span style=" color:#000000;">::</span>translate<span
style=" color:#000000;">(</span><span style=" color:#008000;">"Widget"</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">"\345\220\216\351\200\200"</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>pushButtonForeward<span style=" color:#000000;">-></span>setText<span
style=" color:#000000;">(</span>QApplication<span style=" color:#000000;">::</span>translate<span
style=" color:#000000;">(</span><span style=" color:#008000;">"Widget"</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">"\345\211\215\350\277\233"</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>pushButtonOpen<span style=" color:#000000;">-></span>setText<span
style=" color:#000000;">(</span>QApplication<span style=" color:#000000;">::</span>translate<span
style=" color:#000000;">(</span><span style=" color:#008000;">"Widget"</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">"\346\211\223\345\274\200HTML"</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=" color:#c0c0c0;"> </span><span
style=" color:#008000;">//</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">retranslateUi</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:#808000;">namespace</span><span style=" color:#c0c0c0;"> </span>Ui<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;">class</span><span
style=" color:#c0c0c0;"> </span>Widget<span style=" color:#000000;">:</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">public</span><span
style=" color:#c0c0c0;"> </span>Ui_Widget<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><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">namespace</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">Ui</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;">QT_END_NAMESPACE</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;">UI_WIDGET_H</span></pre>
</div>
它包含的头文件就是例子用到的控件类以及其他预先包含的头文件。<br>
<br>
我们现在解释一下 Ui_Widget 类开始处的成员变量，直接用注释形式说明：<br>
<div class="code"><span style=" color:#808000;">class</span><span style=" color:#c0c0c0;">
</span><span style=" color:#800080;">Ui_Widget</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:#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;">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:#800080;">QHBoxLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">horizontalLayout_3</span><span
style=" color:#000000;">;</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:#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;">QVBoxLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">verticalLayout</span><span
style=" color:#000000;">;</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:#800080;">QTextBrowser</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">textBrowser</span><span
style=" color:#000000;">;</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:#800080;">QHBoxLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">horizontalLayout</span><span
style=" color:#000000;">;</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:#800080;">QPushButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">pushButtonBackward</span><span
style=" color:#000000;">;</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;">QPushButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">pushButtonForeward</span><span
style=" color:#000000;">;</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;">QSpacerItem</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">horizontalSpacer</span><span
style=" color:#000000;">;</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:#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;">QVBoxLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">verticalLayout_2</span><span
style=" color:#000000;">;</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:#800080;">QPlainTextEdit</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">plainTextEdit</span><span
style=" color:#000000;">;</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:#800080;">QHBoxLayout</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">horizontalLayout_2</span><span
style=" color:#000000;">;</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;">QSpacerItem</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">horizontalSpacer_2</span><span
style=" color:#000000;">;</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;">QPushButton</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">pushButtonOpen</span><span
style=" color:#000000;">;</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//打开按钮</span></pre>
</div>
解释了成员变量之后，我们来看看 setupUi() 函数，主窗体的布局器代码都在这里面，我们对代码进行分片讲解，代码内容以注释形式讲解：<br>
<div class="code"><span style=" color:#c0c0c0;"> </span><span
style=" color:#808000;">void</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">setupUi</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;">Widget</span><span
style=" color:#000000;">)</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:#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;">//Widget</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:#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;">if</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">(</span><span style=" color:#000000;">Widget</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">objectName</span><span
style=" color:#000000;">().</span><span style=" color:#000000;">isEmpty</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;">Widget</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"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:#000000;">Widget</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">resize</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">630</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">350</span><span style=" color:#000000;">);</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:#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;">horizontalLayout_3</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><span style=" color:#000000;">Widget</span><span
style=" color:#000000;">);</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:#800000;">horizontalLayout_3</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setSpacing</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">6</span><span style=" color:#000000;">);</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:#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:#008000;">//设计师原本是(9,9,9,9)，因为是主布局器，uic</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">工具额外增加了</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">2</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:#800000;">horizontalLayout_3</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setContentsMargins</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">11</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">11</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">11</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">11</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;">horizontalLayout_3</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"horizontalLayout_3"</span><span
style=" color:#000000;">));</span></pre>
</div>
该函数内部先设置主窗体 Widget 的对象名和尺寸。<br>
然后构造了主布局器，并设置主布局器的属性。我们在 QtCreator 设计模式原本看到的
layoutLeftMargin、layoutTopMargin、layoutRightMargin、layoutBottomMargin，四个边距都是
9，但是这里调用的是 setContentsMargins(11, 11, 11, 11)，因为是主布局器，额外增了 2 的边距，与窗体边界多设置了一些
间隙。只有主布局器会额外加边距，内部子布局器不会。<br>
<br>
然后是左边控件和布局器的代码：<br>
<div class="code"><span style=" color:#c0c0c0;">
</span><span style=" color:#008000;">//左半边</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:#c0c0c0;"> </span><span style=" color:#800000;">verticalLayout</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><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;">verticalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setSpacing</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">6</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;">6</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;">verticalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"verticalLayout"</span><span
style=" color:#000000;">));</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:#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;">textBrowser</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;">QTextBrowser</span><span
style=" color:#000000;">(</span><span style=" color:#000000;">Widget</span><span
style=" color:#000000;">);</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:#800000;">textBrowser</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"textBrowser"</span><span
style=" color:#000000;">));</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:#c0c0c0;"> </span><span style=" color:#800000;">verticalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addWidget</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">textBrowser</span><span
style=" color:#000000;">);</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:#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;">horizontalLayout</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><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;">horizontalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setSpacing</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">6</span><span style=" color:#000000;">);</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:#800000;">horizontalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"horizontalLayout"</span><span
style=" color:#000000;">));</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;">pushButtonBackward</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;">QPushButton</span><span
style=" color:#000000;">(</span><span style=" color:#000000;">Widget</span><span
style=" color:#000000;">);</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:#800000;">pushButtonBackward</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"pushButtonBackward"</span><span
style=" color:#000000;">));</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:#c0c0c0;"> </span><span style=" color:#800000;">horizontalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addWidget</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">pushButtonBackward</span><span
style=" color:#000000;">);</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:#c0c0c0;"> </span><span style=" color:#800000;">pushButtonForeward</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;">QPushButton</span><span
style=" color:#000000;">(</span><span style=" color:#000000;">Widget</span><span
style=" color:#000000;">);</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:#800000;">pushButtonForeward</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"pushButtonForeward"</span><span
style=" color:#000000;">));</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:#c0c0c0;"> </span><span style=" color:#800000;">horizontalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addWidget</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">pushButtonForeward</span><span
style=" color:#000000;">);</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:#008000;">//新建左边的水平空白条，水平策略是伸展方式</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">QSizePolicy::Expanding</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;">horizontalSpacer</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;">QSpacerItem</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">40</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000080;">20</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QSizePolicy</span><span
style=" color:#000000;">::</span><span style=" color:#800080;">Expanding</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">QSizePolicy</span><span
style=" color:#000000;">::</span><span style=" color:#800080;">Minimum</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:#800000;">horizontalLayout</span><span
style=" color:#000000;">-></span><span style=" font-style:italic; color:#000000;">addItem</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">horizontalSpacer</span><span
style=" color:#000000;">);</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="-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:#800000;">verticalLayout</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addLayout</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">horizontalLayout</span><span
style=" color:#000000;">);</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="-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:#800000;">horizontalLayout_3</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addLayout</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">verticalLayout</span><span
style=" color:#000000;">);</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//添加左半边大布局器到主布局器</span></pre>
</div>
左半边的布局器和控件创建过程是，先建立左边大布局器 verticalLayout ，设置该布局器的属性；<br>
新建左上方的丰富文本浏览器，设置对象名称，添加到 verticalLayout ；<br>
新建两个按钮的水平布局器 horizontalLayout，设置布局间隙和对象名称；<br>
新建后退按钮，设置对象名，添加到按钮水平布局器 horizontalLayout；<br>
新建前进按钮，设置对象名，添加到按钮水平布局器 horizontalLayout；<br>
新建空白条，空白条的最优大小是 40*20，水平策略 QSizePolicy::Expanding，是尽可能伸展的意思，垂直策略是
QSizePolicy::Minimum，是尽可能不拉伸，高度达到最优高度 20 以后，就不会再变高；<br>
然后用 addItem() 函数把空白条添加到按钮水平布局器 horizontalLayout；<br>
把 horizontalLayout 布局器添加到左半边大布局器 verticalLayout；<br>
再把左半边的 verticalLayout 添加到主布局器 horizontalLayout_3 。<br>
<br>
这个构建和布局的过程，其实就是对布局树的遍历过程，我们在 QtCreator 设计模式右上角能看到这个布局树：<br>
<center><img src="images/ch06/ch06-02-23.png" alt="tree" width="800"></center>
<span style="font-weight: bold;">从布局树上看，先构建根节点，</span><span style="font-weight: bold;"><span
style="font-weight: bold;">然后</span>构建子节点，再构建孙子节点，依此类推；<br>
从窗体图形界面上看，同一层级的布局或控件，是按照窗体图形里从上到下、从左到右的方式构建。</span><br>
<br>
构建的基本规律就是上面描述的，现在来看看窗体右半部分的构建和布局代码：<br>
<div class="code"><span style=" color:#c0c0c0;">
</span><span style=" color:#008000;">//右半边</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:#c0c0c0;"> </span><span style=" color:#800000;">verticalLayout_2</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><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;">verticalLayout_2</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setSpacing</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">6</span><span style=" color:#000000;">);</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:#800000;">verticalLayout_2</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"verticalLayout_2"</span><span
style=" color:#000000;">));</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;">plainTextEdit</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;">QPlainTextEdit</span><span
style=" color:#000000;">(</span><span style=" color:#000000;">Widget</span><span
style=" color:#000000;">);</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:#800000;">plainTextEdit</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setObjectName</span><span
style=" color:#000000;">(</span><span style=" color:#000080;">QStringLiteral</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"plainTextEdit"</span><span
style=" color:#000000;">));</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:#c0c0c0;"> </span><span style=" color:#800000;">verticalLayout_2</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addWidget</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">plainTextEdit</span><span
style=" color:#000000;">);</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:#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;">horizontalLayout_2</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><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">//新建右边按钮的水平布局器</span></pre>