Qt 控件

老子曾說：“天下難事，必做于易；天下大事，必做于細”。再復雜的項目，都是由一個個
小小的部分組成，只有掌握了Qt 的基本，遇到大項目也不用擔心了！從這章開始我們開始學習
Qt 的窗口部件，其中每種類型的窗口部件都選取一個作為例子講解它們的用法，通過例子大家
能舉一反三。本章也是純代碼編程，不使用Qt Designer 圖形界面開發程序。筆者認為純代碼編
程的代碼容易讓人看懂，在Qt Designer 里設計就顯得沒有過多邏輯可言。在這章里我們可以學
習常用的控件初始化方法，設置窗體的大小位置，顏色，文本，設計創意的例子快速學習各類
控件的使用方法，力求把例子寫的實用，代碼注釋詳細。因為控件非常多，如果覺得學習控件
枯燥，可以等用到這個控件（部件）時再參考，不必要一次性全部掌握，這章節的目的是了解
Qt 控件類型及使用方法。
值得留意的小節是7.1.3 小節，該小節講解如何添加資源圖片和qss 文件。后面的例程都可
以參考7.1.3 小節添加資源圖片，不再重復寫這種添加步驟。
第7.8 和7.9 小節，我們在嵌入式里經常用于處理數據，建立模型，應該花多點時間學習這
兩個小節。

按鈕

在Qt 里，最常用使用的控件就是按鈕了，有了按鈕，我們就可以點擊，從而響應事件，達
到人機交互的效果。不管是嵌入式或者PC 端，界面交互，少不了按鈕。
Qt 按鈕部件是一種常用的部件之一，Qt 內置了六種按鈕部件如下：

（1）QPushButton:下壓按鈕
（2）QToolButton:工具按鈕
（3）QRadioButton:選擇按鈕
（4）QCheckBox:檢查框
（5）QCommandLinkButton:命令鏈接按鈕
（6）QDialogButtonBox:對話框按鈕
這六種按鈕部件作用簡介如下：
QPushButton 繼承QAbstractButton 類，被QCommandLinkButton 繼承。通常用于執行命令
或觸發事件。
QToolButton 繼承QAbstractButton 類。是一種用于命令或者選項的可以快速訪問的按鈕，
通常在ToolBar 里面。工具按鈕通常顯示的是圖標，而不是文本標簽。ToolButton 支持自動浮
起。在自動浮起模式中，按鈕只有在鼠標指向它的時候才繪制三維的框架。
QRadioButton 繼承QAbstractButton 類。RadioButton 單選按鈕（單選框）通常成組出現，
用于提供兩個或多個互斥選項。
QCheckBox 繼承QAbstractButton。復選按鈕（復選框）與RadioButton 的區別是選擇模式，
單選按鈕提供多選一，復選按鈕提供多選多。
QCommandLinkButton 控件中文名是“命令鏈接按鈕”。QCommandLinkButton 繼承QPush
Button。QCommandLinkButton 控件和RadioButton 相似，都是用于在互斥選項中選擇一項。表
面上同平面按鈕一樣，但是CommandLinkButton 除帶有正常的按鈕上的文字描述文本外，默認
情況下，它也將攜帶一個箭頭圖標，表明按下按鈕將打開另一個窗口或頁面。
QDialogButtonBox 按鈕盒子（按鈕框），是由QDialogButtonBox 類包裝成的。
QDialogButtonBox 繼承QWidget。常用于對話框里自定義按鈕，比如“確定”和“取消”按鈕。
上面說的六種按鈕的可用屬性，信號和槽，需要用到時可在Qt 幫助文檔里查看。這里我們
就略過介紹它們可用屬性和信號與槽了。下面我們通過例子講解每種按鈕是如何使用，一起探
究它們究竟能實現什么效果。

QPushButton

控件簡介

在第四章里我們就已經接觸過QPushButton 了，在Qt Designer 里連接信號與槽，從而實現
了關閉程序的功能。下面開始重新用編寫程序的方法實現使用QPushButton 連接信號和槽實現
一個小例子。

用法示例

例04_qpushbutton 窗口換膚（難度：簡單），通過單擊不同的按鈕，改變窗口的顏色。
新建一個項目名稱為為04_qpushbutton，在新建例程中不要勾選“Generate form”，默認繼
承QMainWindow 類即可。如果還不會新建一個項目，建議回到3.6 小節查看如何新建一個項目。
完成如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 /* 引入QPushButton類*/
6 # include < QPushButton >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明一個QPushButton對象pushButton1 */18 QPushButton * pushButton1;19      /* 聲明一個QPushButton對象pushButton2 */20 QPushButton * pushButton2;2122 private slots:23      /* 聲明對象pushButton1的槽函數*/24 void pushButton1_Clicked();25      /* 聲明對象pushButton2的槽函數*/26 void pushButton2_Clicked();27
};
28 # endif      /* MAINWINDOW_H */

第6 行，引入QPushButton 類。
第18 和20 行，聲明兩個QPushButton 的對象。
第24 和26 行，聲明兩個QPushButton 對象的槽函數。
在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置寬高為800×480,位置在0, 0。（0, 0）代表原點，Qt默認最左上角的點為原
點*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 實例化兩個按鈕對象，并設置其顯示文本為窗口皮膚1和窗口皮膚2 */
10 pushButton1 = new QPushButton("窗口皮膚1", this);
11 pushButton2 = new QPushButton("窗口皮膚2", this);
12
13 /* 設定兩個QPushButton對象的位置*/
14 pushButton1->setGeometry(300,200,80,40);
15 pushButton2->setGeometry(400,200,80,40);
16
17 /* 信號槽連接*/
18 connect(pushButton1, SIGNAL(clicked()), this,
SLOT(pushButton1_Clicked()));
19 connect(pushButton2, SIGNAL(clicked()), this,
SLOT(pushButton2_Clicked()));
20 }
21
22 MainWindow::~MainWindow()
23 {
24 }
25
26 /* 槽函數的實現*/
27 void MainWindow::pushButton1_Clicked()
28 {
29 /* 設置主窗口的樣式1 */
30 this->setStyleSheet("QMainWindow { background-color: rgba(255, 245,
238, 100%); }");
31 }
32
33 /* 槽函數的實現*/
34 void MainWindow::pushButton2_Clicked()
35 {
36 /* 設置主窗口的樣式2 */
37 this->setStyleSheet("QMainWindow { background-color: rgba(238, 122,
233, 100%); }");
38 }

第7 行，設置程序窗口的顯示位置和顯示大小，如果不設置，運行的程序窗口在Ubuntu
里有可能在某個位置出現，而在Windows 一般出現在中間。
第10 和11 行，實際化QPushButton 對象。在初始化的時候可以傳入QString 類型串，作為
按鈕的顯示文本。
第14 行，設置按鈕的大小和位置，按鈕的大小不能設置過小，否則按鈕上的文本可能顯示
不全。
第18 行和19 行，連接兩個QPushButton 對象的信號與槽。
第27 行至38 行，兩個QPushButton 的槽函數實現，設置主窗體的樣式表，其中設置
background-color 的rgba 參數即可改變窗體的背景顏色。關于什么是樣式表，如何設置樣式表，
以后會以一個小節專門講解。
在源文件“main.cpp”具體代碼如下，由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯及運行后，點擊窗口皮膚1 按鈕，主窗體顯示效果如下。

點擊窗口皮膚2 按鈕，主窗體顯示效果如下。

QToolButton

控件簡介

工具按鈕（QToolButton）區別于普通按鈕（QPushButton）的一點是，工具按鈕（QToolButton）
可以帶圖標。這里區別下圖標和按鈕的背景圖片是不一樣的。通常我們在QToolBar 這種工具條
（工具欄）上設置不同的按鈕，如果這些按鈕還帶圖標和文本，那么QToolButton 是個不錯的
選擇。

用法示例

例05_qtoolbutton 自定義工具欄（難度：簡單）。
新建一個項目名稱為05_qtoolbutton。在新建例程中不要勾選“Generate form”，默認繼承
QMainWindow 類即可。項目新建完成如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5       /* 引入QToolButton類*/
6 # include < QToolButton >
7       /* 引入QToolBar類*/
8 # include < QToolBar >
9
10 class MainWindow : public QMainWindow11 {12 Q_OBJECT1314 public:15 MainWindow( QWidget *parent = nullptr );16 ~MainWindow();1718 private:19      /* 聲明一個QToolButton對象*/20 QToolButton * toolButton;21      /* 聲明一個QToolBar對象*/22 QToolBar * toolBar;23
};
24 # endif      /* MAINWINDOW_H */

第20 和22 行，聲明QToolButton 對象和QtoolBar 對象。
在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2 # include < QApplication >
3 # include < QStyle >
4
5 MainWindow::MainWindow( QWidget *parent )
6 : QMainWindow( parent )7
{8       /* 設置主窗體的位置和大小*/9 this->setGeometry( 0, 0, 800, 480 );1011      /* 實例化QToolBar對象*/12 toolBar = new QToolBar( this );13      /* 設置toolBar的位置和大小*/14 toolBar->setGeometry( 0, 0, 800, 100 );1516      /* 實例化QStyle類對象，用于設置風格，調用系統類自帶的圖標*/17 QStyle * style = QApplication::style();1819      /* 使用Qt自帶的標準圖標，可以在幫助文檔里搜索QStyle::StandardPixmap */20 QIcon icon =style->standardIcon( QStyle::SP_TitleBarContextHelpButton );2122      /* 實例化QToolButton對象*/23 toolButton = new QToolButton();2425      /* 設置圖標*/26 toolButton->setIcon( icon );27      /* 設置要顯示的文本*/28 toolButton->setText( "幫助" );29      /* 調用setToolButtonStyle()方法，設置toolButoon的樣式，設置為文本置于* 圖標下方*/30 toolButton->setToolButtonStyle( Qt::ToolButtonTextUnderIcon );3132      /* 最后將toolButton添加到ToolBar里*/33 toolBar->addWidget( toolButton );34
}35
36 MainWindow::~MainWindow()
37
{38
}

這段代碼的流程是，初始化toolBar（工具條/工具欄）對象，然后初始化toolButton（工具
按鈕）對象，設置工具按鈕的樣式。最后將toolButton（工具按鈕）添加到toolBar（工具條/工
具欄）上。這樣就完成了自定義工具欄的設計。
在源文件“main.cpp”具體代碼如下，由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

最終程序實現的效果如下。成功的將自定義的工具按鈕嵌入工具欄中。在許多含有工具欄
的軟件都可以看到這種設計，都可以使用Qt 來實現類似的功能。

QRadioButton

控件簡介

QRadioButton 部件提供了一個帶有文本標簽的單選框（單選按鈕）。
QRadioButton 是一個可以切換選中（checked）或未選中（unchecked）狀態的選項按鈕。
單選框通常呈現給用戶一個“多選一”的選擇。也就是說，在一組單選框中，一次只能選中一
個單選框。默認在同一個父對象下，初始化后點擊它們是互斥狀態。

用法示例

例06_radiobutton 仿手機開關效果（難度：中等）。本例將實現手機開關效果，需要使用到
Qt 樣式表，加載qss 樣式表文件，與7.1.1 小節類似，只是把樣式表寫到qss 文件里了。這里我
們慢慢接觸Qt 的樣式表了，正因為有樣式表我們才能寫一些比較有實際應用的例子和比較炫的
例子。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

添加資源文件，按如下步驟。右鍵項目，選擇Add New…。

選擇一個模板，選擇Qt 模板，再選擇Qt Resource Files，點擊Choose。這里Qt 模板我們
就不詳細說了，日后我們需要使用什么模板，用到再了解。現在沒必要一下子各個模板的用法，
實際上我們常用的不多。

填上資源文件的名稱（可隨意寫一個，筆者簡寫為res），默認添加項目路徑下。后面的步
驟默認即可，點擊完成。

新建完成了資源文件后，默認會進入res.qrc 文件編輯模式（如果關閉了，可以右鍵這個文
件點擊選擇“Open in Editor”），點擊Add Prefix 添加前綴，添加前綴的目的是方便分類管理文
件，比如我們現在第?處添加了前綴/。“/”一定需要寫，否則會找不到路徑，這有點像Linux
的根節點一樣。

添加了前綴后，我們添加資源圖片，放在/images 前綴的下面。這里我們準備了兩張圖片，
在本項目路徑images 文件夾（images 文件夾先手動創建）下。如下圖步驟，添加完成需要按“Ctrl + S”保存res.qrc 才會看到左邊的結果。添加完成如下圖。

添加qss 文件。QSS 文件是使用Qt 程序相關聯的樣式表文件。它由GUI 元素的外觀和感
覺，包括布局，顏色，鼠標的行為，大小和字體。它的風格，一個可以合并到一個UI（用戶界
面）。與HTML 的CSS 類似，Qt 的樣式表是純文本的格式定義，在應用程序運行時可以載入和
解析這些樣式定義，從而使應用程序的界面呈現不同的效果。

新建一個style.qss 文件，如下圖，默認添加到項目的路徑下，后面步驟默認即可，直至完
成。

qss 文件添加后如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 /* 引入QRadioButton */
6 #include <QRadioButton>
7
8 class MainWindow : public QMainWindow
9 {
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget *parent = nullptr);
14 ~MainWindow();
15
16 private:
17 /* 聲明兩個QRadioButton對象*/
18 QRadioButton *radioButton1;
19 QRadioButton *radioButton2;
20 };
21 #endif // MAINWINDOW_H

在第18 和19 行聲明兩個QRadioButton對象。
在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6       /* 主窗體設置位置和顯示的大小*/7 this->setGeometry( 0, 0, 800, 480 );8 this->setStyleSheet( "QMainWindow {background-color: rgba(200, 50,
100, 100%);}" );910      /* 實例化對象*/11 radioButton1 = new QRadioButton( this );12 radioButton2 = new QRadioButton( this );1314      /* 設置兩個QRadioButton的位置和顯示大小*/15 radioButton1->setGeometry( 300, 200, 100, 50 );16 radioButton2->setGeometry( 400, 200, 100, 50 );1718      /* 設置兩個QRadioButton的顯示文本*/19 radioButton1->setText( "開關一" );20 radioButton2->setText( "開關二" );2122      /* 設置初始狀態，radioButton1的Checked為false,另一個為true*/23 radioButton1->setChecked( false );24 radioButton2->setChecked( true );25
}26
27 MainWindow::~MainWindow()
28
{29
}

第23 行和24 行，設置QRadioButton對象的初始化狀態，讓它們互斥。
在源文件“main.cpp”具體代碼如下。我們需要在main.cpp 里加載qss 文件。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4                       /* 引入QFile */
5 # include < QFile >
6
7 int main( int argc, char *argv[] )
8
{9 QApplication a( argc, argv );10              /* 指定文件*/11 QFile file( ":/style.qss" );1213              /* 判斷文件是否存在*/14 if ( file.exists() ){15      /* 以只讀的方式打開*/16 file.open( QFile::ReadOnly );17      /* 以字符串的方式保存讀出的結果*/18 QString styleSheet = QLatin1String( file.readAll() );19      /* 設置全局樣式*/20 qApp->setStyleSheet( styleSheet );21      /* 關閉文件*/22 file.close();23}24 MainWindow w;25 w.show();26 return(a.exec() );27
}

第11 行至23 行，讀取style.qss 的內容。并設置全局樣式。
在源文件“style.qss”具體代碼如下，與HTML 里的css 語法相似。如果不會寫qss 的內容，
可以參考Qt 幫助文檔的內容，在里面搜索“qt style”。在里面找相關的例子參考，這里我們只
是初步了解下這個qt style。

1 QRadioButton {2 spacing	: 2px;3 color		: white;4
}
5 QRadioButton::indicator {6 width		: 45px;7 height	: 30px;8
}
9 QRadioButton::indicator : unchecked {10 image : url( : / images / switch_off.png );11
}
12 QRadioButton::indicator : checked {13 image : url( : / images / switch_on.png );14
}

在第10 行和第13 行，設置QRadioButton 的indicator 的背景圖片。這樣當它們點擊切換時
就會看到類似開關切換的效果了。

運行效果

編譯程序運行的效果如下。點擊關閉開關一，開關二即打開；點擊開關二，開關一即打開。
因為它們默認是互斥的效果。在某種情況下我們需要使用這種效果，比如我們在網上看視頻時
經常需要切換線路，線路可能有幾種，但是只有一種是激活狀態的，我們就可以應用到這個方
向上。

在這個例子里我們學習到如何添加資源，步驟也詳細，后面的例程都可參考這個例程來添
加資源文件，不再詳細講解添加過程。我們已經初步了解了Qt 的樣式表文件，如果要做好看的界面Qt 的樣式表文件是少不了的。可能我們還不懂Qt 樣式表的語法，不知道如何下手。我們
可以邊學邊了解，可以參考Qt 幫助文檔里的用法，qss 的功能不止這么點。現在的重點是學習
QRadioButton 這個控件。

QCheckBox

控件簡介

QCheckBox 繼承QAbstractButton。復選按鈕（復選框）與RadioButton 的區別是選擇模式，
單選按鈕提供多選一，復選按鈕提供多選多。

用法示例

例07_qcheckbox，三態選擇框（難度：簡單）。使用一個QCheckBox，用戶通過點擊可改
變當選擇框的狀態。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。筆者已經添加了qss 文件和三張資源圖片。如果還不會添加qss 文件和資源圖片，請
參考7.1.3 小節。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 /* 引入QCheckBox */
6 # include < QCheckBox >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明一個QCheckBox對象*/18 QCheckBox * checkBox;19 private slots:20      /* 聲明QCheckBox的槽函數，并帶參數傳遞，用這個參數接收信號的參數*/21 void checkBoxStateChanged( int );2223
};
24 # endif      /* MAINWINDOW_H */

在第18 和19 行聲明兩個QCheckBox 對象。
在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 主窗體設置位置和顯示的大小及背景顏色*/
7 this->setGeometry(0, 0, 800, 480);
8 this->setStyleSheet("QMainWindow {background-color: rgba(100, 100,
100, 100%);}");
9
10 /* 實例化對象*/
11 checkBox = new QCheckBox(this);
12
13 /* 設置QCheckBox位置和顯示大小*/
14 checkBox->setGeometry(350, 200, 250, 50);
15
16 /* 初始化三態復選框的狀態為Checked */
17 checkBox->setCheckState(Qt::Checked);
18
19 /* 設置顯示的文本*/
20 checkBox->setText("初始化為Checked狀態");
21
22 /* 開啟三態模式，必須開啟，否則只有兩種狀態，即Checked和Unchecked */
23 checkBox->setTristate();
24
25 /* 連接checkBox的信號stateChanged(int)，與我們定義的槽
checkBoxStateChanged(int)連接*/
26 connect(checkBox, SIGNAL(stateChanged(int)), this,
SLOT(checkBoxStateChanged(int)));
27 }
28
29 MainWindow::~MainWindow()
30 {
31 }
32
33 /* 槽函數的實現*/
34 void MainWindow::checkBoxStateChanged(int state)
35 {
36 /* 判斷checkBox的state狀態，設置checkBox的文本*/
37 switch (state) {
38 case Qt::Checked:
39 /* 選中狀態*/
40 checkBox->setText("Checked狀態");
41 break;
42 case Qt::Unchecked:
43 /* 未選中狀態*/
44 checkBox->setText("Unchecked狀態");
45 break;
46 case Qt::PartiallyChecked:
47 /* 半選狀態*/
48 checkBox->setText("PartiallyChecked狀態");
49 break;
50 default:
51 break;
52 }
53 }

第23 行，需要注意的是設置QCheckBox 對象checkBox 需要設置為三態模式。
在源文件“main.cpp”具體代碼如下。我們需要在main.cpp 里加載qss 文件。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4                       /* 引入QFile */
5 # include < QFile >
6
7 int main( int argc, char *argv[] )
8
{9 QApplication a( argc, argv );10              /* 指定文件*/11 QFile file( ":/style.qss" );1213              /* 判斷文件是否存在*/14 if ( file.exists() ){15      /* 以只讀的方式打開*/16 file.open( QFile::ReadOnly );17      /* 以字符串的方式保存讀出的結果*/18 QString styleSheet = QLatin1String( file.readAll() );19      /* 設置全局樣式*/20 qApp->setStyleSheet( styleSheet );21      /* 關閉文件*/22 file.close();23}24 MainWindow w;25 w.show();26 return(a.exec() );27
}

第11 行至23 行，讀取style.qss 的內容。并設置全局樣式。
在源文件“style.qss”具體代碼如下。

