-
Notifications
You must be signed in to change notification settings - Fork 7
/
ch10-03.htm
2782 lines (1806 loc) · 187 KB
/
ch10-03.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-03</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.3 堆栈控件和标签页控件</div>
<br>
本节介绍 Stacked Widget、Tab Widget ，这两个容器也支持多标签页轮流展示，Stacked
Widget不带标题栏，需要配合如组合框之类的控件来切换标签页；Tab Widget
功能最为丰富，自带了标题栏，可以通过点击标题栏自由切换各个页面显示。<br>
<br>
<div class="os2">10.3.1 Stacked Widget 堆栈控件</div>
<br>
堆栈控件类名为 QStackedWidget ，功能相对简单，没有标题栏，通常与组合框、列表控件或者一组单选按钮来使用，通过搭配的控件选中条目变化，切换
各个页面。<br>
在 Qt 设计师界面，堆栈控件显示如下图所示：<br>
<center> <img src="images/ch10/ch10-03-01.png" alt="stack1"></center>
堆栈控件在设计师界面显示时，右上角有两个左右箭头切换子页面，进行分别显示编辑，但是程序编译运行时，没有这两个切换按钮：<br>
<center> <img src="images/ch10/ch10-03-02.png" alt="stack2"></center>
因此程序运行时，堆栈控件需要依赖其他控件来切换页面。<br>
QStackedWidget 添加子页面的函数如下：<br>
<div class="code">int addWidget(QWidget * widget)</div>
将控件添加给堆栈容器后，返回值是该页面的序号。如果希望将页面插入到指定序号位置，使用下面函数：<br>
<div class="code">int insertWidget(int index, QWidget *
widget)</div>
insertWidget() 参数里的 index 如果超出序号范围，那么新页面放到最末尾，返回值总是真实的序号值。<br>
删除页面使用如下函数：<br>
<div class="code">void removeWidget(QWidget * widget)</div>
注意该函数不会释放页面占用的内存，仅仅是从容器上卸载，卸载下的标签页仍存在，需要手动 delete 才会释放内存。<br>
堆栈控件的子页面计数使用如下函数：<br>
<div class="code">int count() const</div>
获取当前显示页面的序号或页面指针，使用下面两个函数：<br>
<div class="code">int currentIndex()
const //当前页面序号<br>
QWidget * currentWidget() const //当前页面指针</div>
页面指针和页面序号可以互查：<br>
<div class="code">int indexOf(QWidget * widget)
const //根据页面指针查序号，如果页面不属于容器，返回值是 -1<br>
QWidget * widget(int index) const
//根据序号查页面指针，如果序号不合法，返回 NULL</div>
注意判断返回值内容，-1 和 NULL 需要单独判断来处理，避免产生程序 bug。<br>
<br>
堆栈控件有两个槽函数，均是设置当前页面函数：<br>
<div class="code">void setCurrentIndex(int
index) //根据序号设置当前页面<br>
void setCurrentWidget(QWidget * widget)
//根据页面指针设置当前页面</div>
<br>
堆栈控件有两个信号，分别是当前页面序号变化和卸载操作的页面序号：<br>
<div class="code">void currentChanged(int
index) //当前页面序号变化，参数是新页面序号<br>
void widgetRemoved(int index) //参数序号的页面被卸载掉</div>
这两个信号可以用于同步显示的序号类控件，比如堆栈控件卸载了一个页面，那么组合框条目也要删掉该页面对应的条目。<br>
除了堆栈控件 QStackedWidget ，还有一个功能类似的 QStackedLayout
可以承载多个标签页，QStackedLayout 是布局器，必须要有宿主窗口或容器，而 QStackedWidget
就是打包好的容器控件，功能类似的，都是容纳子页面。<br>
下面我们通过图片信息的例子学习 QStackedWidget 使用。<br>
我们打开 QtCreator，新建一个 Qt Widgets Application 项目，在新建项目的向导里填写：<br>
①项目名称 imageinfo，创建路径 D:\QtProjects\ch10，点击下一步；<br>
②套件选择里面选择全部套件，点击下一步；<br>
③基类选择 QWidget，点击下一步；<br>
④项目管理不修改，点击完成。<br>
我们打开界面文件 widget.ui，将窗口尺寸拉大，设为 600*480，向其中拖入三个控件：<br>
<center> <img src="images/ch10/ch10-03-03.png" alt="ui1" width="800"></center>
左上角是按钮，对象名 pushButtonOpen，文本为“打开图片”；<br>
左边下部是列表控件对象名 listWidgetIndex，主要是配合右边的堆栈控件使用；<br>
右边是堆栈控件，对象名 stackedWidget 。<br>
stackedWidget 默认有两个子页面 page 和 page_2，我们选中 stackedWidget ，在右下角属性栏看见
currentIndex 为 0， currentPageName 为 page，我们修改当前页面的名称为 pageView，并向 pageView
页面拖入一个滚动区域控件 scrollArea：<br>
<center> <img src="images/ch10/ch10-03-04.png" alt="ui2" width="800"></center>
pageView 只存放一个滚动区域，后面我们用代码实现图片预览，现在我们选中 stackedWidget 堆栈控件，当前页面序号是 0，这时我们点击上
面的水平布局按钮，为堆栈控件当前的页面设置布局器：<br>
<center> <img src="images/ch10/ch10-03-05.png" alt="ui3" width="800"></center>
设置布局器之后，堆栈控件变得很小，我们重新将它尺寸拉大：<br>
<center> <img src="images/ch10/ch10-03-06.png" alt="ui4" width="800"></center>
序号 0 的页面就完成布局了。我们点击 stackedWidget 右上角很小的黑色向右箭头，切换到序号为 1 的新页面 page_2：<br>
<center> <img src="images/ch10/ch10-03-07.png" alt="ui5" width="800"></center>
我们修改当前页面名称为 pageInfo，并向其中拖入文本浏览框，对象名 textBrowserInfo，这个文本浏览框专门显示图片相关信息：<br>
<center> <img src="images/ch10/ch10-03-08.png" alt="ui6" width="800"></center>
我们对该页面布局，选中 stackedWidget 堆栈控件，然后点击上面的水平布局按钮，为堆栈控件的当前页面设置布局，然后将
stackedWidget 堆栈控件尺寸拉大：<br>
<center> <img src="images/ch10/ch10-03-09.png" alt="ui7" width="800"></center>
头两个子页面设置完成，我们在 stackedWidget 堆栈控件当前页面为 pageInfo 的时候，在右上角对象树视图，<br>
右击 stackedWidget 控件， 右键菜单选择“插入页”-->“在当前页之后”，添加新的页面：<br>
<center> <img src="images/ch10/ch10-03-10.png" alt="ui8" width="800"></center>
（注：删除页面和调整页面顺序也在 stackedWidget 右键菜单实现，“N的页面N”子菜单里面可以删除页面，“改变页顺序”可以调整页面顺序。）<br>
添加的新页面名称默认为 page，页面序号为 2 ：<br>
<center> <img src="images/ch10/ch10-03-11.png" alt="ui9" width="800"></center>
我们修改新页面的对象名为 pageConvert，然后向其中拖入三个控件：<br>
<center> <img src="images/ch10/ch10-03-12.png" alt="ui10" width="800"></center>
三个控件分别为：标签文本“扩展名类型”；组合框 comboBoxExtFormat；pushButtonConvert 按钮，文本“转换格式”。<br>
然后同样地，我们选中 stackedWidget ，点击上面水平布局器按钮，对 stackedWidget 的当前页面布局，并将
stackedWidget 尺寸拉大：<br>
<center> <img src="images/ch10/ch10-03-13.png" alt="ui11" width="800"></center>
界面右边的堆栈控件布局就完成了，我们下面编辑界面的左边部分。<br>
右键点击列表控件，在右击菜单选择“编辑项目”，弹出列表控件的条目编辑界面：<br>
<center> <img src="images/ch10/ch10-03-14.png" alt="list"></center>
点击右下角绿色加号按钮，为列表控件添加三个条目：<br>
<center> <img src="images/ch10/ch10-03-15.png" alt="list2"></center>
添加好条目后，点击“OK”按钮，回到主窗口。我们选中“打开图片”按钮和列表控件，点击上面的垂直布局器，进行垂直布局：<br>
<center> <img src="images/ch10/ch10-03-16.png" alt="left" width="800"></center>
我们将左边的布局器尺寸调整一下，变得窄一些，让左边布局器和右边的堆栈控件不重叠：<br>
<center> <img src="images/ch10/ch10-03-17.png" alt="left2" width="800"></center>
最后我们选中主窗口 Widget ，点击上面的水平布局器按钮，为窗口设置水平的主布局器：<br>
<center> <img src="images/ch10/ch10-03-18.png" alt="main" width="800"></center>
默认的主界面布局器左右各半，左边的布局器显得太宽了，我们选中主窗口 Widget，然后在右下角的属性栏最底部，看到主布局器的参数，我们将
layoutStretch 比例修改为英文的 1,5 <br>
<center> <img src="images/ch10/ch10-03-19.png" alt="main" width="800"></center>
主窗口尺寸为 600*480 ， 这样我们的界面设置和布局就完成了。<br>
我们现在需要为界面里的两个按钮添加槽函数，分别右击 “打开图片”、“转换格式”两个按钮，在右键菜单选择“转到槽...”，为按钮添加 clicked
信号对应的槽函数：<br>
<center> <img src="images/slots/buttonclicked.png" alt="slot"></center>
添加好两个按钮槽函数之后，我们保存并关闭界面文件，下面开始代码的编写。<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;"><QImage></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;"><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:#000080;">#include</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;"><QImageWriter></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;"><QFileInfo></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_pushButtonOpen_clicked</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:#808000;">void</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">on_pushButtonConvert_clicked</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:#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;">QLabel</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">*</span><span style=" color:#800000;">m_pLabelPreview</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;">QString</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_strImageName</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;">QImage</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_image</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>添加显示图片控件指针 m_pLabelPreview 、图片文件名字符串 m_strImageName、以及用于加载图片的对象 m_image 。<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;"><QFileDialog></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;"><QMessageBox></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="-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;">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>
<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:#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;">//第</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">0</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:#800000;">m_pLabelPreview</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;">ui</span><span
style=" color:#000000;">-></span><span style=" color:#800000;">scrollArea</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_pLabelPreview</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_pLabelPreview</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setStyleSheet</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">"background-color:</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">lightgray;"</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><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">1</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;">ui</span><span
style=" color:#000000;">-></span><span style=" color:#800000;">textBrowserInfo</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setText</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"用于显示图片文件信息。"</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><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:#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;">QByteArray</span><span
style=" color:#000000;">></span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">listTypes</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">QImageWriter</span><span style=" color:#000000;">::</span><span
style=" color:#000000;">supportedImageFormats</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;">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:#000000;">listTypes</span><span style=" color:#000000;">.</span><span
style=" color:#000000;">count</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:#800000;">ui</span><span
style=" color:#000000;">-></span><span style=" color:#800000;">comboBoxExtFormat</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">addItem</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">listTypes</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:#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;">connect</span><span
style=" color:#000000;">(</span><span style=" color:#800000;">ui</span><span style=" color:#000000;">-></span><span
style=" color:#800000;">listWidgetIndex</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#808000;">SIGNAL</span><span
style=" color:#000000;">(</span>currentRowChanged<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:#800000;">ui</span><span
style=" color:#000000;">-></span><span style=" color:#800000;">stackedWidget</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#808000;">SLOT</span><span
style=" color:#000000;">(</span>setCurrentIndex<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=" 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;">ui</span><span
style=" color:#000000;">-></span><span style=" color:#800000;">stackedWidget</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setCurrentIndex</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000080;">0</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>
添加了文件对话框和信息提示框类型的头文件包含，然后在窗口构造函数添加了 InitControls() 函数调用。<br> InitControls() 函数用于初始化控件，该函数功能如下：<br>对于序号 0 的标签页面，先新建一个预览标签 m_pLabelPreview，并将预览标签对象设置给 滚动区域 ui->scrollArea，然后为预览标签设置一个浅灰色的背景色。<br>对于序号 1 的标签页面，简单为文本浏览框设置一行字符串。<br>对于序号 2 的标签页面，我们获取图片保存类 QImageWriter 支持的所有保存格式列表，存到 listTypes ；<br>然后循环遍历格式列表，逐一添加给组合框 ui->comboBoxExtFormat。<br>
然后<b>将列表框与堆栈控件联动的关键，就是将 ui->listWidgetIndex 对象的序号变化信号 currentRowChanged(int) <br>关联到 ui->stackedWidget 对象的设置序号槽函数 setCurrentIndex(int)。</b><br>这样当列表选中条目变化时，堆栈控件就会同步切换对应的标签页来显示。<br>InitControls() 函数最后设置堆栈控件默认显示序号为 0 的标签页。<br><br>下面我们编辑“打开图片”按钮对应的槽函数：<br>
<div class="code"><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:#808000;">void</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">on_pushButtonOpen_clicked</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:#800080;">QString</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strFileName</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800080;">QFileDialog</span><span style=" color:#000000;">::</span><span
style=" color:#000000;">getOpenFileName</span><span style=" color:#000000;">(</span><span
style=" color:#808000;">this</span><span style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span style=" color:#008000;">"打开图片文件"</span><span
style=" color:#000000;">),</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">""</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;">"Images</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">(*.png</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">*.bmp</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">*.jpg);;All</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">files(*)"</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;">if</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strFileName</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">isEmpty</span><span
style=" color:#000000;">()</span><span style=" color:#c0c0c0;"> </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:#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;">return</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:#800080;">QImage</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">imgTemp</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:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">!</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">imgTemp</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:#000000;">strFileName</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">)</span><span style=" color:#c0c0c0;"> </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:#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;">QMessageBox</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">warning</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">this</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"打开文件失败"</span><span style=" color:#000000;">),</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"加载图片数据失败，不支持该格式。"</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;">return</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:#800000;">m_strImageName</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">strFileName</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_image</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">imgTemp</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;">0</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;">m_pLabelPreview</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:#800080;">QPixmap</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">fromImage</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_image</span><span
style=" color:#c0c0c0;"> </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><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">1</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;">QString</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strInfo</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800000;">m_strImageName</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">+</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"\r\n"</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;">strInfo</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">+=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span style=" color:#008000;">"图片尺寸：</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">%1</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#008000;">x</span><span style=" color:#c0c0c0;"> </span><span style=" color:#008000;">%2\r\n"</span><span
style=" color:#000000;">).</span><span style=" color:#000000;">arg</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_image</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">width</span><span
style=" color:#000000;">()</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">).</span><span
style=" color:#000000;">arg</span><span style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800000;">m_image</span><span style=" color:#000000;">.</span><span
style=" color:#000000;">height</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;">strInfo</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">+=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span style=" color:#008000;">"颜色深度：</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#008000;">%1\r\n"</span><span
style=" color:#000000;">).</span><span style=" color:#000000;">arg</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_image</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">depth</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:#800000;">ui</span><span
style=" color:#000000;">-></span><span style=" color:#800000;">textBrowserInfo</span><span
style=" color:#000000;">-></span><span style=" color:#000000;">setText</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strInfo</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>
我们调用文件对话框的静态函数，获取要打开的文件名；<br>判断 strFileName 是否为空，如果为空就返回，不处理；如果检查是非空的文件名，继续后面代码。<br>定义临时的图片对象 imgTemp，根据文件名加载图片。判断返回值，如果加载失败，那么弹窗提示出错，返回不处理；<br>如果成功加载图片文件，那么继续后面代码。<br>加载成功后，保存文件名、图片对象到成员变量 m_strImageName、m_image ；<br>对于 0 号标签页面，我们设置预览控件 m_pLabelPreview 显示新的图像，QPixmap::fromImage( m_image ) 是将 QImage 转为 QPixmap 方便标签预览显示。<br>对于 1 号标签页面，我们构造信息字符串 strInfo，包含图片文件路径、图片尺寸、图片颜色深度等信息，设置给文本浏览框显示。<br>最后的 2 号标签页面不需要设置，因为初始化时已经构造完成。<br><br>接下来我们编辑“转换格式”按钮对应的槽函数：<br>
<div class="code"><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:#808000;">void</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Widget</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">on_pushButtonConvert_clicked</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:#800080;">QString</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strNewExt</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#800000;">ui</span><span style=" color:#000000;">-></span><span
style=" color:#800000;">comboBoxExtFormat</span><span style=" color:#000000;">-></span><span
style=" color:#000000;">currentText</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;">if</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_strImageName</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">endsWith</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strNewExt</span><span
style=" color:#000000;">,</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800080;">Qt</span><span
style=" color:#000000;">::</span><span style=" color:#800080;">CaseInsensitive</span><span
style=" color:#c0c0c0;"> </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;">QMessageBox</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">warning</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">this</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"转换图片格式"</span><span style=" color:#000000;">),</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"新旧图片扩展名一样，不需要转换。"</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;">return</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:#800080;">QFileInfo</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">fi</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_strImageName</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;">QString</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strNewName</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">=</span><span style=" color:#c0c0c0;"> </span><span
style=" color:#000000;">fi</span><span style=" color:#000000;">.</span><span style=" color:#000000;">absolutePath</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;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"/"</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:#000000;">fi</span><span style=" color:#000000;">.</span><span
style=" color:#000000;">completeBaseName</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;">tr</span><span style=" color:#000000;">(</span><span style=" color:#008000;">"."</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;">strNewExt</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:#000080;">qDebug</span><span
style=" color:#000000;">()<<</span><span style=" color:#000000;">strNewName</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;">if</span><span
style=" color:#000000;">(</span><span style=" color:#c0c0c0;"> </span><span style=" color:#800000;">m_image</span><span
style=" color:#000000;">.</span><span style=" color:#000000;">save</span><span style=" color:#000000;">(</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">strNewName</span><span
style=" color:#c0c0c0;"> </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;">QMessageBox</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">information</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">this</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"转换图片格式"</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;">tr</span><span
style=" color:#000000;">(</span><span style=" color:#008000;">"转换成功，新文件为：\r\n"</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;">strNewName</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:#808000;">else</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;">QMessageBox</span><span
style=" color:#000000;">::</span><span style=" color:#000000;">warning</span><span
style=" color:#000000;">(</span><span style=" color:#808000;">this</span><span style=" color:#000000;">,</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"转换图片格式"</span><span style=" color:#000000;">),</span><span
style=" color:#c0c0c0;"> </span><span style=" color:#000000;">tr</span><span style=" color:#000000;">(</span><span
style=" color:#008000;">"转换失败！"</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:#000000;">}</span></pre></div>
该函数先获取转换后新的扩展名存到 strNewExt ；<br>判断新扩展名是否与旧的文件扩展名一致，如果一样的不需要转换，只有扩展名不一样才进行后续转换。<br>如果是新的不一样的扩展名，我们根据旧文件名定义文件信息对象 fi ；<br>然后根据旧文件的路径、文件基本名、新扩展名拼接生成新的转换后文件名，存到 strNewName 。<br>然后调用保存函数 m_image.save( strNewName )，该函数自动根据扩展名转换格式，如果转换成功，返回 true，我们弹窗显示转换成功，并显示新的文件名；如果保存失败，返回 false，弹窗显示出错。<br>
<br>示例代码就介绍到这，我们生成项目，运行示例程序：<br>
<center> <img src="images/ch10/ch10-03-20.png" alt="run1"></center>
点击“打开图片”按钮，选中一个图片打开，如果图片较大，可以拖动滚轮，轮流显示大图各个部分：<br>
<center> <img src="images/ch10/ch10-03-21.png" alt="run2"></center>
我们点击列表控件第二个条目“图片信息”，堆栈控件自动切换页面如下：<br>
<center> <img src="images/ch10/ch10-03-22.png" alt="run3"></center>
第二个页面显示了图片的文件名、尺寸和颜色深度。<br>我们点击列表第三个条目“图片转换”，页面再次切换：<br>
<center> <img src="images/ch10/ch10-03-23.png" alt="run4"></center>
点开组合框的条目列表，可以看到 Qt 支持很多格式的图片格式写入，具体的转换格式功能请读者自行测试，我们下面学习功能最丰富的 Tab Widget 标签页控件。<br><br>
<div class="os2">10.3.2 Tab Widget 标签页控件</div>
<br>
标签页控件类型名为 QTabWidget，可以容纳多个标签页，并且自带页面标题栏，例如 Qt Assistant 文档浏览器的首选项对话框：<br>
<center> <img src="images/ch10/ch10-03-24.png" alt="tabwid"></center>
通过点击标题栏按钮，标签页控件每次呈现一个对应的标签页。围绕标题栏和标签页的设置，QTabWidget 提供了很多的功能函数，下面分类介绍这些功能。<br>
（1）添加页面<br>主要是追加和插入页面函数：<br>
<div class="code">int addTab(QWidget * page, const QString & label) //根据页面指针、页面标题文本追加新页面到末尾<br>int addTab(QWidget * page, const QIcon & icon, const QString & label) //根据页面指针、页面标题图标和文本追加新页面到末尾<br>int insertTab(int index, QWidget * page, const QString & label) //根据指定序号、页面指针和页面标题文本插入页面到该序号位置<br>int insertTab(int index, QWidget * page, const QIcon & icon, const QString & label) //根据指定序号、页面指针、页面标题图标和文本插入页面到该序号位置</div>
addTab() 和 insertTab() 函数返回值都是添加新页面的真实序号位置。如果 insertTab() 参数指定序号不合法，超出正常范围，那么实际的新页面序号一定是返回值的数值，而不是参数里的非法数值。<br>（2）卸载页面<br>之所以叫卸载页面，是因为这些函数只是将页面从 QTabWidget 卸载下来，去掉对应的标题按钮，但不会删除该页面本身。<br>
<div class="code">void removeTab(int index) //卸载指定序号的页面<br>void clear() //卸载所有子页面，QTabWidget对象彻底为空</div>
卸载的页面可以重新添加或者用 delete 彻底删除，取决于实际场景用途。<br>（3）访问函数<br>获取子页面的数量，使用下面函数：<br>
<div class="code">int count() const</div>
根据序号查页面指针，或者根据页面指针查序号，使用下面一对函数：<br>
<div class="code">QWidget * widget(int index) const //根据序号查页面指针<br>int indexOf(QWidget * w) const //根据页面指针查序号</div>
注意 widget() 函数如果参数序号超出合法范围，那么返回 NULL 指针；<br> indexOf() 函数参数指针如果非法或者不属于 QTabWidget 对象，那么返回序号 -1 。<br>一定要检查返回值是否正常，对应异常返回值要单独判断处理，避免出现 bug 。<br><br>获取当前显示的页面和页面序号，使用下面函数：<br>
<div class="code">int currentIndex() const //当前页面的序号<br>QWidget * currentWidget() const //当前页面的指针</div>
注意如果 QTabWidget 对象没有任何子页面，那么返回的当前页面指针为 NULL，序号是 -1 。<br>一定不要对没有子页面的 QTabWidget 对象调用这些函数。<br><br>每个子页面可以设置禁用或者启用，当禁用子页面时，该页面控件能显示，但是无法点击操作：<br>
<div class="code">void QTabWidget::setTabEnabled(int index, bool enable) //设置指定序号页面是否启用<br>bool QTabWidget::isTabEnabled(int index) const //判断指定序号页面是否处于启用状态</div>
<br>（4）标题栏定制函数<br>QTabWidget 自己拥有标题栏，可以点击标题栏按钮切换各个子页面。标题栏具有很多的定制功能函数，下面介绍这些函数：<br>① 标题栏显示位置<br>
<div class="code">TabPosition tabPosition() const<br>void setTabPosition(TabPosition)</div>
QTabWidget::TabPosition 枚举类型共有上下左右四个位置，英文习惯称为北南西东：<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>QTabWidget::North</td>
<td style="text-align: center;">0</td>
<td> 标题栏绘制在页面上方。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">QTabWidget::South</td>
<td style="text-align: center;">1</td>
<td> 标题栏绘制在页面下方。</td>
</tr>
<tr>
<td style="height: 16px;">QTabWidget::West</td>
<td style="text-align: center;">2</td>
<td> 标题栏绘制在页面左侧，并且标题文本图标向左旋转 90 度。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">QTabWidget::East</td>
<td style="text-align: center;">3</td>
<td> 标题栏绘制在页面右侧，并且标题文本图标向右旋转 90 度。</td>
</tr>
</tbody>
</table>
<br>
标题栏绘制在页面上方和下方，标题文本和图标都是正常的水平显示，标题文字和图标都是正的。<br>但是左右两侧的情况特殊，显示在左侧时，标题文本和图标做了向左 90 度旋转，序号 0 的标签页面在最上方，序号大的标签页面排在下面：<br>
<center> <img src="images/ch10/ch10-03-25.png" alt="left"></center>
标题栏显示在右侧的时候，标题文本和图标做了向右90度旋转，序号 0 的标签在最上方，序号大的标签页面排在下面：<br>
<center> <img src="images/ch10/ch10-03-26.png" alt="right"></center>
②标题栏按钮的形状<br>
<div class="code">TabShape tabShape() const<br>void setTabShape(TabShape s)</div>
QTabWidget::TabShape 形状共有两种，上面截图都是默认的圆角矩形按钮，还有三角形（其实是梯形）：<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>QTabWidget::Rounded</td>
<td style="text-align: center;">0</td>
<td> 标题栏按钮绘制成圆角矩形。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">QTabWidget::Triangular</td>
<td style="text-align: center;">1</td>
<td> 标题栏按钮绘制成三角形（其实是梯形）。</td>
</tr>
</tbody>
</table>
<br>
QTabWidget::Triangular 实际的按钮外观如下图所示：<br>
<center> <img src="images/ch10/ch10-03-27.png" alt="Triangular"></center>
③标题栏的文本、图标、工具提示、帮助信息设置<br>这些内容比较像列表控件的条目，QTabWidget 的标题按钮也可以设置这些信息：<br>
<br>
<table class="tabel">
<tbody>
<tr class="d1">
<td style="width: 280px;" align="center">读取函数</td>
<td style="width: 400px;" align="center">设置函数</td>
<td align="center"><b> 描述</b></td>
</tr>
<tr>
<td>QString tabText(int index) const</td>
<td>void setTabText(int index, const QString & label)</td>
<td> 读取或设置指定序号标题按钮的文本。</td>
</tr>
<tr class="d1">
<td>QIcon tabIcon(int index) const</td>
<td>void setTabIcon(int index, const QIcon & icon)</td>
<td> 读取或设置指定序号标题按钮的图标。</td>
</tr>
<tr>
<td>QString tabToolTip(int index) const</td>
<td>void setTabToolTip(int index, const QString & tip)</td>
<td> 读取或设置指定序号标题按钮的工具提示。</td>
</tr>
<tr class="d1">
<td>QString tabWhatsThis(int index) const</td>
<td>void setTabWhatsThis(int index, const QString & text)</td>
<td> 读取或设置指定序号标题按钮的帮助信息。</td>
</tr>
</tbody>
</table>
<br>
QTabWidget 可以指定图标的尺寸，使用下面函数：<br>
<div class="code">QSize iconSize() const //获取标题栏按钮图标的尺寸，各个按钮的图标都一样大<br>void setIconSize(const QSize & size) //设置标题栏按钮图标的尺寸</div>
iconSize 默认情况下与外观风格 style 是相关的，这里设置的图标尺寸是指图标可以占据的最大尺寸，但是如果图片尺寸本身很小，那么不会放大图片，而只会增加图片周围的空白填充区域。<br><br>标题栏中，如果标签页文本太长了，可以设置文本省略显示的模式：<br>
<div class="code">Qt::TextElideMode elideMode() const //获取标签长文本显示模式<br>void setElideMode(Qt::TextElideMode) //设置标签长文本显示模式</div>
Qt::TextElideMode 枚举值如下：<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::ElideLeft</td>
<td style="text-align: center;">0</td>
<td> 长文本的左边被省略，显示省略号到左边。</td>
</tr>
<tr class="d1">
<td>Qt::ElideRight</td>
<td style="text-align: center;">1</td>
<td style="height: 16px;"> 长文本的右边被省略，显示省略号到右边。</td>
</tr>
<tr>
<td>Qt::ElideMiddle</td>
<td style="text-align: center;">2</td>
<td> 长文本的中间被省略，显示省略号到中间。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">Qt::ElideNone</td>
<td style="text-align: center;">3</td>
<td> 不省略，尽量显示完整的长文本。</td>
</tr>
</tbody>
</table>
<br>
默认的 elideMode() 是与显示风格有关，可以不省略显示，或者用右边省略。<br><br>标题栏当标签按钮个数小于 2，就是只有 1 个子页面时可以设置自动隐藏：<br>
<div class="code">bool tabBarAutoHide() const //获取是否自动隐藏标题栏，只有一个子页面时有用<br>void setTabBarAutoHide(bool enabled) //设置标题栏是否自动隐藏，只有一个子页面时有用</div>
如果标题栏的标签按钮有 2 个或以上，那么 tabBarAutoHide 属性没有用，这个 tabBarAutoHide 属性与单词字面意义不一样，功能比较鸡肋。<br><br>④标题栏其他设置<br>标题栏可以设置拖动标签按钮移动各个标签页的显示顺序（内部子页面序号不会变，只是显示位置不同了）：<br>
<div class="code">bool isMovable() const<br>void setMovable(bool movable)</div>
<br>标题栏可以设置拖动标签页是否可以关闭：<br>
<div class="code">bool tabsClosable() const<br>void setTabsClosable(bool closable)</div>
默认标签页是不关闭的，总是显示所有子标签；如果设置了标签页可以关闭，那么每个标签按钮文本旁边有 X 号，如果用户点击 X 号，那么触发信号：<br>
<div class="code">void QTabBar::tabCloseRequested(int index) //触发信号，提示用户点击X号想关闭标签页</div>
用户点击 X 号之后，QTabWidget 不会自动关闭标签页，程序员需要为上面信号关联处理的槽函数，通过槽函数代码来进行标签页卸载或隐藏。<br><br>标题栏可以设置滚动按钮的显示，当标签页比较多的时候，显示滚动箭头控制标签按钮的切换和显示：<br>
<div class="code">bool usesScrollButtons() const<br>void setUsesScrollButtons(bool useButtons)</div>
<br>标题栏可以设置类似苹果系统的文档模式，不显示标签页的边框，方便更多地显示文档：<br>
<div class="code">bool documentMode() const<br>void setDocumentMode(bool set)</div>
<br>QTabWidget 的标题栏本质是一个 QTabBar 对象，标题栏功能是 QTabBar 实现的，很多关于标题栏的函数是将 QTabBar 相应的函数进行改造套壳。<br>可以直接获取 QTabWidget 内嵌的 QTabBar 对象：<br>
<div class="code">QTabBar * tabBar() const //获取标题栏的对象指针</div>
QTabBar 有很多定制函数可以使用，常用的 QTabBar 函数 QTabWidget 都做了套壳封装，如果需要其他精细的定制可以调用 QTabBar 的函数来实现，例如 QTabBar 的每一个按钮都可以自定义。<br><br>QTabWidget 标题栏在水平显示的情况下，还可以自定义一个角落控件：<br>
<div class="code">QWidget * cornerWidget(Qt::Corner corner = Qt::TopRightCorner) const //默认为 NULL<br>void setCornerWidget(QWidget * widget, Qt::Corner corner = Qt::TopRightCorner) //设置定义的角落控件</div>
角落按钮只有标题栏水平显示时才能生效（ QTabWidget::North 、QTabWidget::South ），角落控件支持的显示位置有：<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::TopLeftCorner</td>
<td style="text-align: center;">0</td>
<td> 角落控件显示到左上角。</td>
</tr>
<tr class="d1">
<td>Qt::TopRightCorner</td>
<td style="text-align: center;">1</td>
<td style="height: 16px;"> 角落控件显示到右上角。</td>
</tr>
<tr>
<td>Qt::BottomLeftCorner</td>
<td style="text-align: center;">2</td>
<td> 角落控件显示到左下角。</td>
</tr>
<tr class="d1">
<td style="height: 16px;">Qt::BottomRightCorner</td>
<td style="text-align: center;">3</td>
<td> 角落控件显示到右下角。</td>
</tr>
</tbody>
</table>
<br>
QTabWidget 默认没有角落控件，如果需要显示 logo 图片之类的，可以新建一个标签控件，设置为角落控件。<br><br>
（5）信号和槽函数<br>QTabWidget 在当前页面序号变化时触发如下信号：<br>
<div class="code">void currentChanged(int index)</div>
注意参数可能是 -1，代表 QTabWidget 里面没有设置当前页面，或者还没有添加任何子页面。<br>当用户点击标题栏的标签按钮时，根据单击或双击触发下面信号：<br>
<div class="code">void tabBarClicked(int index) //指定序号标签按钮被单击<br>void tabBarDoubleClicked(int index) //指定序号标签按钮被双击</div>
<br>当程序里面设置 QTabWidget 标题栏属性 setTabsClosable( true ) 的时候，标题按钮显示 X 号，用户点击 X 号触发如下信号：<br>
<div class="code">void tabCloseRequested(int index)</div>
注意 QTabWidget 只发送上面信号，不会自动关闭标签页，如果需要关闭标签页，需要程序员自己写槽函数来关闭。<br><br>QTabWidget 有两个槽函数，都是设置当前显示页面：<br>
<div class="code">void setCurrentIndex(int index) //根据序号设置当前页<br>void setCurrentWidget(QWidget * widget) //根据页面指针设置当前页</div>
<br>QTabWidget 内容介绍到这，下面我们学习一个文件属性例子。<br>我们打开 QtCreator，新建一个 Qt Widgets Application 项目，在新建项目的向导里填写：<br>①项目名称 fileattribute，创建路径 D:\QtProjects\ch10，点击下一步；<br>②套件选择里面选择全部套件，点击下一步；<br>③基类选择 QWidget，点击下一步；<br>④项目管理不修改，点击完成。<br>我们打开界面文件 widget.ui，向其中拖入一个 Tab Widget 控件，稍微拉大该控件：<br>
<center> <img src="images/ch10/ch10-03-28.png" alt="ui1" width="800"></center>
我们点击标签页控件的“Tab 1” 页面，“Tab 1”成为当前页面，并且让 tabWidget 对象保持选中状态，我们在右下角属性栏编辑当前页面的属性，修改 currentTabText 设置为“文件名称”，currentTabName 设置为 tabFileName，如下图所示：<br>
<center> <img src="images/ch10/ch10-03-29.png" alt="ui2"></center>
然后向“文件名称”标签页拖入控件，如下图所示：<br>
<center> <img src="images/ch10/ch10-03-30.png" alt="ui3" width="800"></center>
第一行是标签“文件全名”，单行编辑器 lineEditFullName，“选择文件”按钮 pushButtonSelectFile；<br>第二行是标签“文件短名”，单行编辑器 lineEditShortName；<br>第三行是标签“文件大小”，单行编辑器 lineEditFileSize。<br>将三行控件尽量在水平和垂直方向排列整齐，然后我们点击选中 tabWidget 容器对象，再点击上方的栅格布局按钮，实现当前页面的栅格布局，栅格布局自动调整了 tabWidget 尺寸，我们将它再拉大一些：<br>
<center> <img src="images/ch10/ch10-03-31.png" alt="ui4" width="800"></center>
第一个标签页的控件和布局就完成了。下面我们点击“Tab 2”页面，然该页面成为新的当前页面，
修改当前页面的标签文本和标签对象名，即 currentTabText 设置为“文件时间”，currentTabName 设置为 tabFileTime，
如下图所示：<br>
<center> <img src="images/ch10/ch10-03-32.png" alt="ui5"></center>
然后我们向“文件时间”标签页拖入三行控件，如下图所示：<br>
<center> <img src="images/ch10/ch10-03-33.png" alt="ui6" width="800"></center>
该标签页第一行是标签“创建时间”，单行编辑器 lineEditTimeCreated；<br>第二行是标签“访问时间”，单行编辑器 lineEditTimeRead；<br>第三行是标签“修改时间”，单行编辑器 lineEditTimeModified。<br>将三行控件水平和垂直方向尽量对齐，然后选中 tabWidget 对象，再点击上方的栅格布局按钮，实现栅格布局，并将容器对象尺寸拉大：<br>
<center> <img src="images/ch10/ch10-03-34.png" alt="ui7" width="800"></center>
这样第二个标签页的布局器也设置完成。我们选中主窗口本身的 Widget 对象，点击上面的垂直布局器按钮实现主界面布局，虽然主界面只有一个直接儿子节点，就是容器对象 tabWidget，还是需要设置窗口的主布局器，以实现自动布局：<br>
<center> <img src="images/ch10/ch10-03-35.png" alt="ui8" width="800"></center>
<br>完成以上控件编辑和布局之后，我们再点击“文件名称”标签页，右击“选择文件”按钮，为该按钮添加 clicked() 信号的槽函数。<br>按钮的槽函数添加完成后，我们就可以保存并关闭该 widget.ui 界面文件。<br><br> 关闭 widget.ui 界面文件之后，我们在左边项目管理页面，右击“fileattribute”项目根名称，
在右键菜单选择“添加新文件”：<br>
<center> <img src="images/ch10/ch10-03-36.png" alt="addnew1" width="800"></center>
弹出“新建文件”对话框，我们在该对话框的左边一栏选择“Qt”，中间一栏选择“Qt 设计师界面类”：<br>
<center> <img src="images/ch10/ch10-03-37.png" alt="addnew2"></center>
然后点击右下角“Choose...” 按钮，进入如下界面：<br>
<center> <img src="images/ch10/ch10-03-38.png" alt="addnew3"></center>
在中间界面模板里面，点击“Widget”，然后点击“下一步”按钮，进入如下界面：<br>
<center> <img src="images/ch10/ch10-03-39.png" alt="addnew4"></center>
我们修改类名为 TabPreview，下面几行的信息会根据类名自动修改，修改后如下：<br>
<center> <img src="images/ch10/ch10-03-40.png" alt="addnew5"></center>
点击“下一步”按钮，进入项目管理界面：<br>
<center> <img src="images/ch10/ch10-03-41.png" alt="addnew6"></center>
点击“完成”按钮，这样就为项目新增了一个窗口类 TabPreview，这个窗口以后我们会将它设置为标签页控件的第三个子页面。<br>
打开 tabpreview.ui 界面文件，我们向其中拖入三个按钮和一个堆栈容器：<br>
<center> <img src="images/ch10/ch10-03-42.png" alt="newui1" width="800"></center>
三个按钮是普通的 QPushButton，我们将按钮尺寸拉伸为水平窄、垂直长的竖条形状，然后注意设置文本：<br>第一个按钮 pushButtonTextPreview，文本为 "文\n本\n预\n览"，按钮文本支持使用 "\n" 换行显示；<br>第二个按钮 pushButtonImagePreview，文本为 "图\n像\n预\n览" ；<br>第三个按钮 pushButtonBytePreview，文本为 "字\n节\n预\n览" 。<br>这样三个按钮就形成的竖直的排列。<br>这样设置 QPushButton 按钮文本，是因为 QTabWidget 标题栏如果显示在左侧或右侧时，会对文本进行 90 度旋转，旋转后的文本并不符合中文垂直阅读的习惯，因为汉字被旋转了 90度，并不好看。我们这里相当于使用普通按钮和堆栈控件组合了一个自定义的多标签页控件，按钮的文本垂直排列更符合中文垂直排版习惯。<br>下面我们选中堆栈控件 stackedWidget，对序号 0 的子页面进行修改，设置 currentPageName 为 pageTextPreview，<br>向其中拖入一个文本浏览框，对象名 textBrowserText，如下所示：<br>
<center> <img src="images/ch10/ch10-03-43.png" alt="newui2" width="800"></center>
我们点击选中 stackedWidget 对象，然后点击上面的垂直布局按钮，为当前页面进行布局：<br>
<center> <img src="images/ch10/ch10-03-44.png" alt="newui3" width="800"></center>
对 0 号当前页面布局完成后，我们点击堆栈控件右上角的黑色向右箭头，切换到 1 号标签页面，将 1 号标签页面作为新的当前页面：<br>
<center> <img src="images/ch10/ch10-03-45.png" alt="newui4" width="800"></center>
在选中堆栈控件时，我们修改新的 1 号页面 currentPageName 为 pageImagePreview，并拖入一个 Label ：<br>
<center> <img src="images/ch10/ch10-03-46.png" alt="newui5" width="800"></center>
预览图像的标签对象名为 labelImagePreview，文本为 “图像预览区域”，并且修改属性 alignment 为水平的 AlignHCenter，垂直的 AlignVCenter，<br>使得标签对象的文本同时处于水平和垂直居中。<br>然后我们点击选中堆栈控件对象 stackedWidget，为新的当前页面设置布局，就是 1 号页面设置布局，点击上面垂直布局按钮，进行垂直布局：<br>
<center> <img src="images/ch10/ch10-03-47.png" alt="newui6" width="800"></center>
下面我们右击对象树的 stackedWidget 容器，在右键菜单选择“插入页”-->“在当前页之后”，我们在序号 1 的页面后再加一个新页面：<br>
<center> <img src="images/ch10/ch10-03-48.png" alt="newui7" width="800"></center>
添加新的序号为 2 的页面之后，我们修改新的 2 号当前页面对象名为 pageBytePreview：<br>
<center> <img src="images/ch10/ch10-03-49.png" alt="newui8" width="800"></center>
然后我们为序号 2 的页面添加一个文本浏览框，对象名设置为 textBrowserByte：<br>
<center> <img src="images/ch10/ch10-03-50.png" alt="newui9" width="800"></center>
然后我们选中堆栈控件 stackedWidget，再次为序号 2 的当前页面设置布局，点击上面垂直布局按钮，进行垂直布局：<br>
<center> <img src="images/ch10/ch10-03-51.png" alt="newui10" width="800"></center>
这样就实现了堆栈控件三个子页面的控件编辑和布局。<br>下面我们对该窗口进行布局，先选中左边三个按钮，进行垂直布局：<br>
<center> <img src="images/ch10/ch10-03-52.png" alt="newui11" width="800"></center>
然后我们选中该窗口根名称 TabPreview，点击上面的水平布局按钮，对该窗口设置布局器为水平布局：<br>
<center> <img src="images/ch10/ch10-03-53.png" alt="newui12" width="800"></center>
该窗口布局器设置好之后，我们发现左边按钮比较矮胖，这时候可以对三个按钮的属性进行调整，我们按住 Ctrl 键，点击三个按钮，同时选中该三个按钮，然后在右下角属性栏设置 sizePolicy 的垂直策略为 Expanding，修改 maximumSize 的宽度为 52，如下图所示：<br>
<center> <img src="images/ch10/ch10-03-54.png" alt="newui13" width="800"></center>
这样我们的按钮看着比较正常一些，垂直方向自动拉伸，水平方向比较窄。目前我们看到按钮的上下边界要比右边编辑框的上下边界宽，<br>在垂直方向稍微有点偏差，上边线和下边线没有对齐，是堆栈控件内部子页面布局器的原因。<br>
我们在对象树点击第 0 号子页面，看到该页面属性栏的布局器参数：<br>
<center> <img src="images/ch10/ch10-03-55.png" alt="newui14" width="800"></center>
布局器有四个边界保留宽度，即 layoutLeftMargin、layoutTopMargin、layoutRightMargin、layoutBottomMargin，将它们设置为 0，我们的编辑器就可以扩展到最外面边界，不保留任何冗余。 我们把堆栈控件三个子页面依次选中，把四个布局边界都设置为 0 。<br>
<center> <img src="images/ch10/ch10-03-56.png" alt="newui15" width="800"></center>
现在左边三个按钮上下边界就和右边编辑器同样高度了。附带说明一下，layoutSpacing 是布局器里面各个子控件的布局间隙，比如上面三个按钮的间隙都是 6 。<br>完成布局调整后，我们保存 tabpreview.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;"><QFile></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;"><QFileInfo></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;"><QFileDialog></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;">"tabpreview.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:#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>