之前的文章，分別有介紹過使用Qt程序實現(xiàn)一個時鐘和一個秒表，本篇，來將這兩個功能整合在一起，實現(xiàn)兩個頁面的隨意切換，并且兩個頁面能獨立運行，互不影響。

先來看下最終的效果，通過左側的兩個按鈕，實現(xiàn)兩個頁面的切換。

1 Qt堆棧窗口

本篇的頁面切換功能，是利用Qt的QStackedWidget實現(xiàn)的。

1.1QStackedWidget

QStackedWidget 類提供了多頁面切換的布局，一次只能顯示一個界面。

1.2 基礎模板

對于QStackedWidget的使用，可以先參考下面這個模板，配合QLabel來控制頁面的切換：

該代碼的運行效果如下：

本篇就在這個模板的基礎上，將Qt時鐘程序和Qt秒表程序移植過來。

2 移植時鐘與秒表程序

2.1 時鐘程序移植

將之前這篇中的程序作為一個獨立的窗口移植到本篇的程序中：嵌入式Qt-動手編寫并運行自己的第1個ARM-Qt程序

移植步驟：

• Qt Creator中，堆棧窗口基礎工程的基礎上，點文件菜單，再點新建文件或項目，新建一個C++類，名字可取clockwidget

• 將Qt時鐘的程序復制過來，代碼基本不需要修改，只需要把類名換成ClockWidget即可

例如其構造函數(shù)如下：

2.2 秒表程序移植

將之前這篇中的程序作為一個獨立的窗口移植到本篇的程序中：嵌入式Qt-做一個秒表

秒表這個Qt程序，用到了Qt Creator的圖形頁面設計，因此要主要移植的不同之處。

移植步驟：

• Qt Creator中，堆棧窗口基礎工程的基礎上，點文件菜單，再點新建文件或項目，新建一個C++類，名字可取TimerWidget

• 將ui文件也拷貝過來，在工程中，通過添加現(xiàn)有文件的方式，將ui文件添加進工程

• 另外，可以將移植過來的ui文件，更名為TimerWidget.ui。需注意的是，修改了文件名后，還需要將ui文件以文本的形式打開，修改對應的類名為TimerWidget，要包含的頭文件也改名為ui_TimerWidget.h

移植后的構造函數(shù)如下：

注意頭文件包含的是ui_TimerWidget.h，構造函數(shù)繼承的ui也是Ui::TimerWidget

2.3 主程序框架

移植好Qt時鐘程序和Qt秒表程序后，就可以將這兩個功能加入到堆棧窗口中了。

注意，下面的頁面切換，我改用兩個QPushButton來實現(xiàn)Qt時鐘和Qt秒表的頁面切換，并使用QGridLayout進行布局，使得兩個按鈕位于整個界面的左側。

另外需要注意的是，Qt的信號和槽機制，需要信號和槽函數(shù)的參數(shù)一致或信號的參數(shù)多于槽的參數(shù)，而按鈕按下沒有參數(shù)，但切換堆棧頁面需要一個參數(shù)（索引號，指示要展示第幾個頁面），因此不能直接使用pStack的setCurrentIndex作為槽函數(shù)，需要自己再封裝一層，分別寫兩個按鈕按下時的槽函數(shù)。

3 測試

將代碼在Windows上編譯運行ok后，再將源碼復制到Ububtu中進行交叉編譯，具體的編譯過程可參考之前的文章：嵌入式Qt-動手編寫并運行自己的第1個ARM-Qt程序

然后將編譯后的程序復制到Linux板子中運行，運行效果如下：

可以看到Qt時鐘和Qt秒表這兩個頁面可以隨意切換，并且兩個頁面獨立運行，某個頁面被隱藏顯示時，其計時功能仍在運行，再次將頁面切換回來，計時時間也是對的。

4 總結

本篇介紹了介紹了QStackedWidget的使用，通過這個類，實現(xiàn)了Qt時鐘和Qt秒表這兩個頁面可以隨意切換。