1 QCheckBox{
2 spacing: 5px;
3 color: white;
4 }
5 QCheckBox::indicator {
6 width: 50px;
7 height: 50px;
8 }
9 QCheckBox::indicator:enabled:unchecked {
10 image: url(:/images/unchecked.png);
11 }
12 QCheckBox::indicator:enabled:checked {
13 image: url(:/images/checked.png);
14 }
15 QCheckBox::indicator:enabled:indeterminate {
16 image: url(:/images/indeterminate.png);
17 }

在第10 行和第13 行，設置QCheckBox 的indicator 的背景圖片。這樣當它們點擊切換時就
會看到QCheckBox 的三種選擇狀態了。

運行效果

編譯程序運行的效果如下，多次點擊checkBox，即可看到QCheckBox 的三種狀態切換。
選中狀態時。

半選狀態。

未選中狀態。

我們經常在軟件安裝時可以看到這種三態選擇框，如果我們設計的程序有多種選擇的項也
可以設計這種選擇框。

QCommandLinkButton

控件簡介

QCommandLinkButton 控件中文名是“命令鏈接按鈕”。QCommandLinkButton 繼承
QPushButton。CommandLinkButton 控件和RadioButton 相似，都是用于在互斥選項中選擇一項。
表面上同平面按鈕一樣，但是CommandLinkButton 除帶有正常的按鈕上的文字描述文本外，默
認情況下，它也將攜帶一個箭頭圖標，表明按下按鈕將打開另一個窗口或頁面。

用法示例

例08_qcommandlinkbutton 鏈接窗口（難度：簡單）。使用一個QCommandLinkButton，點
擊打開系統的窗口。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 /* 引入QCommandLinkButton */
6 # include < QCommandLinkButton >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明一個QCommandLinkButton對象*/18 QCommandLinkButton * commandLinkButton;1920 private slots:21      /* 聲明槽函數，用于點擊commandLinkButton后觸發*/22 void commandLinkButtonClicked();232425
};
26 # endif /* MAINWINDOW_H */

在第18 行，聲明一個QCommandLinkButton 對象。
在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2 /* 引入桌面服務，用來打開系統文件夾對話框*/
3 #include <QDesktopServices>
4 /* 引入QUrl */
5 #include <QUrl>
6
7 MainWindow::MainWindow(QWidget *parent)
8 : QMainWindow(parent)
9 {
10 /* 主窗體設置位置和顯示的大小*/
11 this->setGeometry(0, 0, 800, 480);
12
13 /* 實例化對象*/
14 commandLinkButton = new QCommandLinkButton(
15 "打開/home目錄", "點擊此將調用系統的窗口打開/home目錄",this);
16
17 /* 設置QCommandLinkButton位置和顯示大小*/
18 commandLinkButton->setGeometry(300, 200, 250, 60);
19
20 /* 信號槽連接*/
21 connect(commandLinkButton, SIGNAL(clicked()), this,
22 SLOT(commandLinkButtonClicked()));
23 }
24
25 MainWindow::~MainWindow()
26 {
27 }
28
29 void MainWindow::commandLinkButtonClicked()
30 {
31 /* 調用系統服務打開/home目錄*/
32 QDesktopServices::openUrl(QUrl("file:home/") );
33 }

第14 行，實例化時原型是QCommandLinkButton::QCommandLinkButton(const QString &text,
const QString &description, QWidget *parent = nullptr)。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下。
點擊中間的打開/home 目錄按鈕，結果如下。系統彈出一個窗口，直接打開到/home 目錄。

點擊打開/home 目錄后，系統將彈出/home 目錄路徑窗口。

QDialogButtonBox

控件簡介

對話框和消息框通常以符合該平臺界面指導原則的布局呈現按鈕。不同平臺的對話框總是
有不同的布局。QDialogButtonBox 允許開發人員向其添加按鈕，并將自動使用適合用戶桌面環
境的布局。也就是說我們可以使用系統的自帶的對話框按鈕，也可以自己定義對話框按鈕。
QDialogButtonBox 常用的按鈕有如下幾種，更多的可以參考Qt 幫助文檔。

用法示例

例09_qdialogbuttonbox，自定義QDialogButtonBox 里的按鈕（難度：簡單）。使用一個
QDialogButtonBox，在QDialogButtonBox 添加Qt 提供的按鈕，或者自定義按鈕。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5       /* 引入QDialogButtonBox */
6 # include < QDialogButtonBox >
7       /* 引入QPuhsButton */
8 # include < QPushButton >
9
10 class MainWindow : public QMainWindow11 {12 Q_OBJECT1314 public:15 MainWindow( QWidget *parent = nullptr );16 ~MainWindow();1718 private:19      /* 聲明一個QDialogButtonBox對象*/20 QDialogButtonBox * dialogButtonBox;2122      /* 聲明一個QPushButton對象*/23 QPushButton * pushButton;2425 private slots:26      /* 聲明信號槽，帶QAbstractButton *參數，用于判斷點擊了哪個按鈕*/27 void dialogButtonBoxClicked( QAbstractButton * );2829
};
30 # endif      /* MAINWINDOW_H */

第18 行，聲明一個QDialogButtonBox 對象。
在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2 /* 引入QDebug */
3 #include <QDebug>
4
5 MainWindow::MainWindow(QWidget *parent)
6 : QMainWindow(parent)
7 {
8 /* 主窗體設置位置和顯示的大小*/
9 this->setGeometry(0, 0, 800, 480);
10
11 /* 實例化并設置按鈕的盒子的大小和位置*/
12 dialogButtonBox = new QDialogButtonBox(this);
13 dialogButtonBox->setGeometry(300, 200, 200, 30);
14
15 /*使用Qt的Cancel按鈕*/
16 dialogButtonBox->addButton(QDialogButtonBox::Cancel);
17
18 /*將英文"Cancel"按鈕設置為中文"取消" */
19 dialogButtonBox->button(QDialogButtonBox::Cancel)->setText("取消
");
20
21 /* 設定位置與大小*/
22 pushButton = new QPushButton(tr("自定義"));
23
24 /* 將pushButton添加到dialogButtonBox，并設定ButtonRole為ActionRole
*/
25 dialogButtonBox->addButton(pushButton,
QDialogButtonBox::ActionRole);
26
27 /* 信號槽連接，帶參數QAbstractButton *，用于判斷用戶點擊哪個按鍵*/
28 connect(dialogButtonBox, SIGNAL(clicked(QAbstractButton * )),
29 this, SLOT(dialogButtonBoxClicked(QAbstractButton *)));
30 }
31
32 MainWindow::~MainWindow()
33 {
34 }
35
36 void MainWindow::dialogButtonBoxClicked(QAbstractButton *button)
37 {
38 /* 判斷點擊的對象是否為QDialogButtonBox::Cancel */
39 if(button == dialogButtonBox->button(QDialogButtonBox::Cancel)) {
40 /* 打印“單擊了取消鍵” */
41 qDebug() <<"單擊了取消鍵"<<endl;
42 /* 判斷點擊的對象是否為pushButton */
43 }else if(button == pushButton) {
44 /* 打印“單擊了自定義鍵” */
45 qDebug() <<"單擊了自定義鍵"<<endl;
46 }
47 }

第16 行，實例化時原型是void QDialogButtonBox::addButton(QAbstractButton *button,
QDialogButtonBox::ButtonRole role)。
第41 和45 行，我們第一次用qDebug()。Qt 一般調試都是用qDebug()來打印的。這與C++
的cout 是功能基本一樣。只是Qt 自定義為qDebug()而已。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下。點擊自定義按鈕和取消按鈕，在應用程序輸出窗口可以看到對
應的點擊事件。

輸入窗口部件

Qt Designer 窗口部件提供的面板中，提供了16 種輸入部件如下

（1）Comb Box:組合框
（2）Font Comb Box:字體組合框
（3）Line Edit:單行編輯框
（4）Text Edit:文本編輯框
（5）Plain Text Edit:純文本編輯框
（6）Spin Box:數字旋轉框
（7）Double Spin Box:雙精度數字旋轉框
（8）Time Edit:時間編輯框
（9）Date Edit:日期編輯框
（10）Date/Time Edit:日期時間編輯框
（11）Dial:數字撥盤框
（12）Horizontal Scroll Bar:水平滾動條
（13）Vertical Scroll Bar:垂直滾動條
（14）Horizontal Slider:水平滑動條
（15）Vertical Slider:垂直滑動條
（16）Key sequence Edit:按鍵序列編輯框
這十六種按鈕部件作用簡介如下:
QComboBox 繼承QWidget 類，被QFontComboBox 類繼承。通常用于用戶顯示選項列表的
方法，這種方法占用最少的屏幕空間。
QFontComboBox 繼承QComboBox。QFontComboBox 小部件是一個允許用戶選擇字體系列
的組合框。組合框中填充了按字母順序排列的字體家族名稱列表。FontComboBox 常用于工具
欄，與ComboBox 一起用于控制字體大小，并與兩個ToolButtons 一起用于粗體和斜體。
QLineEdit 繼承QWidget。QLineEdit 小部件是一個單行文本編輯器。行編輯允許用戶使用
一組有用的編輯函數輸入和編輯一行純文本，包括撤消和重做、剪切和粘貼以及拖放。通過更
改行編輯的echoMode()，它還可以用作“只寫”字段，用于輸入如密碼等。
QTextEdit 繼承QAbstractScrollArea，被QTextBrowser 繼承。QTextEdit 是一個高級所見即
所得查看器/編輯器，支持使用html 樣式的標記進行rich text 格式化。它經過優化以處理大型
文檔并快速響應用戶輸入。QTextEdit 用于段落和字符。段落是格式化的字符串，它被字包裝以
適應小部件的寬度。在閱讀純文本時，默認情況下，一個換行表示一個段落。一份文件由零個
或多個段落組成。段落中的文字與段落的對齊方式一致。段落之間用硬換行符隔開。段落中的
每個字符都有自己的屬性，例如字體和顏色。QTextEdit 可以顯示圖像，列表和表格。如果文本
太大而無法在文本編輯的視圖中查看，視圖中則會出現滾動條。
QPlainTextEdit 是一個支持純文本的高級查看器/編輯器。它被優化為處理大型文檔和快速
響應用戶輸入。
QSpinBox 繼承QAbstractSpinBox。用于處理整數和離散值（例如：月份名稱）而QDoubl
eSpinBox 則用于處理浮點值。他們之間的區別就是處理數據的類型不同，其他功能都基本相同。
QSpinBox 允許用戶通過單擊上/下按鈕或按下鍵盤上的上/下按鈕來選擇一個值，以增加/減少當
前顯示的值。用戶還可以手動輸入值。

QDoubleSpinBox 繼承QAbstractSpinBox。QDoubleSpinBox 則用于處理浮點值。QDoubleS
pinBox 允許用戶通過單擊“向上”和“向下”按鈕或按下鍵盤上的“向上”或“向下”按鈕來
選擇當前顯示的值。用戶還可以手動輸入值。
QTimeEdit 繼承QDateTimeEdit。QTimeEdit 用于編輯時間，而QDateEdit 用于編輯日期。
QDateEdit 繼承QDateTimeEdit。QDateEdit 用于編輯日期，而QTimeEdit 用于編輯時間。
QDateTimeEdit 類提供了一個用于編輯日期和時間的小部件。QDateTimeEdit 允許用戶使用
鍵盤或箭頭鍵編輯日期，以增加或減少日期和時間值。箭頭鍵可用于在QDateTimeEdit 框中從
一個區域移動到另一個區域。
QDial 類提供了一個圓形范圍控制(如速度計或電位器)。QDial 用于當用戶需要在可編程定
義的范圍內控制一個值，并且該范圍要么是環繞的(例如，從0 到359 度測量的角度)，要么對
話框布局需要一個正方形小部件。由于QDial 從QAbstractSlider 繼承，因此撥號的行為與滑塊
類似。當wrapping（）為false（默認設置）時，滑塊和刻度盤之間沒有真正的區別。它們共
享相同的信號，插槽和成員功能。您使用哪一個取決于您的用戶期望和應用程序類型。
QScrollBar 繼承QAbstractSlider。QScrollBar 小部件提供垂直或水平滾動條，允許用戶訪問
比用于顯示文檔的小部件大的文檔部分。它提供了用戶在文檔中的當前位置和可見文檔數量的
可視化指示。滾動條通常配有其他控件，可以實現更精確的導航。
QSlider 繼承QAbstractSlider。QSlider 類提供垂直或水平滑動條小部件，滑動條是用于控制
有界值的典型小部件。它允許用戶沿著水平或垂直凹槽移動滑塊手柄，并將手柄的位置轉換為
合法范圍內的整數值。
QKeySequenceEdit 繼承QWidget。這個小部件允許用戶選擇QKeySequence, QKeySequence
通常用作快捷方式。當小部件接收到焦點并在用戶釋放最后一個鍵后一秒結束時，將啟動記錄，
通常用作記錄快捷鍵。

QComboBox

控件簡介

QComboBox 類提供了Qt 下拉組合框的組件。

用法示例

例10_qcombobox，選擇省份（難度：簡單），通過點擊下拉按鈕的項，選擇其中一項，然
后打印出當前選擇項的內容。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 /* 引入QComboBox */
6 # include < QComboBox >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明一個QComboBox對象*/18 QComboBox * comboBox;1920 private slots:21      /* 聲明QComboBox對象的槽函數*/22 void comboBoxIndexChanged( int );2324
};
25 # endif      /* MAINWINDOW_H */

第20 行，聲明一個QComboBox 對象。
在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2 /* 引入QDebug */
3 #include <QDebug>
4
5 MainWindow::MainWindow(QWidget *parent)
6 : QMainWindow(parent)
7 {
8 /* 設置主窗體的顯示位置與大小*/
9 this->setGeometry(0, 0, 800, 480);
10
11 /* 實例化對象*/
12 comboBox = new QComboBox(this);
13
14 /* 設置comboBox的顯示位置與大小*/
15 comboBox->setGeometry(300, 200, 150, 30);
16
17 /* 添加項，我們添加三個省份，作為comboBox的三個選項*/
18 comboBox->addItem("廣東(默認)");
19 comboBox->addItem("湖南");
20 comboBox->addItem("四川");
21
22 /* 信號槽連接*/
23 connect(comboBox, SIGNAL(currentIndexChanged(int)), this,
24 SLOT(comboBoxIndexChanged(int)));
25 }
26
27 MainWindow::~MainWindow()
28 {
29 }
30
31 void MainWindow::comboBoxIndexChanged(int index)
32 {
33 /* 打印出選擇的省份*/
34 qDebug()<<"您選擇的省份是"<< comboBox->itemText(index)<<endl;
35 }

第18 至20 行，添加Item，也就是項。
第30 至34 行，當點擊下拉列表改變選擇的省份就會觸發currentIndexChanged(int)這個信
號，就會相應打印項的省份名稱。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下，當點擊下拉選擇框選擇省份時，槽函數將打印出您選擇的省份。

點擊選擇“湖南”，則打印出“您選擇的省份是湖南”。

QComboBox 我們常會在一些需要下拉列表選擇的項目中用到。比如QQ 登錄如果有多個帳
號選擇就需要這個QComboBox。

QFontComboBox

控件簡介

QFontComboBox 類提供了下拉選擇字體系列的組合框小部件。

用法示例

例11_qfontcombobox，字體選擇（難度：簡單），通過點擊下拉按鈕的項，選擇其中一項，
然后打印出當前選擇項的內容。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5       /* 引入QFontComboBox */
6 # include < QFontComboBox >
7       /* 引入QLable */
8 # include < QLabel >
9
10 class MainWindow : public QMainWindow11 {12 Q_OBJECT1314 public:15 MainWindow( QWidget *parent = nullptr );16 ~MainWindow();1718 private:19      /* 聲明一個QFontComboBox對象*/20 QFontComboBox * fontComboBox;21      /* 聲明一個Label對象，用于顯示當前字體變化*/22 QLabel * label;2324 private slots:25      /* 聲明QFontComboBox對象使用的槽函數*/26 void fontComboBoxFontChanged( QFont );2728
};
29 # endif      /* MAINWINDOW_H */

第20 行，聲明一個QFontComboBox 對象。
在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置主窗體的顯示位置和大小*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 實例化對象*/
10 fontComboBox = new QFontComboBox(this);
11 label = new QLabel(this);
12
13 /* 設置顯示的位置與大小*/
14 fontComboBox->setGeometry(280, 200, 200, 30);
15 label->setGeometry(280, 250, 300, 50);
16
17 /* 信號與槽連接*/
18 connect(fontComboBox, SIGNAL(currentFontChanged(QFont)), this,
19 SLOT(fontComboBoxFontChanged(QFont)));
20 }
21
22 MainWindow::~MainWindow()
23 {
24 }
25
26 /* 槽函數實現*/
27 void MainWindow::fontComboBoxFontChanged(QFont font)
28 {
29 /* 將label里的文本內容設置為所選擇的字體*/
30 label->setFont(font);
31
32 /* 定義一個字符串接收當前項的字體*/
33 QString str = "用此標簽顯示字體效果\n設置的字體為：" +
34 fontComboBox->itemText(fontComboBox->currentIndex());
35
36 /* 將字符串的內容作為label的顯示內容*/
37 label->setText(str);
38 }

第27 至37 行，當選擇的字體改變時，槽函數就會設置label 的字體，并打印當前字體的名
稱。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下，當點擊FontCOmboBox 字體組合框選擇字體后，Label 標簽顯示的
字體將改變為當前所選擇的字體。（注意Ubuntu 與Windows 的字體不一樣，所以顯示的效果有
可能不一樣，下圖為Ubuntu 的字體顯示效果）

在手機，電腦一些軟件都有設置字體的功能，由用戶自行選擇，所以我們這個
QFontComboBox 就可以應用于此種場合。當然也有設置字體的大小，顏色等，這些由我們自由
設計。

QLineEdit

控件簡介

QLineEdit 小部件是一個單行文本編輯器。行編輯允許用戶使用一組有用的編輯函數輸入和
編輯一行純文本。包括撤消和重做、剪切和粘貼以及拖放。通過更改行編輯的echoMode()，它
還可以用作“只寫”字段，用于輸入如密碼等。

用法示例

例12_qlineedit，單行輸入框（難度：簡單），通過點擊下拉按鈕的項，選擇其中一項，然
后打印出當前選擇項的內容。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。像引入頭文件，設置主窗體大小位置和實例化
對象這種注釋我們慢慢淡化，不再寫詳細注釋了。讀者看了前面的對這種設置已經很清楚了。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QLineEdit >
6 # include < QPushButton >
7 # include < QLabel >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();16 private:17      /* 聲明一個QLineEdit對象*/18 QLineEdit * lineEdit;1920      /* 聲明一個QPushButton對象*/21 QPushButton * pushButton;2223      /* 聲明一個QLabel對象*/24 QLabel * label;2526 private slots:27      /* 聲明一個槽函數，響應pushButton的clicked事件*/28 void pushButtonClicked();29
};
30 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 lineEdit = new QLineEdit(this);
9 lineEdit->setGeometry(280, 200, 200, 20);
10
11 pushButton = new QPushButton(this);
12 pushButton->setGeometry(500, 200, 50, 20);
13 pushButton->setText("確認");
14
15 label = new QLabel(this);
16 label->setGeometry(280, 250, 400, 20);
17 label->setText("您輸入的內容是：");
18
19 /* 信號槽連接*/
20 connect(pushButton,SIGNAL(clicked()), this,
21 SLOT(pushButtonClicked()));
22 }
23
24 MainWindow::~MainWindow()
25 {
26 }
27
28 void MainWindow::pushButtonClicked()
29 {
30 /* 字符串變量str */
31 QString str;
32
33 str = "您輸入的內容是：";
34 str += lineEdit->text();
35
36 /* 設置label里的文本顯示內容*/
37 label->setText(str);
38 /* 在點擊了確認鍵之后清空lineEdit單行輸入框*/
39 lineEdit->clear();
40 }

第28 至40 行，當我們在單選輸入框里輸入完成后，將輸入的內容設置為在label 的文本內
容。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下，當在QLineEdit 單行輸入框內輸入文本內容后，單擊QPushButton
確認按鈕后，QLabel 的文本內容將顯示您所輸入的內容。然后QLineEdit 將清空，可再次輸入。

QLineEdit 的簡單使用如上，筆者也是簡單的介紹了它的用法。要想寫好一點的例子，需要
我們主動思考，比如，做個將這個QLineEdit 應用到密碼登錄窗口上，輸入密碼，然后判斷這
個密碼是否與預設的密碼一樣才解鎖等。

QTextEdit

控件簡介

QTextEdit 類提供了一個查看器/編輯器小部件。

用法示例

例13_qtextedit 文本編輯框（難度：簡單），用一個QTextEdit 來演示文本的輸入，用兩個
QPushButton 來模擬文本編輯的全選與清除。在QTextEdit 里也可用鍵盤的快捷鍵（如Ctrl+A）
來完成全選，復制，粘貼等操作。Qt 提供了全選，復制粘貼等這一類的函數方便用戶操作，下
面用簡單的實例來演示。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3 # include < QTextEdit >
4 # include < QPushButton >
5
6 # include < QMainWindow >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明一個QTextEdit對象*/18 QTextEdit * textEdit;1920      /* 聲明兩個QPushButton對象*/21 QPushButton * pushButtonSelectAll;22 QPushButton * pushButtonClearAll;2324 private slots:25      /* 聲明兩個槽函數，響應按鈕點擊響應的事件*/26 void pushButtonSelectAllClicked();27 void pushButtonClearAllClicked();2829
};
30 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置主窗體顯示的位置和大小*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 實例和對象，設置位置和顯示大小*/
10 textEdit = new QTextEdit(this);
11 textEdit->setGeometry(0, 0, 800, 400);
12
13 /* 實例和對象，設置位置和顯示大小，設置文本*/
14 pushButtonSelectAll = new QPushButton(this);
15 pushButtonSelectAll->setGeometry(200, 420, 50, 20);
16 pushButtonSelectAll->setText("全選");
17
18 /* 實例和對象，設置位置和顯示大小，設置文本*/
19 pushButtonClearAll = new QPushButton(this);
20 pushButtonClearAll->setGeometry(500, 420, 50, 20);
21 pushButtonClearAll->setText("清除");
22
23 /* 信號槽連接*/
24 connect(pushButtonSelectAll, SIGNAL(clicked()), this,
25 SLOT(pushButtonSelectAllClicked()));
26 connect(pushButtonClearAll, SIGNAL(clicked()), this,
27 SLOT(pushButtonClearAllClicked()));
28
29 }
30
31 MainWindow::~MainWindow()
32 {
33 }
34
35 void MainWindow::pushButtonSelectAllClicked()
36 {
37 /* 設置焦點為textEdit */
38 textEdit->setFocus();
39 /* 判斷文本編輯框內容是否為空，不為空則全選*/
40 if(!textEdit->toPlainText().isEmpty()){
41 /* 全選*/
42 textEdit->selectAll();
43 }
44 }
45
46 void MainWindow::pushButtonClearAllClicked()
47 {
48 /* 清空textEdit里的文本內容*/
49 textEdit->clear();
50 }
51

第35 至49 行，當我們在文本輸入框里輸入完成后，當點擊全選按鈕后，需要設置焦點到
textEdit 上，否則將不能設置全選。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下，在編輯框里輸入文字后，點擊按鈕全選，點擊清除則清除編輯
框內的全部內容。如下圖為點擊全選的效果。

QPlainTextEdit

控件簡介

QPlainTextEdit 類提供了一個用于編輯和顯示純文本的小部件，常用于顯示多行文本或簡單
文本。

用法示例

例14_qplaintextedit 文本瀏覽編輯器（難度：簡單），用一個QPlainTextEdit 來讀取本當前
工程里的一個文件，并用一個RadioButton 里將QPlainTextEdit 設為只讀。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QPlainTextEdit >
5 # include < QRadioButton >
6
7 # include < QMainWindow >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();1617 private:18      /* 聲明對象*/19 QPlainTextEdit * plainTextEdit;20 QRadioButton * radioButton;2122 private slots:23      /* 槽函數*/24 void radioButtonClicked();2526
};
27 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2 #include <QDir>
3 #include <QTextStream>
4 #include <QCoreApplication>
5
6 MainWindow::MainWindow(QWidget *parent)
7 : QMainWindow(parent)
8 {
9 /* 設置當前程序的工作目錄為可執行程序的工作目錄*/
10 QDir::setCurrent(QCoreApplication::applicationDirPath());
11
12 this->setGeometry(0, 0, 800, 480);
13
14 plainTextEdit = new QPlainTextEdit(this);
15 plainTextEdit->setGeometry(0, 50, 800, 430);
16
17 radioButton = new QRadioButton(this);
18 radioButton->setGeometry(650, 20, 100, 20);
19 radioButton->setText("只讀模式");
20
21 /* 打開可執行程序目錄里的moc_mainwindow.cpp，注意如果是Windows下
22 moc_mainwindow.cpp并不在當前目錄，而在上一級目錄"../moc_mainwindow.cpp
"*/
23 QFile file("moc_mainwindow.cpp");
24
25 /* 以只讀模式打開，但是可以在plainTextEdit里編輯*/
26 file.open((QFile::ReadOnly | QFile::Text));
27
28 /* 加載到文件流*/
29 QTextStream in(&file);
30
31 /* 從文本流中讀取全部*/
32 plainTextEdit->insertPlainText(in.readAll());
33
34 /* 信號槽連接*/
35 connect(radioButton, SIGNAL(clicked()), this,
36 SLOT(radioButtonClicked()));
37
38 }
39
40 MainWindow::~MainWindow()
41 {
42 }
43
44 void MainWindow::radioButtonClicked()
45 {
46 /* 檢查radioButton是否選中*/
47 if(radioButton->isChecked()) {
48 /* 設置為只讀模式*/
49 plainTextEdit->setReadOnly(true);
50 } else {
51 /* 設置為非只讀模式*/
52 plainTextEdit->setReadOnly(false);
53 }
54 }

第44 和54 行，檢查radioButton 是否選中。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下，當程序正常運行后會打開程序當前路徑下的”
moc_mainwindow.cpp” 文件，（注意在Windows 下moc_mainwindow.cpp 應該寫成”…/
moc_mainwindow.cpp”），且在QPlainTextEdit 編輯框下是可編輯的，當選中程序界面上的只讀
模式時，QPlainTextEdit 編輯框就不可以再編輯。相反可以取消只讀模式則可以再編輯。

有了QTextEdit，為什么還有QPlainTextEdit？QPlainTextEdit 可以理解為QTextEdit 的低配
版。QPlainTextEdit 支持純文本顯示，QTextEdit 支持富文本（支持多種格式，比如插入圖片，
鏈接等）顯示。就是多一個樣式。QPlainTextEdit 顯示的效率比QTextEdit 高，如果需要顯示大
量文字，尤其是需要滾動條來回滾動的時候，QPlainTextEdit 要好很多。

QSpinBox

控件簡介

QSpinBox 類提供了一個微調框小部件。

用法示例

例15_qspinbox 窗口背景不透明調節器（難度：簡單），用一個QSpinBox 來調節程序窗體
的整體不透明度。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QSpinBox>
class MainWindow : public QMainWindow
{Q_OBJECT
public:MainWindow( QWidget *parent = nullptr );~MainWindow();
private:
/* 聲明一個QSpinBox對象*/QSpinBox *spinBox;
private slots:
/* 槽函數*/void spinBoxValueChanged( int );
};
#endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 /* 設置主窗口背景顏色，rgb顏色標準，a代表不透明度（0～100）*/
9 this->setStyleSheet("QMainWindow{background-color: "
10 "rgba(100, 100, 100, 100%) }");
11
12 spinBox = new QSpinBox(this);
13 spinBox->setGeometry(350, 200, 150, 30);
14
15 /* 設置范圍0～100 */
16 spinBox->setRange(0, 100);
17
18 /* 設置步長為10 */
19 spinBox->setSingleStep(10);
20
21 /* 設置初始值為100 */
22 spinBox->setValue(100);
23
24 /* 設置后綴*/
25 spinBox->setSuffix("%不透明度");
26
27 /* 信號槽連接*/
28 connect(spinBox,SIGNAL(valueChanged(int)), this,
29 SLOT(spinBoxValueChanged(int)));
30 }
31
32 MainWindow::~MainWindow()
33 {
34 }
35
36 void MainWindow::spinBoxValueChanged(int opacity)
37 {
38 /* 轉換為double數據類型*/
39 double dobleopacity = (double)opacity / 100;
40
41 /* 設置窗體不透明度，范圍是0.0～1.0。1則為不透明，0為全透明*/
42 this->setWindowOpacity(dobleopacity);
43 }

第42 行，設置主窗體的不透明度。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下，程序初始化界面時是全不透明，不透明度值為100%，當點擊
向下調節SpinBox 后，整個窗體的不透明將會變小。當不透明度的值變小時，窗口將透明化。

QDoubleSpinBox

控件簡介

QDoubleSpinBox 類提供了一個用于處理浮點值微調框小部件。與QSpinBox 作用基本一樣，
與QSpinBox 不同的是，QDoubleSpinBox 類處理的是浮點值數據。

用法示例

例16_qdoublespinbox 窗口大小調節器（難度：簡單），用一個QDoubleSpinBox 來調節程
序窗口的整體大小。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QDoubleSpinBox >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16      /* 聲明一個QDoubleSpinBox對象*/17 QDoubleSpinBox * doubleSpinBox;1819 private slots:20      /* 槽函數*/21 void doubleSpinBoxValueChanged( double );2223
};
24 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 /* 實例化和設置顯示的位置與大小*/
9 doubleSpinBox = new QDoubleSpinBox(this);
10 doubleSpinBox->setGeometry((this->width() - 200) / 2,
11 (this->height() - 30) / 2,
12 200, 30);
13 /* 設置前綴*/
14 doubleSpinBox->setPrefix("窗口大小");
15
16 /* 設置后綴*/
17 doubleSpinBox->setSuffix("%");
18
19 /* 設置范圍*/
20 doubleSpinBox->setRange(50.00, 100.00);
21
22 /* 設置初始值*/
23 doubleSpinBox->setValue(100.00);
24
25 /* 設置步長*/
26 doubleSpinBox->setSingleStep(0.1);
27
28 /* 信號槽連接*/
29 connect(doubleSpinBox, SIGNAL(valueChanged(double)),
30 SLOT(doubleSpinBoxValueChanged(double)));
31
32 }
33
34 MainWindow::~MainWindow()
35 {
36 }
37
38 void MainWindow::doubleSpinBoxValueChanged(double value)
39 {
40 /* 重新計算窗口的寬與高*/
41 int w = 800 * value / 100;
42 int h = 480 * value / 100;
43
44 /* 重新設置窗口的寬與高*/
45 this->setGeometry(0, 0, w, h);
46
47 /* 重新設置doubleSpinBox的顯示位置*/
48 doubleSpinBox->setGeometry((this->width() - 200) / 2,
49 (this->height() - 30) / 2,
50 200, 30);
51
52 }

第35 至49 行，重新設置主窗體的寬高和doubleSpinBox 的顯示位置。
在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果

程序編譯運行的結果如下，程序初始化界面窗口大小值為100%，當點擊向下調節
QDoubleSpinBox 時，整個窗體將按QDoubleSpinBox 里數值的比例縮小，最小為50.00%，相反
當點擊向上調節QDoubleSpinBox 時，窗口大小將整體變大，最大為100.00%。

QTimeEdit

7.2.8.1 控件簡介
QTimeEdit 類提供一個基于QDateTimeEdit 類編輯時間的小部件。例在7.2.10 小節。

QDateEdit

7.2.9.1 控件簡介
QDateEdit 類提供一個基于QDateTimeEdit 類編輯時間的小部件。例在7.2.10 小節。
7.2.10 QDateTimeEdit
7.2.10.1 控件簡介
從名字可知QDateTimeEdit 類提供了一個用于編輯日期和時間的小部件。QDateTimeEdit
允許用戶使用鍵盤或箭頭鍵編輯日期，以增加或減少日期和時間值。箭頭鍵可用于在
QDateTimeEdit 框中從一個區域移動到另一個區域。實際上是QDateTimeEdit 和QDateEdit 的組
合。
7.2.10.2 用法示例
例17_qdatetimeedit 時間日期展示（難度簡單），使用一個QDateTimeEdit，一個QTimeEdit
以及一個QDateEdit，傳入當前系統時間與日期，展示簡單的日期時間控件使用方法。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QDateTimeEdit >
6 # include < QTimeEdit >
7 # include < QDateEdit >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();1617 private:18      /* 聲明對象*/19 QDateTimeEdit * dateTimeEdit;20 QTimeEdit * timeEdit;21 QDateEdit * dateEdit;22
};
23 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6       /* 設置位置與大小*/7 this->setGeometry( 0, 0, 800, 480 );89       /*實例化對象，傳入當前日期與時間*/10 dateTimeEdit = new QDateTimeEdit(QDateTime::currentDateTime(), this );11 dateTimeEdit->setGeometry( 300, 200, 200, 30 );12      /* 彈出日期控件與否*/13      /* dateTimeEdit->setCalendarPopup(true); */1415      /* 實例化對象，傳入當前時間*/16 timeEdit = new QTimeEdit( QTime::currentTime(), this );17 timeEdit->setGeometry( 300, 240, 200, 30 );1819      /* 實例化對象，傳入當前日期*/20 dateEdit = new QDateEdit( QDate::currentDate(), this );21 dateEdit->setGeometry( 300, 280, 200, 30 );22
}23
24 MainWindow::~MainWindow()
25
{26
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，當程序初始化時，分別顯示系統當前的時間與日期（注意，
windows 下Qt 程序顯示的格式可能不一樣，下圖為linux 下的Qt 程序日期顯示格式）。

QDial

7.2.11.1 控件簡介
QDial 類提供了一個圓形范圍控制(如速度計或電位器)。QDial 用于當用戶需要在可編程定
義的范圍內控制一個值，并且該范圍要么是環繞的(例如，從0 到359 度測量的角度)，要么對
話框布局需要一個正方形小部件。由于QDial 從QAbstractSlider 繼承，因此撥號的行為與滑塊
類似。當wrapping（）為false（默認設置）時，滑塊和刻度盤之間沒有真正的區別。它們共
享相同的信號，插槽和成員功能。您使用哪一個取決于您的用戶期望和應用程序類型。
7.2.11.2 用法示例
例18_qdial 車速表（難度：簡單），使用一個QDial，以一個QLabel，演示QDial 的用法。
當程序初始化界面后，拖動滑塊的位置，label 則會顯示dial 的值。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QDial >
5 # include < QLabel >
6 # include < QMainWindow >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明對象*/18 QDial * dial;19 QLabel * label;2021 private slots:22      /* 槽函數*/23 void dialValueChanged( int );2425
};
26 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置主窗體的位置與大小*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 實例化對象和設置顯示位置與大小*/
10 dial = new QDial(this);
11 dial->setGeometry(300, 100, 200, 200);
12
13 /* 設置頁長（兩個最大刻度的間距）*/
14 dial->setPageStep(10);
15
16 /* 設置刻度可見*/
17 dial->setNotchesVisible(true);
18
19 /* 設置兩個凹槽之間的目標像素數*/
20 dial->setNotchTarget(1.00);
21
22 /* 設置dial值的范圍*/
23 dial->setRange(0,100);
24
25 /* 開啟后可指向圓的任何角度*/
26 //dial->setWrapping(true);
27
28 /* 實例化對象和設置顯示位置與大小*/
29 label = new QLabel(this);
30 label->setGeometry(370, 300, 200, 50);
31
32 /* 初始化為0km/h */
33 label->setText("0km/h");
34
35 /* 信號槽連接*/
36 connect(dial, SIGNAL(valueChanged(int)),
37 this, SLOT(dialValueChanged(int)));
38 }
39
40 MainWindow::~MainWindow()
41 {
42 }
43
44 void MainWindow::dialValueChanged(int val)
45 {
46 /* QString::number()轉換成字符串*/
47 label->setText(QString::number(val) + "km/h");
48 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，當程序初始化時，QDial 控件的顯示如下（注意，windows 下
QDial 控件顯示的格式可能不一樣，下圖為linux 下的QDial 控件的顯示樣式）。當用鼠標拖動
滑塊或者按鍵盤的上下左右方向鍵時，label 則會顯示當前“車速”。

QDial 在很多場合都能使用，比如音量控制，汽車儀表盤，芝麻信用分等場合都可以使用
到，只是需要我們有這個創意和想法，還需要個人的美工基礎。

QScrollBar

7.2.12.1 控件簡介
QScrollBar 繼承QAbstractSlider。QScrollBar 小部件提供垂直或水平滾動條，允許用戶訪問
比用于顯示文檔的小部件大的文檔部分。它提供了用戶在文檔中的當前位置和可見文檔數量的
可視化指示。滾動條通常配有其他控件，可以實現更精確的導航(這里指瀏覽到精確的位置)。
7.2.12.2 用法示例
例19_qscrollbar 創建水平和垂直滾動條（難度：簡單），使用QScrollBar 類實例化兩個控
件，一個是水平滾動條，另一個是垂直滾動條，中間用一個標簽文本來顯示。（本例只創建實例，
不對效果進行細化（請注意：一般水平或垂直滾動條都用QScrollArea 搭配其他控件使用，不
單獨使用QScrollBar 去創建滾動條，有些控件“自帶”滾動條，例如QListWidget 等，都可以
用QScrollArea 來設置它的屬性）。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QScrollBar >
6 # include < QLabel >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明水平滾動條對象*/18 QScrollBar * horizontalScrollBar;1920      /* 聲明垂直滾動條對象*/21 QScrollBar * verticalScrollBar;2223      /* 聲明標簽文本*/24 QLabel * label;25
};
26 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6       /* 設置主窗體大小，位置*/7 this->setGeometry( 0, 0, 800, 480 );89       /* 實例化水平滾動條及設置位置大小*/10 horizontalScrollBar = new QScrollBar( Qt::Horizontal, this );11 horizontalScrollBar->setGeometry( 0, 450, 800, 30 );1213      /* 實例化垂直滾動條及設置位置大小*/14 verticalScrollBar = new QScrollBar( Qt::Vertical, this );15 verticalScrollBar->setGeometry( 770, 0, 30, 480 );1617      /* 實例化，標簽文本*/18 label = new QLabel( this );19      /* 設置文本*/20 label->setText( "這是一個測試" );21      /* 設置位置大小*/22 label->setGeometry( 300, 200, 100, 20 );23
}24
25 MainWindow::~MainWindow()
26
{27
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果。如下當程序初始化時，滾動條控件的顯示如下（注意，windows 下
滾動條控件顯示的格式可能不一樣，下圖為linux 下的滾動條控件的顯示樣式）。

QSlider

7.2.13.1 控件簡介
QSlider 繼承QAbstractSlider。QScrollBar 類提供垂直或水平滑動條小部件，滑動條是用于
控制有界值的典型小部件。它允許用戶沿著水平或垂直凹槽移動滑塊手柄，并將手柄的位置轉
換為合法范圍內的整數值。
7.2.13.2 用法示例
例20_qslider 創建水平和垂直滑動條（難度：簡單）創建兩個QSlider 對象，一個是水平滑
動條，另一個是垂直滑動條；用一個Label 來顯示當前水平或垂直滑動條當前的值。設置水平
滑動條與水平滑動條相互關聯，通過滑動其中一個滑動條的值相應的也會改變另一個滑動條的
值。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QSlider >
6 # include < QLabel >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明對象*/18 QSlider * horizontalSlider;19 QSlider * verticalSlider;20 QLabel * label;21 private slots:22      /* 槽函數*/23 void horizontalSliderValueChanged( int );24 void verticalSliderValueChanged( int );2526
};
27 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 this->setGeometry(0, 0, 800, 480);
7
8 /* 實例化水平滑動條對象*/
9 horizontalSlider = new QSlider(Qt::Horizontal, this);
10
11 /* 設置顯示的位置與大小*/
12 horizontalSlider->setGeometry(250, 100, 200, 20);
13
14 /* 設置值范圍*/
15 horizontalSlider->setRange(0, 100);
16
17 /* 實例化垂直滑動條對象*/
18 verticalSlider = new QSlider(Qt::Vertical, this);
19
20 /* 設置顯示的位置與大小*/
21 verticalSlider->setGeometry(200, 50, 20, 200);
22
23 /* 設置值范圍*/
24 verticalSlider->setRange(0, 100);
25
26 /* 實例化標簽文本*/
27 label = new QLabel("滑動條值：0", this);
28 label->setGeometry(250, 200, 100, 20);
29
30 /* 信號槽連接*/
31 connect(horizontalSlider, SIGNAL(valueChanged(int)),
32 this, SLOT(horizontalSliderValueChanged(int)));
33 connect(verticalSlider, SIGNAL(valueChanged(int)),
34 this, SLOT(verticalSliderValueChanged(int)));
35
36 }
37
38 MainWindow::~MainWindow()
39 {
40 }
41
42 void MainWindow::horizontalSliderValueChanged(int val)
43 {
44 /* 當水平滑動條的值改變時，改變垂直滑動條的值*/
45 verticalSlider->setSliderPosition(val);
46
47 /* 將int類型轉變成字符*/
48
49 QString str = "滑動條值：" + QString::number(val);
50
51 /* 顯示當前垂直或水平滑動條的值*/
52 label->setText(str);
53
54 }
55
56 void MainWindow::verticalSliderValueChanged(int val)
57 {
58 /* 當垂直滑動條的值改變時，改變水平滑動條的值*/
59 horizontalSlider->setSliderPosition(val);
60 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。當程序初始化時，滑動條控件的顯示如下（注意，windows 下
滑動條控件顯示的格式可能不一樣，下圖為linux 下的滑動條控件的顯示樣式）。Label 顯示的
初始值為0，當拖動任意一個滑動條來改變當前的值，另一個滑動條的值也在變。

QKeySequenceEdit

7.2.14.1 控件簡介
QKeySequenceEdit 繼承QWidget。這個小部件允許用戶選擇QKeySequence, QKeySequence
通常用作快捷方式。當小部件接收到焦點并在用戶釋放最后一個鍵后一秒結束時，將啟動記錄，
通常用作記錄快捷鍵。
7.2.14.2 用法示例
例21_qkeysequenceedit 自定義快捷鍵（難度：簡單），通常KeySequenceEdit 控件記錄快捷
鍵后與Qt 鍵盤事件搭配來使用，由于教程后面才說到事件，所以先不與Qt 鍵盤事件搭配使用。
下面使用一個QKeySequenceEdit 控件，然后判斷輸入的組合鍵是否為Ctrl + Q，若是，則關閉
窗口，退出程序，如果不是，則繼續更新記錄組合鍵。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QKeySequenceEdit >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16      /* 聲明QKeySequenceEdit對象*/17 QKeySequenceEdit * keySequenceEdit;1819 private slots:20      /* 聲明槽*/21 void KSEKeySequenceChanged( const QKeySequence & );2223
};
24 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2 #include <QDebug>
3
4 MainWindow::MainWindow(QWidget *parent)
5 : QMainWindow(parent)
6 {
7 /* 主窗體設置位置與大小*/
8 this->setGeometry(0, 0, 800, 480);
9
10 /* 實例化*/
11 keySequenceEdit = new QKeySequenceEdit(this);
12
13 /* 設置位置與大小*/
14 keySequenceEdit->setGeometry(350, 200, 150, 30);
15
16 /* 信號槽連接*/
17 connect(keySequenceEdit,
18 SIGNAL(keySequenceChanged(const QKeySequence &)),
19 this,
20 SLOT(KSEKeySequenceChanged(const QKeySequence &))
21 );
22
23 }
24
25 MainWindow::~MainWindow()
26 {
27 }
28
29 void MainWindow::KSEKeySequenceChanged(
30 const QKeySequence &keySequence)
31 {
32 /* 判斷輸入的組合鍵是否為Ctrl + Q，如果是則退出程序*/
33 if(keySequence == QKeySequence(tr("Ctrl+Q"))) {
34 /* 結束程序*/
35 this->close();
36 }else {
37 /* 打印出按下的組合鍵*/
38 qDebug()<<keySequence.toString()<<endl;
39 }
40 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。（注意Windows 下顯示效果可能不同，下圖為linux 下運行的結
果），當焦點在KeySequenceEdit 里時，按下鍵盤里的任一鍵或者組合鍵，一秒后，
KeySequenceEdit 將記錄了這個/這組組合鍵，并打印在輸出信息里。直到程序按下Ctrl + Q 組
合鍵后，程序窗口才關閉，結束。

顯示窗口部件

Qt Designer 顯示窗口部件提供的面板中，提供了10 種顯示小部件。在Qt5.5 以前的Qt5 版
本這個顯示窗口部件還有一個QWebview 部件，在Qt5.6 開始就被移除了，取而代之的是
QWebengine，但是QWebengine 不是以小部件的形式在這個顯示窗口部件里顯示。

（1）Label:標簽
（2）Text Browser:文本瀏覽器
（3）Graphics View:圖形視圖
（4）Calendar Widget:日歷
（5）LCD Number:液晶數字
（6）Progress Bar:進度條
（7）Horizontal Line:水平線
（8）Vertial Line:垂直線
（9）OpenGL Widget:開放式圖形庫工具
（10）QQuick Widget:嵌入式QML 工具
這十六種按鈕部件作用簡介如下:
QLabel提供了一種用于文本或圖像顯示的小部件，在前4.1 與4.2 某些小節已經出現過Label
控件，只用了它顯示文本，其實它還可以用于顯示圖像。
QCalendarWidget 繼承QWidget。QCalendarWidget 類提供了一個基于月的日歷小部件，允
許用戶選擇日期。CalendarWidget 小部件是用當前月份和年份初始化的，QCalendarWidget 還提
供了幾個公共插槽來更改顯示的年份和月份。
QLCDNumber 繼承QFrame。QLCDNumber 小部件顯示一個類似于lcd 的數字。QLCDNu
mber 小部件可以顯示任意大小的數字。它可以顯示十進制、十六進制、八進制或二進制數字。
使用display()插槽很容易連接到數據源，該插槽被重載以接受五種參數類型中的任何一種。
QProgressBar 繼承QWidget。QProgressBar 小部件提供了一個水平或垂直的進度條。進度
條用于向用戶顯示操作的進度，并向他們確認應用程序仍在運行。
QFrame 繼承QWidget。QFrame 類是有框架的窗口部件的基類，它繪制框架并且調用一個
虛函數drawContents()來填充這個框架。這個函數是被子類重新實現的。這里至少還有兩個有用
的函數：drawFrame()和frameChanged()。
QTextBrowser 繼承QTextEdit，QTextBrowser 類提供了一個具有超文本導航的文本瀏覽器。
該類擴展了QTextEdit(在只讀模式下)，添加了一些導航功能，以便用戶可以跟蹤超文本文檔中
的鏈接。
QGraphicsView 繼承QAbstractScrollArea。QGraphicsView 是圖形視圖框架的一部分，它提
供了基于圖元的模型/視圖編程。QGraphicsView 在可滾動視圖中可視化QGraphicsScene 的內容。
要創建帶有幾何項的場景，請參閱QGraphicsScene 的文檔。
要可視化場景，首先構造一個QGraphicsView 對象，將要可視化的場景的地址傳遞給QGr
aphicsView 的構造函數。或者，可以調用setScene()在稍后設置場景。
Text Browser （文本瀏覽器）、Graphics View(圖形視圖)、OpenGL Widget(開放式圖形庫工具)、
QQuick Widget(嵌入式QML 工具)將不在本小節介紹，其中Text Browser （文本瀏覽器）、Graphics
View(圖形視圖)在7.4 小節顯示窗口之瀏覽器介紹。

QLabel

7.3.1.1 控件簡介
QLabel 提供了一種用于文本或圖像顯示的小部件，在前7.2.11、7.2.12 等小節已經出現過
Label 控件，只用了它顯示文本，其實它還可以用于顯示圖像。
7.3.1.2 用法示例
例22_qlbel 標簽顯示圖像或文本（難度簡單），前面已經在某些小節出現過label 了，但只
是用來顯示文本內容，實際上像button（按鈕），widget，label 等都是可以用來顯示圖像的。只
是button 不常用來顯示單張圖像，因為button 是有三種狀態，分別是按下，釋放，懸停。所以
它不常用于單單顯示一張圖像。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

本例已經添加一張資源圖片，如果不清楚如何添加資源圖片，請參考7.1.4 小節。添加完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QLabel >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16      /* 用一個QLabel對象用于顯示字符串*/17 QLabel * labelString;1819      /* 用一個QLabel對象用于顯示圖像*/20 QLabel * labelImage;21
};
22 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QLabel >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16      /* 用一個QLabel對象用于顯示字符串*/17 QLabel * labelString;1819      /* 用一個QLabel對象用于顯示圖像*/20 QLabel * labelImage;21
};
22 # endif      /* MAINWINDOW_H */

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。為了避免引起圖像被壓縮或者拉伸，本次設置標簽的大小為
452*132，這是根據圖像的實際大小來設置的。

QCalendarWidget

控件簡介

QCalendarWidget 繼承QWidget。QCalendarWidget 類提供了一個基于月的日歷小部件，允
許用戶選擇日期。CalendarWidget 小部件是用當前月份和年份初始化的，QCalendarWidget 還提
供了幾個公共插槽來更改顯示的年份和月份。

用法示例
例23_qcalendarwidget 日歷簡單的使用（難度：簡單），本例只是簡單的使用日歷控件來達
到一定的效果。使用一個CalendarWidget 控件，一個Label 來顯示當前日歷所選擇的日期，一
個pushButton 按鈕，點擊pushButton 按鈕來回到當前系統的日期。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QCalendarWidget >
6 # include < QPushButton >
7 # include < QLabel >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();1617 private:18      /* 聲明QCalendarWidget，QPushButton，QLabel對象*/19 QCalendarWidget * calendarWidget;20 QPushButton * pushButton;21 QLabel * label;2223 private slots:24      /* 槽函數*/25 void calendarWidgetSelectionChanged();26 void pushButtonClicked();2728
};
29 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置位置與大小，下同*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 對象實例化設置顯示的位置與大小*/
10 calendarWidget = new QCalendarWidget(this);
11 calendarWidget->setGeometry(200, 20, 400, 300);
12
13 QFont font;
14 /* 設置日歷里字體的大小為10像素*/
15 font.setPixelSize(10);
16 calendarWidget->setFont(font);
17
18 /* 對象實例化設置顯示的位置與大小*/
19 pushButton = new QPushButton("回到當前日期",this);
20 pushButton->setGeometry(200, 350, 100, 30);
21
22 /* 對象實例化設置顯示的位置與大小*/
23 label = new QLabel(this);
24 label->setGeometry(400, 350, 400, 30);
25 QString str = "當前選擇的日期:"
26 + calendarWidget->selectedDate().toString();
27 label->setText(str);
28
29 /* 信號槽連接*/
30 connect(calendarWidget, SIGNAL(selectionChanged()),
31 this, SLOT(calendarWidgetSelectionChanged()));
32 connect(pushButton, SIGNAL(clicked()),
33 this, SLOT(pushButtonClicked()));
34 }
35
36 MainWindow::~MainWindow()
37 {
38 }
39
40 void MainWindow::calendarWidgetSelectionChanged()
41 {
42 /* 當日歷點擊改變當前選擇的期時，更新Label的顯示內容*/
43 QString str = "當前選擇的日期:"
44 + calendarWidget->selectedDate().toString();
45 label->setText(str);
46 }
47
48 void MainWindow::pushButtonClicked()
49 {
50 /* 設置當前選定的日期為系統的QDate */
51 calendarWidget->setSelectedDate(QDate::currentDate());
52 }
53

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。當程序運行后，可以通過點擊鼠標或鍵盤來改變當前選定的日
期，label 標簽則會改變為當前選定的日期，當點擊回到當前日期按鈕后，日歷會改變當前選定
的日期并且把當前選定的日期改變為系統當前的日期。拓展：可以用日歷來設置生日，日期提
醒等，還可以做成一個華麗的系統日歷界面等。

QLCDNumber

7.3.3.1 控件簡介
QLCDNumber 繼承QFrame 。QLCDNumber 小部件顯示一個類似于lcd 的數字。
QLCDNumber 小部件可以顯示任意大小的數字。它可以顯示十進制、十六進制、八進制或二進
制數字。使用display()插槽很容易連接到數據源，該插槽被重載以接受五種參數類型中的任何
一種。
7.3.3.2 用法示例
例24_qlcdnumber，LCDNumber 時鐘（難度：簡單），使用一個LCDNumber 控件作時鐘
的顯示，一個定時器定時更新LCDNumber 的時間。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QMainWindow >
6 # include < QLCDNumber >
7 # include < QTimer >
8 # include < QTime >
9
10 class MainWindow : public QMainWindow11 {12 Q_OBJECT1314 public:15 MainWindow( QWidget *parent = nullptr );16 ~MainWindow();1718 private:19      /* 聲明QLCDNumber對象*/20 QLCDNumber * lcdNumber;2122      /* 聲明QTimer對象*/23 QTimer * timer;2425 private slots:26      /* 槽函數*/27 void timerTimeOut();2829
};
30 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置主窗體的大小與位置*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 實例化與設置顯示的位置大小*/
10 lcdNumber = new QLCDNumber(this);
11 lcdNumber->setGeometry(300, 200, 200, 50);
12
13 /* 設置顯示的位數8位*/
14 lcdNumber->setDigitCount(8);
15 /* 設置樣式*/
16 lcdNumber->setSegmentStyle(QLCDNumber::Flat);
17
18 /* 設置lcd顯示為當前系統時間*/
19 QTime time = QTime::currentTime();
20
21 /* 設置顯示的樣式*/
22 lcdNumber->display(time.toString("hh:mm:ss"));
23
24 timer = new QTimer(this);
25 /* 設置定時器1000毫秒發送一個timeout()信號*/
26 timer->start(1000);
27
28 /* 信號槽連接*/
29 connect(timer, SIGNAL(timeout()), this,
30 SLOT(timerTimeOut()));
31
32 }
33
34 MainWindow::~MainWindow()
35 {
36 }
37
38 void MainWindow::timerTimeOut()
39 {
40 /* 當定時器計時1000毫秒后，刷新lcd顯示當前系統時間*/
41 QTime time = QTime::currentTime();
42 /* 設置顯示的樣式*/
43 lcdNumber->display(time.toString("hh:mm:ss"));
44 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。程序運行后，可以看到時間為當前系統的時間，LCDNumber
時鐘顯示系統時鐘的時鐘并運行著。

QProgressBar

7.3.4.1 控件簡介
QProgressBar 繼承QWidget。QProgressBar 小部件提供了一個水平或垂直的進度條。進度
條用于向用戶顯示操作的進度，并向他們確認應用程序仍在運行。
7.3.4.2 用法示例
例25_qprogressbar，手機電池充電。用一個QProgressBar 模擬手機電池充電。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

本例已經添加一張電池的背景圖資源圖片，如果不清楚如何添加資源圖片，請參考7.1.4
小節。添加完成如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QProgressBar >
6 # include < QTimer >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 聲明對象*/18 QProgressBar * progressBar;19 QTimer * timer;2021      /* 用于設置當前QProgressBar的值*/22 int value;2324 private slots:25      /* 槽函數*/26 void timerTimeOut();2728
};
29 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6                                                       /* 設置主窗體位置與大小*/7 this->setGeometry( 0, 0, 800, 480 );89 progressBar = new QProgressBar( this );10 progressBar->setGeometry( 300, 200, 200, 60 );1112                                                      /*樣式表設置，常用使用setStyleSheet來設置樣式（實現界面美化的功能），* 13 * 具體可參考styleSheet */14 progressBar->setStyleSheet(15 "QProgressBar{border:8px solid #FFFFFF;"16 "height:30;"17 "border-image:url(:/images/battery.png);"    /* 背景圖片 */18 "text-align:center;"                         /* 文字居中 */19 "color:rgb(255,0,255);"20 "font:20px;"                                 /* 字體大小為20px */21 "border-radius:10px;}"22 "QProgressBar::chunk{"23 "border-radius:5px;"                         /* 斑馬線圓角 */24 "border:1px solid black;"                    /* 黑邊，默認無邊 */25 "background-color:skyblue;"26 "width:10px;margin:1px;}"                    /* 寬度和間距 */27 );2829                                                      /* 設置progressBar的范圍值*/30 progressBar->setRange( 0, 100 );31                                                      /* 初始化value為0 */32 value = 0;33                                                      /* 給progressBar設置當前值*/34 progressBar->setValue( value );35                                                      /* 設置當前文本字符串的顯示格式*/36 progressBar->setFormat( "充電中%p%" );3738                                                      /* 定時器實例化設置每100ms發送一個timeout信號*/39 timer = new QTimer( this );40 timer->start( 100 );4142                                                      /* 信號槽連接*/43 connect( timer, SIGNAL( timeout() ),44 this, SLOT( timerTimeOut() ) );45
}46
47 MainWindow::~MainWindow()
48
{49
}50
51 void MainWindow::timerTimeOut()
52
{53      /* 定顯示器時間到，value值自加一*/54 value++;55 progressBar->setValue( value );56      /* 若value值大于100，令value再回到0 */57 if ( value > 100 )58 value = 0;59
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。程序運行后，可以看到在定時器的作用下，電池一直在充電，
充到100%，又重新回到0%重新充電。QProgressBar 一般用于表示進度，常用于如復制進度，
打開、加載進度等。

QFrame

7.3.5.1 控件簡介
QFrame 繼承QWidget。QFrame 類是有框架的窗口部件的基類，它繪制框架并且調用一個
虛函數drawContents()來填充這個框架。這個函數是被子類重新實現的。這里至少還有兩個有用
的函數：drawFrame()和frameChanged()。
QPopupMenu 使用這個來把菜單“升高”，高于周圍屏幕。QProgressBar 有“凹陷”的外觀。
QLabel 有平坦的外觀。這些有框架的窗口部件可以被改變。
QFrame::Shape 這個枚舉類型定義了QFrame 的框架所使用的外形。當前定義的效果有：
?NoFrame - QFrame 不畫任何東西
?Box - QFrame 在它的內容周圍畫一個框
?Panel - QFrame 畫一個平板使內容看起來凸起或者凹陷
?WinPanel - 像Panel，但QFrame 繪制三維效果的方式和Microsoft Windows 95（及其它）
的一樣
?ToolBarPanel - QFrame 調用QStyle::drawToolBarPanel()
?MenuBarPanel - QFrame 調用QStyle::drawMenuBarPanel()
?HLine - QFrame 繪制一個水平線，但沒有框任何東西（作為分隔是有用的）
?VLine - QFrame 繪制一個豎直線，但沒有框任何東西（作為分隔是有用的）
?StyledPanel - QFrame 調用QStyle::drawPanel()
?PopupPanel - QFrame 調用QStyle::drawPopupPanel()
陰影風格有：
?Plain 使用調色板的前景顏色繪制（沒有任何三維效果）。
?Raised 使用當前顏色組的亮和暗顏色繪制三維的凸起線。
?Sunken 使用當前顏色組的亮和暗顏色繪制三維的凹陷線。
7.3.5.2 用法示例
例26_qframe，水平/垂直線（難度：簡單），定義兩個QFrame 對象，實例化后設置成一條
水平樣式，一條垂直樣式。實際上Display Widgets 里的Horizontal Line/Vertical Line 是QFrame
已經封裝好的控件，也可以通過下面的例子來實現不同的效果。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QFrame >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16      /* 聲明對象*/17 QFrame * hline;18 QFrame * vline;1920
};
21 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6       /* 設置主窗體的顯示位置與大小*/7 this->setGeometry( 0, 0, 800, 480 );89       /* 實例化*/10 hline = new QFrame( this );11      /* 確定起始點，設置長和寬，繪制距形*/12 hline->setGeometry( QRect( 200, 100, 400, 40 ) );1314      /* 設置框架樣式為Hline，水平，可設置為其他樣式例如Box，* 15 * 由于是樣式選擇HLine，所以只顯示一條水平直線* 16 */17 hline->setFrameShape( QFrame::HLine );18      /* 繪制陰影*/19 hline->setFrameShadow( QFrame::Sunken );2021      /* 實例化*/22 vline = new QFrame( this );23      /* 確定起始點，設置長和寬，繪制距形*/24 vline->setGeometry( QRect( 300, 100, 2, 200 ) );2526      /* 設置框架樣式為Vline，垂直，可設置為其他樣式例如Box，* 27 * 由于是樣式選擇Vline，所以只顯示一條垂直直線* 28 */29 vline->setFrameShape( QFrame::VLine );30      /* 繪制陰影*/31 vline->setFrameShadow( QFrame::Sunken );32
}33
34 MainWindow::~MainWindow()
35
{36
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。在窗口中央出現一條垂直的直線和一條水平的直線。可以用
QFrame 來繪制一些比較好看的邊框等，用作美化界面。QFrame 類是所有框架的窗口部件的基
類，所以像QLabel 這種見的控件也可以設置成獨特的邊框樣式。

顯示窗口部件之瀏覽器

QTextBrowser

7.4.1.1 控件簡介
QTextBrowser 繼承QTextEdit，QTextBrowser 類提供了一個具有超文本導航的文本瀏覽器。
該類擴展了QTextEdit(在只讀模式下)，添加了一些導航功能，以便用戶可以跟蹤超文本文檔中
的鏈接。
7.4.1.2 用法示例
例27_qtextbrowser，簡單的文本瀏覽器（難度：簡單），本例設計一個文本瀏覽器程序，可
以打開并顯示txt、html 等文件。本小節還用到QAction，菜單欄，學習文件的打開以及處理等。
在新建例程默認繼承QMainWindow 類即可。勾選mainwindow.ui，因為我們要在工具欄里
添加按鈕來打開文件等操作。新建項目完成如下。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QTextBrowser >
6
7 QT_BEGIN_NAMESPACE
8 namespace Ui { class MainWindow; }
9 QT_END_NAMESPACE
10
11 class MainWindow : public QMainWindow12 {13 Q_OBJECT1415 public:16 MainWindow( QWidget *parent = nullptr );17 ~MainWindow();1819 private:20 Ui::MainWindow * ui;21      /* 聲明對象*/22 QTextBrowser * textBrowser;23 QAction * openAction;2425 private slots:26      /* 槽函數*/27 void openActionTriggered();28
};
29 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2 # include "ui_mainwindow.h"
3 /* 窗口對話框與文本流*/
4 # include < QFileDialog >
5 # include < QTextStream >
6
7 MainWindow::MainWindow( QWidget *parent )
8 : QMainWindow( parent )9, ui( new Ui::MainWindow )10
{11 ui->setupUi( this );12      /* 設置主窗體位置與大小*/13 this->setGeometry( 0, 0, 800, 480 );1415      /* 將窗口標題設置為文本瀏覽器*/16 this->setWindowTitle( "文本瀏覽器" );1718      /* 實例化*/19 textBrowser = new QTextBrowser( this );20      /* 將文本瀏覽器窗口居中*/21 this->setCentralWidget( textBrowser );2223      /* 實例化*/24 openAction = new QAction( "打開", this );25      /* ui窗口自帶有menubar(菜單欄)、mainToolbar（工具欄）與* 26 * statusbar（狀態欄）* 27 * menuBar是ui生成工程就有的，所以可以在menubar里添加* 28 * 我們的QActiont等，如果不需要menubar，可以在ui設計* 29 * 窗口里，在右則對象里把menubar刪除，再自己重新定義自己的* 30 * 菜單欄* 31 */32      /* 將動作添加到菜單欄*/33 ui->menubar->addAction( openAction );3435      /* 信號槽連接*/36 connect( openAction, SIGNAL( triggered() ),37 this, SLOT( openActionTriggered() ) );3839
}40
41 MainWindow::~MainWindow()
42
{43 delete ui;44
}45
46 void MainWindow::openActionTriggered()
47
{48      /* 調用系統打開文件窗口，過濾文件名*/49 QString fileName = QFileDialog::getOpenFileName(50 this, tr( "打開文件" ), "",51 tr( "Files(*.txt *.cpp *.h *.html *.htm)" )52 );53 QFile myFile( fileName );54      /* 以只讀、文本方式打開，若打開失敗，則返回*/55 if ( !myFile.open( QIODevice::ReadOnly | QIODevice::Text ) )56 return;5758      /* 用QTextStream對象接收*/59 QTextStream in( &myFile );6061      /* 讀取全部數據*/62 QString myText = in.readAll();6364      /* 判斷打開文件的后綴，如果是html格式的則設置文本瀏覽器為html格式*/65 if ( fileName.endsWith( "html" ) || fileName.endsWith( "htm" ) ){66 textBrowser->setHtml( myText );67} else {68 textBrowser->setPlainText( myText );69}7071 /* ui窗口自帶有statusbar（狀態欄），設置打開的文件名*/72 ui->statusbar->showMessage( "文件名：" + fileName );73
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。在菜單欄點擊打開后，系統默認是打開的最近打開的位置，選
擇任意一個可打開的文件，本次打開的是該工程中的mainwindow.cpp 文件，結果如下圖。根據
上面的例子可自行拓展打造自己的文本瀏覽器，例如在菜單欄上加上關閉動作等，在工具欄還
可以添加字體顏色，與及背景顏色，以及字體的放大與縮小等，可自行拓展。（備注：經測試
Ubuntu16 的Qt 程序異常，看不到菜單欄，所以看不到“打開”這個按鈕，Ubuntu18 顯示正常。）

QGraphicsView

小節前言：
在這里主要是簡單介紹QGraphicsView 這種框架類的介紹與常用接口，實際上這種框架過
于復雜，我們也不能在這一小節完全展現，下面就讓我們快速去了解QGraphicsView 圖形視圖
框架類吧！
7.4.2.1 控件簡介
QGraphicsView 繼承QAbstractScrollArea。QGraphicsView 是圖形視圖框架的一部分，它提
供了基于圖元的模型/視圖編程。QGraphicsView 在可滾動視圖中可視化QGraphicsScene 的內容。
要創建帶有幾何項的場景，請參閱QGraphicsScene 的文檔。
要可視化場景，首先構造一個QGraphicsView 對象，將要可視化的場景的地址傳遞給QGr
aphicsView 的構造函數。或者，可以調用setScene()在稍后設置場景。
7.4.2.2 用法示例
例28_qgraphicsview，簡單的圖像瀏覽器（難度：簡單），本例設計一個圖像瀏覽器程序，
在上一節一的基礎上，將它改變為圖像瀏覽器。
在新建例程默認繼承QMainWindow 類即可。勾選mainwindow.ui，因為我們要在工具欄里
添加按鈕來打開文件等操作。新建項目完成如下。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QGraphicsView >
6
7 QT_BEGIN_NAMESPACE
8 namespace Ui { class MainWindow; }
9 QT_END_NAMESPACE
10
11 class MainWindow : public QMainWindow12 {13 Q_OBJECT1415 public:16 MainWindow( QWidget *parent = nullptr );17 ~MainWindow();1819 private:20 Ui::MainWindow * ui;21      /* 聲明對象*/22 QGraphicsView * graphicsView;23 QGraphicsScene * graphicsScene;24 QAction * openAction;2526 private slots:27      /* 槽函數*/28 void openActionTriggered();2930
};
31 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2 #include "ui_mainwindow.h"
3 #include <QFileDialog>
4
5 MainWindow::MainWindow(QWidget *parent)
6 : QMainWindow(parent)
7 , ui(new Ui::MainWindow)
8 {
9 ui->setupUi(this);
10 /* 設置主窗體大小*/
11
12 this->setGeometry(0, 0, 800, 480);
13 /* 將窗口標題設置為圖像瀏覽器*/
14 this->setWindowTitle("圖像瀏覽器");
15
16 /* 實例化圖形視圖對象*/
17 graphicsView = new QGraphicsView(this);
18 /* 將圖像瀏覽器窗口居中*/
19 this->setCentralWidget(graphicsView);
20
21 /* 實例化場景對象*/
22 graphicsScene = new QGraphicsScene(this);
23
24 /* 在QGraphicsView設置場景*/
25 graphicsView->setScene(graphicsScene);
26
27 /* 將動作添加到菜單欄*/
28 openAction = new QAction("打開",this);
29 ui->menubar->addAction(openAction);
30
31 /* 信號槽連接*/
32 connect(openAction, SIGNAL(triggered()),
33 this, SLOT(openActionTriggered()));
34 }
35
36 MainWindow::~MainWindow()
37 {
38 delete ui;
39 }
40
41 void MainWindow::openActionTriggered()
42 {
43 /*調用系統打開文件窗口，設置窗口標題為“打開文件”，過濾文件名*/
44 QString fileName = QFileDialog::getOpenFileName(
45 this,tr("打開文件"), "",
46 tr("Files(*.png *.jpg *.bmp)")
47 );
48 /* 定義QPixmap對象，指向fileName */
49 QPixmap image(fileName);
50 /* 將image用scaled來重新設置長寬為graphicsView的長寬，
51 * 保持縱橫比等
52 */
53
54 /* 假若用戶沒選擇文件，則返回*/
55 if(image.isNull())
56 return;
57 image = image.scaled(graphicsView->width(),
58 graphicsView->height(),
59 Qt::KeepAspectRatio,
60 Qt::FastTransformation
61 );
62 /* 在添加場景內容前，先清除之前的場景內容*/
63 graphicsScene->clear();
64 /* 添加場景內容image */
65 graphicsScene->addPixmap(image);
66 /* ui窗口自帶有statusBar（狀態欄），設置打開的文件名*/
67 ui->statusbar->showMessage("文件名：" + fileName);
68 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。菜單欄點擊打開后，系統默認是打開的最近打開的位置，選擇
任意一個可打開的圖片。（備注：本例所展示的圖片已經放在工程目錄下）。

布局管理

Qt 提供了非常豐富的布局類，基本布局管理類包括：QBoxLayout、QGridLayout、QFormL
ayout 和QStackedLayout。這些類都從QLayout 繼承而來，它們都來源于QObject（而不是QWi
dget）。創建更加復雜的布局，可以讓它們彼此嵌套完成。
其中QBoxLayout 提供了水平和垂直的布局管理；QFormLayout 提供了將輸入部件和標簽
成組排列的布局管理；QGridLayout 提供了網格形式的布局管理；QStackedLayout 提供了一組
布局后的部件，可以對它們進行分布顯示。
它們的繼承關系如下圖。

下面將學習Layouts 組里面的4 種布局，如下圖。

各個控件的名稱依次解釋如下。
（1）Vertiacl Layout:垂直布局
（2）Horizontal Layout:水平布局
（3）Grid Layout:網格布局
（4）Form Layout:表單布局
QBoxLayout 繼承QLayout。QBoxLayout 類提供水平或垂直地排列子部件。QBoxLayout 獲
取從它的父布局或從parentWidget()中所獲得的空間，將其分成一列框，并使每個托管小部件填
充一個框。
QGridLayout 繼承QLayout。QGridLayout 獲取可用的空間(通過其父布局或parentWidget()))，
將其分為行和列，并將其管理的每個小部件放入正確的單元格中。由于網格布局管理器中的組
件也是會隨著窗口拉伸而發生變化的，所以也是需要設置組件之間的比例系數的，與QBoxLay
out 不同的是網格布局管理器還需要分別設置行和列的比例系數。
QFormLayout 繼承QLayout。QFormLayout 類管理輸入小部件及其關聯標簽的表單。QFor
mLayout 是一個方便的布局類，它以兩列的形式布局其子類。左列由標簽組成，右列由“字段”
小部件(QLineEdit(行編輯器)、QSpinBox(旋轉框等))組成。通常使用setRowWrapPolicy(RowWr
apPolicy policy)接口函數設置布局的換行策略進行布局等。

QBoxLayout

7.5.1.1 控件簡介
QBoxLayout 繼承QLayout。QBoxLayout 類提供水平或垂直地排列子部件。QBoxLayout 獲
取從它的父布局或從parentWidget()中所獲得的空間，將其分成一列框，并使每個托管小部件填
充一個框。
7.5.1.2 用法示例
例29_qboxlayout，垂直或水平布局（難度：簡單），使用幾個按鈕，將他們設置為垂直排
布和水平排布，以及設置它們的一些屬性。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QHBoxLayout >
6 # include < QVBoxLayout >
7 # include < QPushButton >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();1617 private:18      /* 聲明按鈕對象數組*/19 QPushButton * pushButton[6];2021      /* 定義兩個widget，用于容納排布按鈕*/22 QWidget * hWidget;23 QWidget * vWidget;2425      /* QHBoxLayout與QVBoxLayout對象*/26 QHBoxLayout * hLayout;27 QVBoxLayout * vLayout;2829
};
30 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2 # include < QList >
3
4 MainWindow::MainWindow( QWidget *parent )
5 : QMainWindow( parent )6
{7       /* 設置主窗口的位置與大小*/8 this->setGeometry( 0, 0, 800, 480 );910      /* 實例化與設置位置大小*/11 hWidget = new QWidget( this );12 hWidget->setGeometry( 0, 0, 800, 240 );1314 vWidget = new QWidget( this );15 vWidget->setGeometry( 0, 240, 800, 240 );1617 hLayout	= new QHBoxLayout();18 vLayout	= new QVBoxLayout();1920                      /* QList<T>是Qt的一種泛型容器類。* 21 * 它以鏈表方式存儲一組值，* 22 * 并能對這組數據進行快速索引* 23 */24 QList <QString>list;25                      /* 將字符串值插入list */26 list << "one" << "two" << "three" << "four" << "five" << "six";2728                      /* 用一個循環實例化6個按鈕*/29 for ( int i = 0; i < 6; i++ ){30 pushButton[i] = new QPushButton();31 pushButton[i]->setText( list[i] );32 if ( i < 3 ){33      /* 將按鈕添加至hLayout中*/34 hLayout->addWidget( pushButton[i] );35} else {36      /* 將按鈕添加至vLayout中*/37 vLayout->addWidget( pushButton[i] );38}39}40                      /* 設置間隔為50 */41 hLayout->setSpacing( 50 );4243                      /* hWidget與vWidget的布局設置為hLayout/vLayout */44 hWidget->setLayout( hLayout );45 vWidget->setLayout( vLayout );46
}47
48 MainWindow::~MainWindow()
49
{50
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。可以看到在hWidget 中添加了3 個水平排布的按鈕，在vWidget
中添加了3 個垂直排布的按鈕。

QGridLayout

7.5.2.1 控件簡介
QGridLayout 類提供了布局管理器里的一種以網格（二維）的方式管理界面組件，以按鈕
組件為例，它們所對應網格的坐標下表，與二維數組類似。

QGridLayout 繼承QLayout。QGridLayout 獲取可用的空間(通過其父布局或parentWidget()))，
將其分為行和列，并將其管理的每個小部件放入正確的單元格中。由于網格布局管理器中的組
件也是會隨著窗口拉伸而發生變化的，所以也是需要設置組件之間的比例系數的，與
QBoxLayout 不同的是網格布局管理器還需要分別設置行和列的比例系數。
7.5.2.2 用法示例
例30_qgridlayout，網格布局（難度：簡單），使用幾個按鈕，將他們設置為網格布局，同
時設置它們的行、列比例系數（拉伸因子），以及設置它們的一些屬性。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QGridLayout >
6 # include < QPushButton >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();15 private:1617      /* 聲明widget窗口部件，用于容納下面4個pushButton按鈕*/18 QWidget * gWidget;1920      /* 聲明QGridLayout對象*/21 QGridLayout * gridLayout;2223      /* 聲明pushButton按鈕數組*/24 QPushButton * pushButton[4];2526
};
27 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6               /* 設置位置與大小*/7 this->setGeometry( 0, 0, 800, 480 );89               /* 實例化*/10 gWidget = new QWidget( this );11              /* 設置gWidget居中央*/12 this->setCentralWidget( gWidget );1314 gridLayout = new QGridLayout();15              /* QList鏈表，字符串類型*/16 QList <QString> list;17 list << "按鈕1" << "按鈕2" << "按鈕3" << "按鈕4";18 for ( int i = 0; i < 4; i++ ){19 pushButton[i] = new QPushButton();20 pushButton[i]->setText( list[i] );21      /* 設置最小寬度與高度*/22 pushButton[i]->setMinimumSize( 100, 30 );23      /* 自動調整按鈕的大小*/24 pushButton[i]->setSizePolicy(25 QSizePolicy::Expanding,26 QSizePolicy::Expanding27 );28 switch ( i ){29 case 0:30 /* 將pushButton[0]添加至網格的坐標(0,0),下同*/31 gridLayout->addWidget( pushButton[i], 0, 0 );32 break;33 case 1:34 gridLayout->addWidget( pushButton[i], 0, 1 );35 break;36 case 2:37 gridLayout->addWidget( pushButton[i], 1, 0 );38 break;39 case 3:40 gridLayout->addWidget( pushButton[i], 1, 1 );41 break;42 default:43 break;44}45}46      /* 設置第0行與第1行的行比例系數*/47 gridLayout->setRowStretch( 0, 2 );48 gridLayout->setRowStretch( 1, 3 );4950      /* 設置第0列與第1列的列比例系數*/51 gridLayout->setColumnStretch( 0, 1 );52 gridLayout->setColumnStretch( 1, 3 );5354      /* 將gridLayout設置到gWidget */55 gWidget->setLayout( gridLayout );56
}57
58 MainWindow::~MainWindow()
59
{60
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。可以看到在gWidget 中添加了4 個按鈕，因為設置了行、列的
系數比（拉伸因子），所以看到的按鈕是按系數比的比例顯示。

QFormLayout

7.5.3.1 控件簡介
QFormLayout 繼承QLayout。QFormLayout 類管理輸入小部件及其關聯標簽的表單。QFor
mLayout 是一個方便的布局類，它以兩列的形式布局其子類。左列由標簽組成，右列由“字段”
小部件(QLineEdit(行編輯器)、QSpinBox(旋轉框等))組成。通常使用setRowWrapPolicy(RowWr
apPolicy policy)接口函數設置布局的換行策略進行布局等。
7.5.3.2 用法示例
例31_qformlayout，表單布局（難度：簡單），將使用addRow(const QString &labelText,
QWidget *field)來創建一個帶有給定文本的QLabel 及QWidget 小部件，并且它們是伙伴關系。
簡單的展示表單布局的使用。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QFormLayout>
6 #include <QLineEdit>
7
8 class MainWindow : public QMainWindow
9 {
10 Q_OBJECT
11
12 public:
13 MainWindow(QWidget *parent = nullptr);
14 ~MainWindow();
15 private:
16 /* widget對象*/
17 QWidget *fWidget;
18
19 /* 用于輸入用戶名*/
20 QLineEdit *userLineEdit;
21
22 /* 用于輸入密碼*/
23 QLineEdit *passwordLineEdit;
24
25 /* 聲明QFormLayout對象*/
26 QFormLayout *formLayout;
27 };
28 #endif // MAINWINDOW_H

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置位置與大小*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 實例化及設置位置與大小，下同*/
10 fWidget = new QWidget(this);
11 fWidget->setGeometry(250, 100, 300, 200);
12
13 userLineEdit = new QLineEdit();
14 passwordLineEdit = new QLineEdit();
15
16 formLayout = new QFormLayout();
17
18 /* 添加行*/
19 formLayout->addRow("用戶名：", userLineEdit);
20 formLayout->addRow("密碼：", passwordLineEdit);
21
22 /* 設置水平垂直間距*/
23 formLayout->setSpacing(10);
24
25 /* 設置布局外框的寬度*/
26 formLayout->setMargin(20);
27
28 /* 將formLayout布局到fWidget */
29 fWidget->setLayout(formLayout);
30 }
31
32 MainWindow::~MainWindow()
33 {
34 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。可以看到在fWidget 中添加了兩行，同時設置了它們的間隔，
與距邊框的寬度。與QGirdLayout 布局比較，QFomLayout 布局比較適用于行與列比較少的布局
格局。如果是多行多列的布局，應該使用QGirdLayout 布局。

空間間隔

空間間隔組（Spacers），如下圖所示

（1）Horizontal Spacer:水平間隔
（2）Vertical Spacer:垂直間隔
QSpacerItem 繼承QLayoutItem。QSpacerItem 類在布局中提供空白(空間間隔)。所以
QSpacerItem 是在布局中使用的。它包含Horizontal Spacer（水平間隔）與Vertical Spacer（垂直
間隔）。

QSpacerItem

7.6.1.1 控件簡介
QSpacerItem 繼承QLayoutItem。QSpacerItem 類在布局中提供空白(空間間隔)。所以QSpa
cerItem 是在布局中使用的。
7.6.1.2 用法示例
例32_qspaceritem，空間間隔（難度：一般），使用4 個按鈕，在垂直布局添加垂直間隔與
按鈕1，在水平布局添加按鈕2~4 與水平間隔。簡單的展示空間間隔布局的使用方法。在程序
運行結果分析了空間間隔部分。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QPushButton >
6 # include < QSpacerItem >
7 # include < QBoxLayout >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();1617 private:18      /* 按鈕對象數組*/19 QPushButton * bt[4];20      /* 垂直間隔*/21 QSpacerItem * vSpacer;22      /* 水平間隔*/23 QSpacerItem * hSpacer;24      /* 聲明一個widget用來存放布局的內容*/25 QWidget * widget;26      /* 主布局對象*/27 QHBoxLayout * mainLayout;28      /* 垂直布局對象*/29 QVBoxLayout * vBoxLayout;30      /* 水平布局對象*/31 QHBoxLayout * hBoxLayout;3233
};
34 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6       /* 設置主窗體顯示位置與大小*/7 this->setGeometry( 0, 0, 800, 480 );89 widget = new QWidget( this );10      /* 居中widget */11 this->setCentralWidget( widget );1213      /* 實例化對象*/14 vSpacer = new QSpacerItem( 10, 10,15 QSizePolicy::Minimum,16 QSizePolicy::Expanding17 );18 hSpacer = new QSpacerItem( 10, 10,19 QSizePolicy::Expanding,20 QSizePolicy::Minimum21 );2223 vBoxLayout	= new QVBoxLayout();24 hBoxLayout	= new QHBoxLayout();25 mainLayout	= new QHBoxLayout();2627                      /* 在vBoxLayout添加垂直間隔*/28 vBoxLayout->addSpacerItem( vSpacer );2930 QList <QString>list;31                      /* 將字符串值插入list */32 list << "按鈕1" << "按鈕2" << "按鈕3" << "按鈕4";33                      /* 用一個循環實例化4個按鈕*/34 for ( int i = 0; i < 4; i++ ){35 bt[i] = new QPushButton();36 bt[i]->setText( list[i] );37 if ( i == 0 ){38      /* 按鈕1,設置為100*100 */39 bt[i]->setFixedSize( 100, 100 );40      /* 在vBoxLayout添加按鈕1 */41 vBoxLayout->addWidget( bt[i] );42} else {43      /* 按鈕2～4,設置為60*60 */44 bt[i]->setFixedSize( 60, 60 );45      /* 在hBoxLayout添加按鈕2～4 */46 hBoxLayout->addWidget( bt[i] );47}48}49                      /* 在hBoxLayout添加水平間隔*/50 hBoxLayout->addSpacerItem( hSpacer );5152                      /* 在主布局里添加垂直布局*/53 mainLayout->addLayout( vBoxLayout );54                      /* 在主布局里添加水平布局*/55 mainLayout->addLayout( hBoxLayout );5657                      /* 設置部件間距*/58 mainLayout->setSpacing( 50 );59                      /* 將主布局設置為widget的布局*/60 widget->setLayout( mainLayout );6162
}63
64 MainWindow::~MainWindow()
65
{66
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，在垂直布局里添加了垂直空間間隔與按鈕1，在水平布局里添
加了按鈕2~4 與水平空間間隔。

圖解如下：

容器

容器（Containers）

各個控件的名稱依次解釋如下。
（1）Group Box:組框
（2）Scroll Area:滾動區域
（3）Tool Box:工具箱
（4）Tab Widget:標簽小部件
（5）Stacked WIdget:堆疊小部件
（6）Frame:幀
（7）Widget:小部件
（8）MDI Area:MDI 區域
（9）Dock Widget:停靠窗體部件
各種容器的解釋如下：
QGroupBox 繼承QWidget。QGroupBox 為構建分組框提供了支持。分組框通常帶有一個邊
框和一個標題欄，作為容器部件來使用，在其中可以布置各種窗口部件。布局時可用作一組控
件的容器，但是需要注意的是，內部通常使用布局控件（如QBoxLayout）進行布局。組框還提
供鍵盤快捷方式，鍵盤快捷方式將鍵盤焦點移動到組框的一個子部件。
QScrollArea 繼承QAbstractScrollArea。滾動區域用于在框架中顯示子部件的內容。如果小
部件超過框架的大小，視圖就會出現滾動條，以便可以查看子小部件的整個區域。
QToolBox 繼承QFrame。QToolBox 類提供了一列選項卡小部件項。工具箱是一個小部件，
它顯示一列選項卡在另一列的上面，當前項顯示在當前選項卡的下面。每個選項卡在選項卡列
中都有一個索引位置。選項卡的項是QWidget。
QTabWidget 繼承QWidget。abWidget 類提供了一組選項卡（多頁面）小部件。QTabWidget
主要是用來分頁顯示的，每一頁一個界面，眾多界面公用一塊區域，節省了界面大小，很方便
的為用戶顯示更多的信息。
QStackedWidget 繼承QFrame。QStackedWidget 類提供了一個小部件堆棧，其中一次只能
看到一個小部件，與QQ 的設置面板類似。QStackedWidget 可用于創建類似于QTabWidget 提
供的用戶界面。它是構建在QStackedLayout 類之上的一個方便的布局小部件。常與QListWidget
搭配使用，效果如下圖，左邊的是QListWidget 列表，右邊的是QStackedWidget。他們一般與
信號槽連接，通過點擊左邊的QListWidget 列表，使用信號槽連接后，就可以讓右邊的
QStackedWidget 顯示不同的內容，每次顯示一個widget 小部件。
QWidget 類是所有用戶界面對象的基類（如QLabel 類繼承于QFrame 類，而QFrame 類又
繼承于QWidget 類）。Widget 是用戶界面的基本單元：它從窗口系統接收鼠標，鍵盤和其他事
件，并在屏幕上繪制自己。每個Widget 都是矩形的，它們按照Z-order 進行排序。注：Z-order
是重疊二維對象的順序，例如堆疊窗口管理器中的窗口。典型的GUI 的特征之一是窗口可能重
疊，使得一個窗口隱藏另一個窗口的一部分或全部。當兩個窗口重疊時，它們的Z 順序確定哪
個窗口出現在另一個窗口的頂部。理解：術語"z-order"指沿著z 軸物體的順序。三維坐標軸中x
橫軸，y 數軸，z 上下軸。可以將gui 窗口視為平行與顯示平面的一系列平面。因此，窗口沿著
z 軸堆疊。所以z-order 指定了窗口的前后順序。就像您桌面上的一疊紙一樣，每張紙是一個窗
口，桌面是您的屏幕，最上面的窗口z 值最高。QWidget 不是一個抽象類，它可以用作其他Widget
的容器，并很容易作為子類來創建定制Widget。它經常用于創建、放置和容納其他的Widget
窗口。由上可知，QWidget 一般用于容納其他Widget 窗口，其屬性和方法相當的多，對于初學
者，我們通常只用它來作可以容納其他窗口的容器，還會用來接收鼠標，鍵盤和其他事件等。
QMdiArea 繼承QAbstractScrollArea。QMdiArea 小部件提供一個顯示MDI 窗口的區域。
QMdiArea 的功能本質上類似于MDI 窗口的窗口管理器。大多數復雜的程序，都使用MDI 框架，
在Qt designer 中可以直接將控件MDI Area 拖入使用。
QDockWidget 繼承QWidget。QDockWidget 類提供了一個小部件，可以停靠在QMainWind
ow 內，也可以作為桌面的頂級窗口浮動。QDockWidget 提供了停靠部件的概念，也稱為工具面
板或實用程序窗口。停靠窗口是放置在QMainWindow 中央窗口附近的停靠窗口部件區域中的
輔助窗口。停靠窗口可以被移動到當前區域內，移動到新的區域，并由終端用戶浮動(例如，不
停靠)。QDockWidget API 允許程序員限制dock widget 的移動、浮動和關閉能力，以及它們可
以放置的區域。QDockWidget 的初始停靠區域有Qt.BottomDockWidgetArea（底部停靠）、Qt.L
eftDockWidgetArea（左邊停靠、Qt.RightDockWidgetArea（右邊停靠）、Qt.TopDockWidgetArea
（頂部停靠）和Qt.NoDockWidgetArea（不顯示Widget）。
在前面某些小節里已經有使用過本小節的控件，例如QWidget 小部件。下面將上面列出的
控件進行進一步的解釋與運用。

QGroupBox

7.7.1.1 控件簡介
QGroupBox 小部件提供一個帶有標題的組框框架。一般與一組或者是同類型的部件一起使
用。

用法示例
例33_qgroupbox，組框示例（難度：簡單），使用3 個QRadioButton 單選框按鈕，與
QVBoxLayout（垂直布局）來展示組框的基本使用。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 #ifndef MAINWINDOW_H
2 #define MAINWINDOW_H
3
4 #include <QMainWindow>
5 #include <QRadioButton>
6 #include <QGroupBox>
7 #include <QVBoxLayout>
8
9 class MainWindow : public QMainWindow
10 {
11 Q_OBJECT
12
13 public:
14 MainWindow(QWidget *parent = nullptr);
15 ~MainWindow();
16
17 private:
18 /* 聲明對象*/
19 QGroupBox *groupBox;
20 QVBoxLayout *vBoxLayout;
21 QRadioButton *radioButton[3];
22 };
23 #endif // MAINWINDOW_

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2 # include < QList >
3
4 MainWindow::MainWindow( QWidget *parent )
5 : QMainWindow( parent )6
{7               /* 設置主窗體位置與大小*/8 this->setGeometry( 0, 0, 800, 480 );9               /* 以標題為“QGroupBox 示例”實例化groupBox對象*/10 groupBox = new QGroupBox( tr( "QGroupBox示例" ), this );11 groupBox->setGeometry( 300, 100, 300, 200 );1213 vBoxLayout = new QVBoxLayout();1415              /* 字符串鏈表*/16 QList <QString>list;17 list << "選項一" << "選項二" << "選項三";18 for ( int i = 0; i < 3; i++ ){19 radioButton[i] = new QRadioButton();20 radioButton[i]->setText( list[i] );21      /* 在vBoxLayout添加radioButton */22 vBoxLayout->addWidget( radioButton[i] );23}24              /* 添加一個伸縮量1 */25 vBoxLayout->addStretch( 1 );26              /* vBoxLayout布局設置為groupBox布局*/27 groupBox->setLayout( vBoxLayout );28
}29
30 MainWindow::~MainWindow()
31
{32
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，可以看到radioButton 有規則的排布在groupBox 組框里面。

QScrollArea

7.7.2.1 控件簡介
QScrollArea 類提供到另一個小部件的滾動視圖。
7.7.2.2 用法示例
例34_qscrollarea 滾動視圖（難度：簡單），使用一個Label 標簽，將Label 標簽設置為一張
圖片，并把Label 標簽放置于滾動區域內，此時圖片應要大于滾動區域才會出現滾動條。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
并添加了一張資源圖片（添加資源圖片的步驟請參考7.1.4 小節），如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QScrollArea >
6 # include < QLabel >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 定義QScrollArea對象*/18 QScrollArea * scrollArea;19 QLabel * label;20
};
21 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6 this->setGeometry( 0, 0, 800, 480 );78 scrollArea = new QScrollArea( this );9       /* 設置滾動區域為700*380 */10 scrollArea->setGeometry( 50, 50, 700, 380 );1112 label = new QLabel();13      /* label顯示的lantingxu.png圖片分辨率為1076*500 */14 QImage image( ":/images/lantingxu.png" );15 label->setPixmap( QPixmap::fromImage( image ) );1617 scrollArea->setWidget( label );1819
}20
21 MainWindow::~MainWindow()
22
{23
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，由于圖片的大小大于滾動區域的大小，所以在滾動區域出現了
滾動條，可以拖動滾動條來查看這張圖片其余部分。

QToolBox

7.7.3.1 控件簡介
QToolBox（工具盒類）提供了一種列狀的層疊窗體，中文譯為工具箱，類似抽屜。
7.7.3.2 用法示例
例35_qtoolbox，QQ 好友面板之QToolBox（難度：簡單），本例將使用到前面的知識
QGroupBox 組框與QBoxLayout 布局管理。前面我們已經學過QGroupBox 組框和學過
QBoxLayout。有了前面的基礎，那么去理解本例就會快很多。
本例思路:使用6 個QToolButton 分成2 組，使用垂直布局將QToolButton 的2 組排布好，
然后添加到2 組QGroupBox 組框，再把2 組QGroupBox 組框作為子項添加到QToolBox。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
并添加了幾張資源圖片（添加資源圖片的步驟請參考7.1.4 小節），如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QToolBox >
6 # include < QGroupBox >
7 # include < QToolButton >
8 # include < QVBoxLayout >
9
10 class MainWindow : public QMainWindow11 {12 Q_OBJECT1314 public:15 MainWindow( QWidget *parent = nullptr );16 ~MainWindow();1718 private:19 /* 聲明對象*/20 QToolBox * toolBox;21 QGroupBox * groupBox[2];22 QVBoxLayout * vBoxLayout[2];23 QToolButton * toolButton[6];2425
};
26 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6 this->setGeometry( 0, 0, 800, 480 );78 toolBox = new QToolBox( this );9 toolBox->setGeometry( 300, 50, 200, 250 );10 /* 設置toolBox的樣式，此處設置為30%不透明度的黑色*/11 toolBox->setStyleSheet( "QToolBox {background-color:rgba(0, 0, 0,
30%);}" );1213 for ( int i = 0; i < 2; i++ ){14 vBoxLayout[i]	= new QVBoxLayout();15 groupBox[i]		= new QGroupBox( this );16}1718      /* 字符串鏈表*/19 QList <QString>strList;20 strList << "李白" << "王照君" << "李元芳" << "程咬金" << "鐘馗" << "上官婉兒";2122      /* 字符串圖標鏈表*/23 QList <QString>iconsList;24 iconsList << ":/icons/libai" << ":/icons/wangzhaojun"25 << ":/icons/liyuanfang" << ":/icons/chengyaojin"26 << ":/icons/zhongkui" << ":/icons/shangguanwaner";2728 for ( int i = 0; i < 6; i++ ){29 toolButton[i] = new QToolButton();30              /* 設置toolButton圖標*/31 toolButton[i]->setIcon( QIcon( iconsList[i] ) );32              /* 設置toolButton的文本*/33 toolButton[i]->setText( strList[i] );34              /* 設置toolButton的大小*/35 toolButton[i]->setFixedSize( 150, 40 );36              /* 設置toolButton的setToolButtonStyle的樣式*/37 toolButton[i]->setToolButtonStyle(38 Qt::ToolButtonTextBesideIcon39 );40 if ( i < 3 ){41      /* 將toolButton添加到時垂直布局*/42 vBoxLayout[0]->addWidget( toolButton[i] );43      /* 添加一個伸縮量1 */44 vBoxLayout[0]->addStretch( 1 );45} else {46 vBoxLayout[1]->addWidget( toolButton[i] );47 vBoxLayout[1]->addStretch( 1 );48}49}50      /* 將垂直布局的內容添加到組框groupBox */51 groupBox[0]->setLayout( vBoxLayout[0] );52 groupBox[1]->setLayout( vBoxLayout[1] );5354      /* 將組框加入QToolBox里*/55 toolBox->addItem( groupBox[0], "我的好友" );56 toolBox->addItem( groupBox[1], "黑名單" );57
}58
59 MainWindow::~MainWindow()
60
{61
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，本次使用QToolButool 作為QGroupBox 的子項，也可以使用其
他QWidget 小部件，如QWidget 等。（注意本程序在linux 運行效果如下，若如在Windows 下，
可能QToolBox 的顯示樣式不一樣）。點擊“我的好友”列表，則會出現好友列表，點擊“黑名
單”則會出現黑名單列表。

QTabWidget

7.7.4.1 控件簡介
QTabWidget 繼承QWidget，QTabWidget 類提供了一組選項卡（多頁面）小部件。QTabWi
dget 主要是用來分頁顯示的，每一頁一個界面，眾多界面公用一塊區域，節省了界面大小，很
方便的為用戶顯示更多的信息。類似瀏覽器的多標簽頁面，所以這個控件在實際項目中也會經
常用到。
7.7.4.2 用法示例
例36_qtabwidget，標題欄多頁面切換（難度：簡單），本例創建3 個頁面，每個頁面里有一
個Label 標簽部件，點擊每個頁面的選項卡則會切換到不同的頁面上。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
并添加了幾張資源圖片（添加資源圖片的步驟請參考7.1.4 小節），如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QTableWidget >
6 # include < QHBoxLayout >
7 # include < QLabel >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();1617 private:18      /* 聲明對象*/19 QWidget * widget;20 QTabWidget * tabWidget;21 QHBoxLayout * hBoxLayout;22 QLabel * label[3];23
};
24 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6 this->setGeometry( 0, 0, 800, 480 );78 widget = new QWidget( this );9       /* 居中*/10 this->setCentralWidget( widget );1112      /* 多頁面小部件*/13 tabWidget = new QTabWidget();1415      /* 水平布局實例化*/16 hBoxLayout = new QHBoxLayout();17 QList <QString>strLabelList;18 strLabelList << "標簽一" << "標簽二" << "標簽三";1920 QList <QString>strTabList;21 strTabList << "頁面一" << "頁面二" << "頁面三";2223 QList <QString>iconList;24 iconList << ":/icons/icon1"25 << ":/icons/icon2"26 << ":/icons/icon3";2728 for ( int i = 0; i < 3; i++ ){29 label[i] = new QLabel();30      /* 設置標簽文本*/31 label[i]->setText( strLabelList[i] );32      /* 標簽對齊方式（居中）*/33 label[i]->setAlignment( Qt::AlignCenter );34      /* 添加頁面*/35 tabWidget->addTab( label[i],36 QIcon( iconList[i] ),37 strTabList[i]38 );39}40              /* 是否添加關閉按鈕*/41              /* tabWidget->setTabsClosable(true); */42              /* 將tabWidget水平直排布*/43 hBoxLayout->addWidget( tabWidget );44              /* 將垂直布局設置到widget */45 widget->setLayout( hBoxLayout );46
}47
48 MainWindow::~MainWindow()
49
{50
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，點擊不同頁面的選項卡則會切換到不同的頁面上。本例還可拓
展使用void setTabsClosable(bool closeable)函數在選項卡后加一個關閉按鈕，再連接信號槽實
現關閉頁面的操作。本例就不再添加代碼了，比較簡單。

QStackedWidget

7.7.5.1 控件簡介
QStackedWidget 繼承QFrame。QStackedWidget 類提供了一個小部件堆棧，其中一次只能
看到一個小部件，與QQ 的設置面板類似。
QStackedWidget 可用于創建類似于QTabWidget 提供的用戶界面。它是構建在
QStackedLayout 類之上的一個方便的布局小部件。常與QListWidget 搭配使用，效果如下圖，
左邊的是QListWidget 列表，右邊的是QStackedWidget。他們一般與信號槽連接，通過點擊左
邊的QListWidget 列表，使用信號槽連接后，就可以讓右邊的QStackedWidget 顯示不同的內容，
每次顯示一個widget 小部件。

用法示例
例37_qstackedwidget，列表欄多頁面切換（難度：簡單），本例創建3 個堆棧頁面，每個頁
面里有一個Label 標簽部件，點擊每個列表的不同項則會切換到不同的頁面上。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QStackedWidget >
6 # include < QHBoxLayout >
7 # include < QListWidget >
8 # include < QLabel >
9
10 class MainWindow : public QMainWindow11 {12 Q_OBJECT1314 public:15 MainWindow( QWidget *parent = nullptr );16 ~MainWindow();1718 private:19      /* widget小部件*/20 QWidget * widget;21      /* 水平布局*/22 QHBoxLayout * hBoxLayout;23      /* 列表視圖*/24 QListWidget * listWidget;25      /* 堆棧窗口部件*/26 QStackedWidget * stackedWidget;27      /* 3個標簽*/28 QLabel * label[3];2930
};
31 # endif      /* MAINWINDOW_H */
32

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6 this->setGeometry( 0, 0, 800, 480 );78       /* widget小部件實例化*/9 widget = new QWidget( this );1011      /* 設置居中*/12 this->setCentralWidget( widget );1314      /* 垂直布局實例化*/15 hBoxLayout = new QHBoxLayout();1617      /* 堆棧部件實例化*/18 stackedWidget = new QStackedWidget();1920      /* 列表實例化*/21 listWidget = new QListWidget();2223 QList <QString>strListWidgetList;24 strListWidgetList << "窗口一" << "窗口二" << "窗口三";2526 for ( int i = 0; i < 3; i++ ){27 /* listWidget插入項*/28 listWidget->insertItem(29 i,30 strListWidgetList[i]31 );32}3334 QList <QString>strLabelList;35 strLabelList << "標簽一" << "標簽二" << "標簽三";3637 for ( int i = 0; i < 3; i++ ){38 label[i] = new QLabel();39      /* 設置標簽文本*/40 label[i]->setText( strLabelList[i] );41      /* 標簽對齊方式（居中）*/42 label[i]->setAlignment( Qt::AlignCenter );43      /* 添加頁面*/44 stackedWidget->addWidget( label[i] );45}4647              /* 設置列表的最大寬度*/48 listWidget->setMaximumWidth( 200 );49              /* 添加到水平布局*/50 hBoxLayout->addWidget( listWidget );51 hBoxLayout->addWidget( stackedWidget );5253              /* 將widget的布局設置成hboxLayout */54 widget->setLayout( hBoxLayout );5556              /* 利用listWidget的信號函數currentRowChanged()與* 57 * 槽函數setCurrentIndex(),進行信號與槽連接* 58 */59 connect( listWidget, SIGNAL( currentRowChanged( int ) ),60 stackedWidget, SLOT( setCurrentIndex( int ) ) );61
}62
63 MainWindow::~MainWindow()
64
{65
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，點擊列表視圖的不同的項會切換到不同的頁面上。

QFrame

在7.3.5 小節已經舉過例子。

QWidget

7.7.7.1 控件簡介
QWidget 類是所有用戶界面對象的基類（如QLabel 類繼承于QFrame 類，而QFrame 類又
繼承于QWidget 類）。Widget 是用戶界面的基本單元：它從窗口系統接收鼠標，鍵盤和其他事
件，并在屏幕上繪制自己。每個Widget 都是矩形的，它們按照Z-order 進行排序。
注：Z-order 是重疊二維對象的順序，例如堆疊窗口管理器中的窗口。典型的GUI 的特征
之一是窗口可能重疊，使得一個窗口隱藏另一個窗口的一部分或全部。當兩個窗口重疊時，它
們的Z 順序確定哪個窗口出現在另一個窗口的頂部。
理解：術語"z-order"指沿著z 軸物體的順序。三維坐標軸中x 橫軸，y 數軸，z 上下軸。可
以將gui 窗口視為平行與顯示平面的一系列平面。因此，窗口沿著z 軸堆疊。所以z-order 指定
了窗口的前后順序。就像您桌面上的一疊紙一樣，每張紙是一個窗口，桌面是您的屏幕，最上
面的窗口z 值最高。
QWidget 不是一個抽象類，它可以用作其他Widget 的容器，并很容易作為子類來創建定制
Widget。它經常用于創建、放置和容納其他的Widget 窗口。
上面這么多例子都有用到QWidget，如7.5.1 小節，請自行參考，沒有具體例子可寫，比較
簡單。

QMdiArea

7.7.8.1 控件簡介
QMdiArea 繼承QAbstractScrollArea。QMdiArea 小部件提供一個顯示MDI 窗口的區域。
QMdiArea 的功能本質上類似于MDI 窗口的窗口管理器。大多數復雜的程序，都使用MDI 框架，
在Qt designer 中可以直接將控件MDI Area 拖入使用。
7.7.8.2 用法示例
例38_qmdiarea，父子窗口（難度：簡單），本例創建一個MDI Area 區域，使用一個按鈕，
每單擊按鈕時，就會在MDI Area 區域新建一個MdiSubWindow 窗口。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QMdiSubWindow >
6 # include < QMdiArea >
7 # include < QPushButton >
8
9 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow( QWidget *parent = nullptr );15 ~MainWindow();1617 private:18      /* Mdi Area區域對象*/19 QMdiArea * mdiArea;20      /* MdiSubWindow子窗口對象*/21 QMdiSubWindow * newMdiSubWindow;22      /* 用作點擊創建新的窗口*/23 QPushButton * pushButton;2425 private slots:26      /* 按鈕槽函數*/27 void creat_newMdiSubWindow();2829
};
30 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置窗口的顯示位置與大小*/
7 this->setGeometry(0, 0, 800, 480);
8 pushButton = new QPushButton("新建窗口", this);
9 pushButton->setGeometry(0, 30, 100, 30);
10
11 mdiArea = new QMdiArea(this);
12 /* 設置MDI Area區域大小*/
13 mdiArea->setGeometry(100, 30, 700, 430);
14 /* 連接信號槽*/
15 connect(pushButton, SIGNAL(clicked()),
16 this, SLOT(creat_newMdiSubWindow()));
17 }
18
19 void MainWindow::creat_newMdiSubWindow()
20 {
21 newMdiSubWindow = new QMdiSubWindow();
22 newMdiSubWindow->setWindowTitle("新建窗口");
23
24 /* 如果窗口設置了Qt::WA_DeleteOnClose 這個屬性，
25 * 在窗口接受了關閉事件后，Qt會釋放這個窗口所占用的資源
26 */
27 newMdiSubWindow->setAttribute(Qt::WA_DeleteOnClose);
28
29 /* 添加子窗口*/
30 mdiArea->addSubWindow(newMdiSubWindow);
31 /* 顯示窗口，不設置時為不顯示*/
32 newMdiSubWindow->show();
33 /* 自適應窗口*/
34 newMdiSubWindow->sizePolicy();
35 /* 以級聯的方式排列所有窗口*/
36 // mdiArea->cascadeSubWindows();
37 /* 以平鋪方式排列所有窗口*/
38 mdiArea->tileSubWindows();
39 }
40
41 MainWindow::~MainWindow()
42 {
43 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下，當點擊新建窗口按鈕時，在MDI Area 區域里新建了一個窗口標題
為“新建窗口”窗口，下圖為點擊多次新建窗口的效果。本例使用了一個按鈕，進行了新建窗
口操作，其他功能例如添加刪除按鈕等，讀者可以自行添加。本文在新建窗口里的內容為空，n
ewMdiSubWindow 可以使用setWidget(QWidget *widget)方法添加內容，如添加前面所學過的Q
LineEdit 等。

QDockWidget

7.7.9.1 控件簡介
QDockWidget 繼承QWidget。QDockWidget 類提供了一個小部件，可以停靠在QMainWindow
內，也可以作為桌面的頂級窗口浮動。
QDockWidget 提供了停靠部件的概念，也稱為工具面板或實用程序窗口。停靠窗口是放置
在QMainWindow 中央窗口附近的停靠窗口部件區域中的輔助窗口。停靠窗口可以被移動到當
前區域內，移動到新的區域，并由終端用戶浮動(例如，不停靠)。QDockWidget API 允許程序員
限制dock widget 的移動、浮動和關閉能力，以及它們可以放置的區域。QDockWidget 的初始停
靠區域有Qt.BottomDockWidgetArea（底部停靠）、Qt.LeftDockWidgetArea（左邊停靠、；
Qt.RightDockWidgetArea （右邊停靠）、Qt.TopDockWidgetArea （頂部停靠）和
Qt.NoDockWidgetArea（不顯示Widget）。
7.7.9.2 用法示例
例39_qdockwidget，停靠窗口（難度：簡單），本例創建一個停靠窗口，在停靠窗口里添加
文本編輯框，并且把這個停靠窗口放置到QMainWindow 的頂部。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QDockWidget >
6 # include < QTextEdit >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* 停靠窗口部件*/18 QDockWidget * dockWidget;19      /* 文本編輯框*/20 QTextEdit * textEdit;2122
};
23 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6       /* 設置主窗體的顯示的位置與大小*/7 this->setGeometry( 0, 0, 800, 480 );89       /* 實例化標題為停靠窗口*/10 dockWidget = new QDockWidget( "停靠窗口", this );1112      /* 實例化文本編輯框*/13 textEdit = new QTextEdit( dockWidget );1415 textEdit->setText( "這是一個測試" );1617      /* 停靠窗口添加文本編輯框*/18 dockWidget->setWidget( textEdit );1920      /* 放在主窗體的頂部*/21 this->addDockWidget( Qt::TopDockWidgetArea, dockWidget );22
}23
24 MainWindow::~MainWindow()
25
{26
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。拖動停靠窗口可以移動到另一個位置，松手則停靠。

項目視圖組(基于模型)

上圖需要注意的是，在低版本的Qt，Column View 與Undo View 是沒有封裝成可視控件形
式在Qt Creator 中。
以上各個控件的解釋如下：
（1）List View:清單視圖
（2）Tree View:樹形視圖
（3）Table View:表視圖
（4）Column View:列表視圖
（5）Undo View:撤銷列表視圖
以下是各個控件的簡介：
QListView 繼承QAbstractItemView，被QListWidget 和QUndoView 繼承。QListView 類提
供模型上的列表或圖標視圖。QListView 以簡單的非分層列表或圖標集合的形式顯示存儲在模
型中的項。該類用于提供以前由QListBox 和QIconView 類提供的列表和圖標視圖，但是使用
了Qt 的模型/視圖體系結構提供的更靈活的方法。QListView 是基于Model，而QListWidget 是
基于Item，這是它們的本質區別。QListView 需要建模，所以減少了冗余的數據，程序效率高;
而QListWidget 是一個升級版本的QListView（實質是封裝好了model 的QListView），它已經自
己為我們建立了一個數據存儲模型（QListWidgetItem），操作方便，直接調用addItem 即可添加
項目（ICON，文字）。
QTreeView 繼承QAbstractItemView，被QTreeWidget 繼承。QTreeView 類提供樹視圖的默
認模型/視圖實現。QTreeView 實現了模型項的樹表示。該類用于提供以前由QListView 類提供
的標準分層列表，但是使用了Qt 的模型/視圖體系結構提供的更靈活的方法。
QTableView 繼承QAbstractItemView，被QTableWidget 繼承。QTableView 類提供了表視圖
的默認模型/視圖實現。QTableView 實現了一個表視圖，用于顯示來自模型的項。該類用于提
供以前由QTable 類提供的標準表，但使用Qt 的模型/視圖體系結構提供的更靈活的方法。
QColumnView 繼承QAbstractItemView。QColumnView 在許多QListViews 中顯示一個模型，
每個QListViews 對應樹中的每個層次結構。這有時被稱為級聯列表。QColumnView 類是模型/
視圖類之一，是Qt 模型/視圖框架的一部分。QColumnView 實現了由QAbstractItemView 類定
義的接口，以允許它顯示由派生自QAbstractItemModel 類的模型提供的數據。
QUndoView 繼承QlistView。QUndoView 類顯示QUndoStack 的內容。QUndoView 是一個
QListView，它顯示在撤銷堆棧上推送的命令列表。總是選擇最近執行的命令。選擇不同的命令
會導致調用QUndoStack::setIndex()，將文檔的狀態向后或向前滾動到新命令。可以使用setStack()
顯式地設置堆棧。或者，可以使用setGroup()來設置QUndoGroup 對象。當組的活動堆棧發生
變化時，視圖將自動更新自身。

QListView

7.8.1.1 控件簡介
QListView 繼承QAbstractItemView，被QListWidget 和QUndoView 繼承。QListView 類提
供模型上的列表或圖標視圖。QListView 以簡單的非分層列表或圖標集合的形式顯示存儲在模
型中的項。該類用于提供以前由QListBox 和QIconView 類提供的列表和圖標視圖，但是使用
了Qt 的模型/視圖體系結構提供的更靈活的方法。QListView 是基于Model，而QListWidget 是
基于Item，這是它們的本質區別。QListView 需要建模，所以減少了冗余的數據，程序效率高;
而QListWidget 是一個升級版本的QListView（實質是封裝好了model 的QListView），它已經自
己為我們建立了一個數據存儲模型（QListWidgetItem），操作方便，直接調用addItem 即可添加
項目（ICON，文字）。
QT 提供了一些現成的models 用于處理數據項（這些是Qt 處理數據模型的精華，如果用到
Qt 數據模型，下面這些是經常要用到的）：
（1）QStringListModel 用于存儲簡單的QString 列表。
（2）QStandardItemModel 管理復雜的樹型結構數據項，每項都可以包含任意數據。
（3）QDirModel 提供本地文件系統中的文件與目錄信息。
（4）QSqlQueryModel, QSqlTableModel,QSqlRelationTableModel 用來訪問數據庫。
7.8.1.2 用法示例
例40_qlistview，清單圖（難度：簡單）。使用一個ListView 控件，展示如何在列表中插入
數據，其中表中的內容可編輯，可刪除。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QListView >
6 # include < QStringListModel >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* QListView對象*/18 QListView * listView;19      /* 字符串模型對象*/20 QStringListModel * stringListModel;2122
};
23 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6       /* 設置主窗口位置與大小*/7 this->setGeometry( 0, 0, 800, 480 );89       /* 實例化*/10 listView = new QListView( this );11      /* 將listView居中*/12 setCentralWidget( listView );1314 QStringList strList;15 strList << "高三（1）班" << "高三（2）班" << "高三（3）班";1617      /* 實例化，字符串模型*/18 stringListModel = new QStringListModel( strList );1920      /* 向表中插入一段數據*/21 listView->setModel( stringListModel );22      /* 設置為視圖為圖標模式*/23 listView->setViewMode( QListView::IconMode );24      /* 設置為不可拖動*/25 listView->setDragEnabled( false );26
}27
28 MainWindow::~MainWindow()
29
{30
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。雙擊表格中的項，可修改表格的內容，同時也可以刪除內容等。

QTreeView

7.8.2.1 控件簡介
QTreeView 繼承QAbstractItemView，被QTreeWidget 繼承。QTreeView 類提供樹視圖的默
認模型/視圖實現。QTreeView 實現了模型項的樹表示。該類用于提供以前由QListView 類提供
的標準分層列表，但是使用了Qt 的模型/視圖體系結構提供的更靈活的方法。
用法示例
例41_qtreeview，仿word 標題（難度：簡單）。要使一個QTreeView 能夠顯示數據，需要
構造一個model 并設置QTreeView。Qt 提供了一些類型的Model，其中最常用的就是這個
QStandardItemModel 類，一般可以滿足大部分需求。另外，表頭的內容也由這個model 管理，
setHorizontalHeaderLabels 函數可以設置共有多少列、每列文字。一級標題直接使用appendRow
方法添加到model 上，次級標題則是添加到第一個父級標題上，依次構成父子關系樹。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QTreeView >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16 QTreeView * treeView;1718
};
19 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 # include < QStandardItemModel >
4 # include < QStandardItem >
5
6 MainWindow::MainWindow( QWidget *parent )
7 : QMainWindow( parent )8
{9       /* 設置窗口的位置與大小*/10 this->setGeometry( 0, 0, 800, 480 );11      /* 實例化QTreeView對象*/12 treeView = new QTreeView( this );13      /* 居中*/14 setCentralWidget( treeView );1516      /* 構建Model */17 QStandardItemModel * sdiModel = new QStandardItemModel( treeView );18 sdiModel->setHorizontalHeaderLabels(19 QStringList() << QStringLiteral( "標題" )20 << QStringLiteral( "名稱" )21 );2223 for ( int i = 0; i < 5; i++ ){24              /* 一級標題*/25 QList<QStandardItem*> items1;26 QStandardItem * item1 =27 new QStandardItem( QString::number( i ) );28 QStandardItem * item2 =29 new QStandardItem( QStringLiteral( "一級標題" ) );30              /* 添加項一*/31 items1.append( item1 );32              /* 添加項二*/33 items1.append( item2 );34              /* appendRow方法添加到model上*/35 sdiModel->appendRow( items1 );3637 for ( int j = 0; j < 5; j++ ){38      /* 在一級標題后面插入二級標題*/39 QList<QStandardItem*> items2;40 QStandardItem * item3 =41 new QStandardItem( QString::number( j ) );42 QStandardItem * item4 =43 new QStandardItem( QStringLiteral( "二級標題" ) );44 items2.append( item3 );45 items2.append( item4 );46      /* 使用appendRow方法添加到item1上*/47 item1->appendRow( items2 );48}49}50                      /* 設置Model給treeView */51 treeView->setModel( sdiModel );52
}53
54 MainWindow::~MainWindow()
55
{56
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。可以點擊數字來展開二級標題。

QTableView

7.8.3.1 控件簡介
QTableView 繼承QAbstractItemView，被QTableWidget 繼承。QTableView 類提供了表視圖
的默認模型/視圖實現。QTableView 實現了一個表視圖，用于顯示來自模型的項。該類用于提
供以前由QTable 類提供的標準表，但使用Qt 的模型/視圖體系結構提供的更靈活的方法。
7.8.3.2 用法示例
例42_qtableview，表格視圖（難度：簡單）。要使一個QTableView 能夠顯示數據，需要構
造一個model 并設置給QTableView。Qt 提供了一些類型的Model，其中最常用的就是這個
QStandardItemModel 類，一般可以滿足大部分需求。另外，表頭的內容也由這個model 管理，
setHorizontalHeaderLabels 函數可以設置共有多少列、每列文字。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QTableView >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16 QTableView * tableView;17
};
18 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2 # include < QStandardItemModel >
3 # include < QHeaderView >
4
5 MainWindow::MainWindow( QWidget *parent )
6 : QMainWindow( parent )7
{8       /* 設置窗口的位置與大小*/9 this->setGeometry( 0, 0, 800, 480 );10 tableView = new QTableView( this );11 setCentralWidget( tableView );12      /* 顯示網格線*/13 tableView->setShowGrid( true );1415 QStandardItemModel * model	= new QStandardItemModel();16 QStringList labels		=17 QObject::tr( "語文,數學,英語" ).simplified().split( "," );18      /* 設置水平頭標簽*/19 model->setHorizontalHeaderLabels( labels );2021      /* item */22 QStandardItem * item = 0;23      /* model插入項內容*/24 for ( int i = 0; i < 5; i++ ){25 item = new QStandardItem( "80" );26 model->setItem( i, 0, item );27 item = new QStandardItem( "99" );28 model->setItem( i, 1, item );29 item = new QStandardItem( "100" );30 model->setItem( i, 2, item );31}32      /* 將model設置給tableView */33 tableView->setModel( model );34      /* 平均分列*/35 tableView->horizontalHeader()36->setSectionResizeMode( QHeaderView::Stretch );37      /* 平均分行*/38 tableView->verticalHeader()39->setSectionResizeMode( QHeaderView::Stretch );40
}41
42 MainWindow::~MainWindow()
43 {44

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。建立了一個成績表格。

QColumnView

7.8.4.1 控件簡介
QColumnView 繼承QAbstractItemView。QColumnView 在許多QListViews 中顯示一個模型，
每個QListViews 對應樹中的每個層次結構。這有時被稱為級聯列表。QColumnView 類是模型/
視圖類之一，是Qt 模型/視圖框架的一部分。QColumnView 實現了由QAbstractItemView 類定
義的接口，以允許它顯示由派生自QAbstractItemModel 類的模型提供的數據。
用法示例
例43_qcolumnview，收貨地址（難度：簡單）。使用一個QColumnView，向其插入多級
QStandardItem。這樣就可以模擬成一個多級聯的視圖。與我們在像某寶，某東里填寫的收貨地
址十分類似。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QColumnView >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16 QColumnView * columnView;17
};
18 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2 # include < QStandardItem >
3
4 MainWindow::MainWindow( QWidget *parent )
5 : QMainWindow( parent )6
{7       /* 設置主窗體顯示位置與大小*/8 this->setGeometry( 0, 0, 800, 480 );9 QStandardItemModel * model = new QStandardItemModel;1011      /* 省份*/12 QStandardItem * province = new QStandardItem( "廣東省" );1314      /* 城市*/15 QStandardItem * city1	= new QStandardItem( "茂名市" );16 QStandardItem * city2	= new QStandardItem( "中山市" );1718      /* 添加城市到省份下*/19 province->appendRow( city1 );20 province->appendRow( city2 );2122 QStandardItem * town1	= new QStandardItem( "電白鎮" );23 QStandardItem * town2	= new QStandardItem( "南頭鎮" );2425      /* 添加城鎮到城市下*/26 city1->appendRow( town1 );27 city2->appendRow( town2 );2829 columnView = new QColumnView;3031      /* 建立model */32 model->appendRow( province );3334      /* 設置model */35 columnView->setModel( model );3637      /* 設置居中*/38 setCentralWidget( columnView );39
}40
41 MainWindow::~MainWindow()
42
{43
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。當點擊省份出現城市，點擊城市出現城鎮。

QUndoView

控件簡介
QUndoView 繼承QlistView。QUndoView 類顯示QUndoStack 的內容。QUndoView 是一個
QListView，它顯示在撤銷堆棧上推送的命令列表。總是選擇最近執行的命令。選擇不同的命令
會導致調用QUndoStack::setIndex()，將文檔的狀態向后或向前滾動到新命令。可以使用setStack()
顯式地設置堆棧。或者，可以使用setGroup()來設置QUndoGroup 對象。當組的活動堆棧發生
變化時，視圖將自動更新自身。
7.8.5.2 用法示例
例44_qundoview，仿PS 歷史記錄（難度：一般）。如果大家學習過PS，都知道PS 里有個
歷史記錄面板，點擊就會撤回到歷史記錄的步驟。例子其實也可以參考Qt 官方提供的例子“Undo
Framework Example”。但是官方的例子過于復雜，整個理解下來需要花費大量時間。于是筆者
寫一個仿PS 歷史記錄的例子來加深大家對QUndoView 的理解。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。同時添加了兩
個新建文件》點擊新建，選擇C++》C++ Source File 命名command.h 和command.cpp 文件，用
于重寫QUndoCommand。項目新建完成，如下圖。

在頭文件“command.h”具體代碼如下。

1 # ifndef COMMAND_H
2 # define COMMAND_H
3
4 # include < QUndoCommand >
5 # include < QObject >
6
7 class addCommand : public QUndoCommand8 {9 public:10 addCommand( int *value, QUndoCommand* parent = 0 );11 ~addCommand();1213 /* 重寫重做與撤回方法*/14 void redo() override;15 void undo() override;1617 private:18      /* 新的count */19 int *new_count;2021      /* 舊的count */22 int old_count;23
};
24
25 # endif      /* COMMAND_H */

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QUndoView >
6 # include < QUndoStack >
7 # include < QHBoxLayout >
8 # include < QVBoxLayout >
9 # include < QPushButton >
10 # include < QLabel >
11 # include < command.h >
12
13 class MainWindow : public QMainWindow14 {15 Q_OBJECT1617 public:18 MainWindow( QWidget *parent = nullptr );19 ~MainWindow();2021 private:22      /* 水平布局*/23 QHBoxLayout * hLayout;24      /* 水平布局*/25 QVBoxLayout * vLayout;26      /* 用于容納hLayout布局*/27 QWidget * mainWidget;28      /* 容器作用QWidget,用于容納標簽與按鈕*/29 QWidget * widget;30      /* 存放QUndoCommand命令的棧*/31 QUndoStack * undoStack;32      /* 歷史記錄面板*/33 QUndoView * undoView;34      /* 用于顯示計算結果*/35 QLabel * label;36      /* 按鈕*/37 QPushButton * pushButton;38      /* 計算結果*/39 int count;4041 private slots:42 void pushButtonClieked();43 void showCountValue( int );44
};
45 # endif /* MAINWINDOW_H */

在源文件“command.cpp”具體代碼如下。

1 # include "command.h"
2 # include < QDebug >
3
4 addCommand::addCommand( int *value, QUndoCommand *parent )
5
{6       /* 使用Q_UNUSED,避免未使用的數據類型*/7 Q_UNUSED( parent );89       /* undoView顯示的操作信息*/10 setText( "進行了加1操作" );1112      /* value的地址賦值給new_count */13 new_count = value;1415      /* 讓構造函數傳過來的*new_count的值賦值給old_count */16 old_count = *new_count;17
}18
19              /* 執行stack push時或者重做操作時會自動調用*/
20 void addCommand::redo()
21
{22      /* 重新賦值給new_count */23 * new_count = old_count;2425      /* 打印出*new_count的值*/26 qDebug() << "redo:" << *new_count << endl;27
}28
29              /* 回撤操作時執行*/
30 void addCommand::undo()
31
{32      /* 回撤操作每次應減一*/33 (*new_count)--;3435      /* 打印出*new_count的值*/36 qDebug() << "undo:" << *new_count << endl;37
}38
39 addCommand::~addCommand()
40
{4142
}

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2 # include < QDebug >
3
4 MainWindow::MainWindow( QWidget *parent )
5 : QMainWindow( parent )6
{7       /* 設置主窗體顯示的位置與大小*/8 this->setGeometry( 0, 0, 800, 480 );910      /* 實例一個水平布局，用于左側按鈕區域與右側歷史記錄面板*/11 hLayout = new QHBoxLayout();1213      /* 實例一個水平布局，用于左側標簽與按鈕*/14 vLayout = new QVBoxLayout();1516      /* 主Widget, 因為MainWindow自帶一個布局，* 17 * 我們要新建一個Widget容納新布局* 18 */19 mainWidget = new QWidget();2021      /* 用于存放命令行棧*/22 undoStack = new QUndoStack( this );2324      /* 用于容納左側標簽與按鈕布局*/25 widget = new QWidget();2627      /* 歷史記錄面板實例化*/28 undoView = new QUndoView( undoStack );2930      /* 實例一個按鈕，用于加一操作*/31 pushButton = new QPushButton();3233      /* 標簽，用于顯示計算結果*/34 label = new QLabel();3536      /* 設置widget的大小*/37 widget->setMinimumSize( 400, 480 );3839      /* 將兩個widget添加到水平布局*/40 hLayout->addWidget( widget );41 hLayout->addWidget( undoView );4243      /* 初始化count的值*/44 count = 0;4546      /* 顯示初始化計算結果*/47 label->setText( "計算結果：" + QString::number( count ) );48 label->setAlignment( Qt::AlignCenter );4950      /* 左側布局*/51 vLayout->addWidget( label );52 vLayout->addWidget( pushButton );5354      /* 左側布局控件的高度設置*/55 label->setMaximumHeight( this->height() / 5 );56 pushButton->setMaximumHeight( this->height() / 5 );5758      /* 按鈕文件設置*/59 pushButton->setText( "加1" );6061      /* 設置widget的布局為vLayout */62 widget->setLayout( vLayout );6364      /* 將主窗體的布局設置為hLayout */65 mainWidget->setLayout( hLayout );6667      /* 設置mainWidget為主窗體的居中widget */68 this->setCentralWidget( mainWidget );6970      /* 信號槽連接，按鈕點擊，執行加一操作*/71 connect( pushButton, SIGNAL( clicked() ), this,72 SLOT( pushButtonClieked() ) );7374      /* 信號槽連接，歷史記錄項index發生變化，顯示count大小*/75 connect( undoStack, SIGNAL( indexChanged( int ) ),76 this, SLOT( showCountValue( int ) ) );77
}78
79              /* 入棧操作會自動調用addCommand的redo */
80 void MainWindow::pushButtonClieked()
81
{82      /* 變量值加一*/83 count++;8485      /* value指向count的地址*/86 int *value = &count;8788      /* 用重寫的addCommand類實例化*/89 QUndoCommand * add = new addCommand( value );9091      /* 入棧*/92 undoStack->push( add );93
}94
95 void MainWindow::showCountValue( int )
96
{97 /* 標簽用于顯示計算結果*/98 label->setText( "計算結果：" + QString::number( count ) );99
}100
101 MainWindow::~MainWindow()
102
{103104
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。點擊“加1”按鈕，計算結果將加1，用方向鍵或者鼠標進行選
擇右邊的歷史記錄面板將進行重做或者回撤操作，同時應用程序輸出窗口打印出debug 信息，
計算結果也將回到該步時的計算結果。
本例總結：使用數學運算加一的方法，簡單的說明了QUndoView 的使用。如果大家想到
有好QUndoView 的使用情景就可以模仿本例再深度優化或者進行知識拓展。

項目控件組（基于項）

在上一小節學習過視圖組，下面學習控件組。仔細觀察視圖組里的某幾個控件與控件組的
控件名字相似。以QListWidget 為例，QListWidget 就是繼承QListView。QListView 是基于模型
的，而QListWidget 是基于項的。兩種控件在不同的場合可以酌情選擇使用!一般處理大數據使
用基于模型的多。視圖組與控件組的控件在Qt 里展示數據時是會經常使用的！大家要掌握它們
的使用方法。
以上各個控件的解釋如下：
（1）List Widget:清單控件
（2）TreeWidget:樹形控件
（3）Table Widget:表控件
以下是各個控件的簡介：
QListWidget 繼承QListView。QListWidget 類提供了一個基于項的列表小部件。QListWidg
et 是一個便捷的類，它提供了一個類似于QListView 提供的列表視圖，但是提供了一個用于添
加和刪除項目的基于項目的經典接口。QListWidget 使用內部模型來管理列表中的每個QListWi
dgetItem。QListView 是基于model 的，需要自己來建模（例如建立QStringListModel、QSqlTa
bleModel 等），保存數據，這樣就大大降低了數據冗余，提高了程序的效率，但是需要我們對
數據建模有一定了解，而QListWidget 是一個升級版本的QListView，它已經自己為我們建立了
一個數據存儲模型（QListWidgetItem），操作方便，直接調用addItem 即可添加項目（ICON，
文字）。
QTreeWidget 繼承QTreeView。QTreeWidget 類提供了一個使用預定義樹模型的樹視圖。
QTreeWidget 類是一個便捷的類，它提供了一個標準的樹小部件，具有一個類似于qt3 中的QLi
stView 類所使用的基于項目的經典接口。該類基于Qt 的模型/視圖體系結構，并使用默認模型
來保存項，每個項都是QTreeWidgetItem。
QTableWidget 繼承QTableView。QTableWidget 類提供了一個帶有默認模型的基于項的表視
圖。表小部件為應用程序提供標準的表顯示工具。QTableWidget 中的項由QTableWidgetItem 提
供。

QListWidget

7.9.1.1 控件簡介
QListWidget 繼承QListView。QListWidget 類提供了一個基于項的列表小部件。QListWidg
et 是一個便捷的類，它提供了一個類似于QListView（下一小節將講到）提供的列表視圖，但
是提供了一個用于添加和刪除項目的基于項目的經典接口。QListWidget 使用內部模型來管理列
表中的每個QListWidgetItem。
7.9.1.2 用法示例
例45_qlistwidget，添加“歌曲”（難度：簡單）。本例使用一個QListWidget 以及一個按鈕，
當單擊按鈕時，就會調用系統打開文件窗口，過濾mp3 后綴的文件（本例使用touch 指令創建
2 個mp3 后綴的文件，并不是真正的歌曲，在終端輸入指令為touch 0.mp3 1.mp3，本例在項目
下已經創建了兩個以mp3 為后綴的文件），當打開系統文件選擇框時，就會選擇這兩個mp3 文
件作為QListWidget 的項添加到QListWidget 的窗口中。（PS：我們寫音樂播放器就要用到這種
操作—打開歌曲。實際本例就是一個打開歌曲的代碼部分。）
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QListWidget >
6 # include < QPushButton >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17 /* 聲明對象*/18 QListWidget * listWidget;19 QPushButton * pushButton;2021 private slots:22 void pushButtonClicked();2324
};
25 # endif /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 #include "mainwindow.h"
2 #include "QFileDialog"
3
4 MainWindow::MainWindow(QWidget *parent)
5 : QMainWindow(parent)
6 {
7 /* 設置主窗口的顯示位置與大小*/
8 this->setGeometry(0, 0, 800, 480);
9
10 listWidget = new QListWidget(this);
11
12 /* 設置listWidget的大小*/
13 listWidget->setGeometry(0, 0, 480, 480);
14
15 listWidget->addItem("請單擊右邊的添加項添加內容");
16
17 pushButton = new QPushButton(this);
18
19 /* 設置pushButton的位置與大小*/
20 pushButton->setGeometry(540, 200, 200, 100);
21 pushButton->setText("添加項");
22
23 /* 信號與槽連接*/
24 connect(pushButton, SIGNAL(clicked()),
25 this, SLOT(pushButtonClicked()));
26 }
27
28 void MainWindow::pushButtonClicked()
29 {
30 /* 調用系統打開文件窗口，設置窗口標題為“打開文件”，過濾文件名*/
31 QString fileName = QFileDialog::getOpenFileName(
32 this,tr("添加項"),"",
33 tr("Files(*.mp3)")
34 );
35
36 /* 判斷是否選中打開mp3文件*/
37 if (fileName != NULL)
38 /* 添加項到列表中*/
39 listWidget->addItem(fileName);
40 }
41
42 MainWindow::~MainWindow()
43 {
44 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。當點擊添加項按鈕時出現系統選擇文件的對話框，系統打開文
件時會過濾mp3 后綴的文件，點擊后綴為mp3 的文件，雙擊或者選擇后再點擊右上角的“Open”
的打開來把這個文件添加到左邊的QListWidget 列表中。讀者可以模仿這個示例，還可以添加
刪除項的按鈕，或者刪除全部按鈕等，酷狗音樂播放器的的歌單與此類似。后續繼續學習如何
播放音樂，與此結合，就可以做出一款音樂播放器了。

QTreeWidget

7.9.2.1 控件簡介
QTreeWidget 繼承QTreeView。QTreeWidget 類提供了一個使用預定義樹模型的樹視圖。
QTreeWidget 類是一個便捷的類，它提供了一個標準的樹小部件，具有一個類似于qt3 中的QLi
stView 類所使用的基于項目的經典接口。該類基于Qt 的模型/視圖體系結構，并使用默認模型
來保存項，每個項都是QTreeWidgetItem。
7.9.2.2 用法示例
例46_qtreewidget，群發信息（難度：一般），本例使用一個TreeWidget，模擬成一個飛信
聯系人分組，通過選中組內聯系人來“群發”信息。實際并不是真正做一個群發信息的飛信，只
是模擬飛信群發信息時選擇聯系人的場景，通過例子來熟悉QTreeWidget 的使用。本例相對前
面的例子稍長，出現了樹節點與子節點的概念。本例的思路：當選中頂層的樹形節點時，子節
點全部被選中；當取消選擇頂層樹形節點時，子節點原來選中的狀態將全部取消；當不完全選
中子節點時，樹節點顯示為半選狀態。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QTreeWidget >
6 # include < QTreeWidgetItem >
7
8 class MainWindow : public QMainWindow9 {10 Q_OBJECT1112 public:13 MainWindow( QWidget *parent = nullptr );14 ~MainWindow();1516 private:17      /* QTreeWidget對象*/18 QTreeWidget * treeWidget;19      /* 頂層樹節點*/20 QTreeWidgetItem * parentItem;21      /* 聲明三個子節點*/22 QTreeWidgetItem * subItem[3];2324      /* 子節點處理函數*/25 void updateParentItem( QTreeWidgetItem* );2627 private slots:28      /* 槽函數*/29 void treeItemChanged( QTreeWidgetItem*, int );3031
};
32 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下

1 #include "mainwindow.h"
2
3 MainWindow::MainWindow(QWidget *parent)
4 : QMainWindow(parent)
5 {
6 /* 設置主窗體大小*/
7 this->setGeometry(0, 0, 800, 480);
8
9 /* 實例化*/
10 treeWidget = new QTreeWidget(this);
11
12 /* 居中*/
13 setCentralWidget(treeWidget);
14
15 /* 清空列表*/
16 treeWidget->clear();
17
18 /* 實例化頂層樹節點*/
19 parentItem = new QTreeWidgetItem(treeWidget);
20 parentItem->setText(0, "同事");
21
22 parentItem->setFlags(
23 Qt::ItemIsUserCheckable
24 | Qt::ItemIsEnabled
25 | Qt::ItemIsSelectable
26 );
27 /* 樹節點設置為未選中*/
28 parentItem->setCheckState(0, Qt::Unchecked);
29
30 /* 字符串鏈表*/
31 QList <QString> strList;
32 strList<<"關羽"<<"劉備"<<"張飛";
33
34 for (int i = 0; i < 3; i++){
35 /* 實例化子節點*/
36 subItem[i] = new QTreeWidgetItem(parentItem);
37 /* 設置子節點的文本，參數0代表第0列*/
38 subItem[i]->setText(0, strList[i]);
39 /* 設置子節點的屬性為用戶可選、項開啟、項可選*/
40 subItem[i]->setFlags(
41 Qt::ItemIsUserCheckable
42 | Qt::ItemIsEnabled
43 | Qt::ItemIsSelectable
44 );
45 /* 設置子節點的狀態為未選中*/
46 subItem[i]->setCheckState(0,Qt::Unchecked);
47 }
48 /* 信號槽連接*/
49 connect(treeWidget,SIGNAL(itemChanged(QTreeWidgetItem* , int)),
50 this, SLOT(treeItemChanged(QTreeWidgetItem* , int)));
51
52 }
53
54 /* 更新樹節點函數*/
55 void MainWindow::updateParentItem(QTreeWidgetItem *item)
56 {
57 /* 獲取子節點的父節點（樹節點）*/
58 QTreeWidgetItem* parent = item->parent();
59 if(parent == NULL){
60 return;
61 }
62 /* 初始化選中的數目為0，下面根據selectCount來判斷樹節點的狀態*/
63 int selectCount = 0;
64 /* 獲取樹節點的子節點總數*/
65 int childCount = parent->childCount();
66 /* 循環判斷子節點的狀態*/
67 for(int i = 0; i < childCount; i ++){
68 QTreeWidgetItem* childItem =parent->child(i);
69 /* 判斷當前子節點的狀是否為選中狀態，如果是，則加一*/
70 if(childItem->checkState(0) == Qt::Checked) {
71 selectCount ++;
72 }
73 }
74 /* 根據selectCount來判斷樹節點的狀態*/
75 /* 當選中的子節點小于或等于0時，則為設置樹節點為未選中狀態*/
76 if (selectCount <= 0) {
77 /* 設置樹節點為未選中狀態*/
78 parent->setCheckState(0, Qt::Unchecked);
79 /* 部分選中時，樹節點為半選狀態*/
80 } else if (selectCount > 0 && selectCount < childCount) {
81 /* 設置為半選狀態*/
82 parent->setCheckState(0, Qt::PartiallyChecked);
83 /* 子節點全選時*/
84 } else if (selectCount == childCount){
85 /* 設置為樹節點為選中狀態*/
86 parent->setCheckState(0, Qt::Checked);
87 }
88 }
89
90 void MainWindow::treeItemChanged(QTreeWidgetItem *item, int)
91 {
92 /* 獲取子節點總數*/
93 int count = item->childCount();
94
95 /* 若頂層樹節點選中*/
96 if(Qt::Checked == item->checkState(0) ) {
97 /* 若選中的項是樹節點，count會大于0，否則選中的項是子節點*/
98 if (count > 0) {
99 for (int i = 0; i < count; i++) {
100 /* 子節點全選*/
101 item->child(i)->setCheckState(0, Qt::Checked);
102 }
103 } else {
104 /* 子節點處理*/
105 updateParentItem(item);
106 }
107 /* 若頂層樹節點取消選中時*/
108 } else if (Qt::Unchecked == item->checkState(0)) {
109 if (count > 0){
110 /* 若選中的項是樹節點，count會大于0，否則選中的項是子節點*/
111 for (int i = 0; i < count; i++) {
112 /* 子節點全不選*/
113 item->child(i)->setCheckState(0, Qt::Unchecked);
114 }
115 } else {
116 /* 子節點處理*/
117 updateParentItem(item);
118 }
119 }
120 }
121
122 MainWindow::~MainWindow()
123 {
124 }

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。下圖為全選時的狀態，好比要群發信息時全選聯系人的場景。當選
中樹節點同事時，子節點（關羽、劉備、張飛）將全選；當樹節點同事未選中時，子節點（關
羽、劉備、張飛）的狀態為未選中；當子節點（關羽、劉備、張飛）選中且不全選時，樹節點
同事的狀態將為半選狀態。

QTableWidget

7.9.3.1 控件簡介
QTableWidget 繼承QTableView。QTableWidget 類提供了一個帶有默認模型的基于項的表視
圖。表小部件為應用程序提供標準的表顯示工具。QTableWidget 中的項由QTableWidgetItem 提
供。
7.9.3.2 用法示例
例47_qtablewidget，TabelWidget 表格（難度：簡單），本例使用一個TableWidget，繪制一
個表格，同時修改項的標題，在表格里可以直接通過雙擊進行編輯項里的內容，也可以刪除項
里的內容等。
在新建例程中不要勾選“Generate form”，默認繼承QMainWindow 類即可。項目新建完成，
如下圖。

在頭文件“mainwindow.h”具體代碼如下。

1 # ifndef MAINWINDOW_H
2 # define MAINWINDOW_H
3
4 # include < QMainWindow >
5 # include < QTableWidget >
6
7 class MainWindow : public QMainWindow8 {9 Q_OBJECT1011 public:12 MainWindow( QWidget *parent = nullptr );13 ~MainWindow();1415 private:16      /* QTabelWidget表格*/17 QTableWidget * tableWidget;1819      /* QTabelWidgetItem表格數據（項）*/20 QTableWidgetItem * tableWidgetItem[4];2122
};
23 # endif      /* MAINWINDOW_H */

在源文件“mainwindow.cpp”具體代碼如下。

1 # include "mainwindow.h"
2
3 MainWindow::MainWindow( QWidget *parent )
4 : QMainWindow( parent )5
{6               /* 設置主窗體的大小與位置*/7 this->setGeometry( 0, 0, 800, 480 );89               /* 實例化*/10 tableWidget = new QTableWidget( this );11              /* 設置tableWidget表居中*/12 setCentralWidget( tableWidget );13              /* 設置列數*/14 tableWidget->setColumnCount( 2 );15              /* 設置行數*/16 tableWidget->setRowCount( 2 );17              /* 使用標簽設置水平標題標簽*/18 tableWidget->setHorizontalHeaderLabels(19 QStringList() << "姓名" << "性別"20 );2122              /* 字符串類型鏈表*/23 QList <QString> strList;24 strList << "小明" << "小紅" << "男" << "女";2526 for ( int i = 0; i < 4; i++ ){27      /* 實例化*/28 tableWidgetItem[i] = new QTableWidgetItem( strList[i] );29      /* 設置文本居中對齊*/30 tableWidgetItem[i]->setTextAlignment( Qt::AlignCenter );31}32              /* 插入數據，表的index就是一個二維數組數據*/33 tableWidget->setItem( 0, 0, tableWidgetItem[0] );34 tableWidget->setItem( 1, 0, tableWidgetItem[1] );35 tableWidget->setItem( 0, 1, tableWidgetItem[2] );36 tableWidget->setItem( 1, 1, tableWidgetItem[3] );3738
}39
40 MainWindow::~MainWindow()
41
{42
}

在源文件“main.cpp”具體代碼如下。由新建項目時生成，無改動。

1 # include "mainwindow.h"
2
3 # include < QApplication >
4
5 int main( int argc, char *argv[] )
6
{7 QApplication a( argc, argv );8 MainWindow w;9 w.show();10 return(a.exec() );11
}

運行效果
程序編譯運行的結果如下。雙擊表格中的項，可修改表格的內容，同時也可以刪除內容等。