之前的文章，分別有介紹過(guò)使用Qt程序?qū)崿F(xiàn)一個(gè)時(shí)鐘和一個(gè)秒表，本篇，來(lái)將這兩個(gè)功能整合在一起，實(shí)現(xiàn)兩個(gè)頁(yè)面的隨意切換，并且兩個(gè)頁(yè)面能獨(dú)立運(yùn)行，互不影響。

先來(lái)看下最終的效果，通過(guò)左側(cè)的兩個(gè)按鈕，實(shí)現(xiàn)兩個(gè)頁(yè)面的切換。

1 Qt堆棧窗口

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

1.1QStackedWidget

QStackedWidget 類(lèi)提供了多頁(yè)面切換的布局，一次只能顯示一個(gè)界面。

1.2 基礎(chǔ)模板

對(duì)于QStackedWidget的使用，可以先參考下面這個(gè)模板，配合QLabel來(lái)控制頁(yè)面的切換：

#include "stackdlg.h"
#include 

StackDlg::StackDlg(QWidget *parent)
    : QDialog(parent)
{
    setWindowTitle(tr("StackedWidget"));

    list = new QListWidget(this); //創(chuàng)建ListWidge
    list->insertItem(0, tr("Window1")); //ListWidge中添加Item
    list->insertItem(1, tr("Window2")); //ListWidge中添加Item
    list->insertItem(2, tr("Window3")); //ListWidge中添加Item

    stack = new QStackedWidget(this); //創(chuàng)建StackedWidget
    label1 = new QLabel(tr("WindowTest1"));
    label2 = new QLabel(tr("WindowTest2"));
    label3 = new QLabel(tr("WindowTest3"));
    stack->addWidget(label1); //StackedWidget中添加窗口1
    stack->addWidget(label2); //StackedWidget中添加窗口2
    stack->addWidget(label3); //StackedWidget中添加窗口3

    QHBoxLayout *mainLayout = new QHBoxLayout(this); //創(chuàng)建豎直布局器
    mainLayout->setMargin(5);
    mainLayout->setSpacing(5);
    mainLayout->addWidget(list);                      //放入ListWidge
    mainLayout->addWidget(stack,0, Qt::AlignHCenter); //放入StackedWidget
    mainLayout->setStretchFactor(list, 1);  //ListWidge的伸縮尺度是1
    mainLayout->setStretchFactor(stack, 3); //StackedWidget的伸縮尺度是3

    // ListWidge的行狀態(tài)變化時(shí)，切換對(duì)應(yīng)的StackedWidget顯示
    connect(list, SIGNAL(currentRowChanged(int)), stack, SLOT(setCurrentIndex(int)));
}

該代碼的運(yùn)行效果如下：

本篇就在這個(gè)模板的基礎(chǔ)上，將Qt時(shí)鐘程序和Qt秒表程序移植過(guò)來(lái)。

2 移植時(shí)鐘與秒表程序

2.1 時(shí)鐘程序移植

將之前這篇中的程序作為一個(gè)獨(dú)立的窗口移植到本篇的程序中：嵌入式Qt-動(dòng)手編寫(xiě)并運(yùn)行自己的第1個(gè)ARM-Qt程序

移植步驟：

Qt Creator中，堆棧窗口基礎(chǔ)工程的基礎(chǔ)上，點(diǎn)文件菜單，再點(diǎn)新建文件或項(xiàng)目，新建一個(gè)C++類(lèi)，名字可取clockwidget

將Qt時(shí)鐘的程序復(fù)制過(guò)來(lái)，代碼基本不需要修改，只需要把類(lèi)名換成ClockWidget即可

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

ClockWidget::ClockWidget(QWidget *parent) : QWidget(parent)
{
    QTimer *timer = new QTimer(this);
    connect(timer, SIGNAL(timeout()), this, SLOT(update()));
    timer->start(1000);

    setWindowTitle(tr("Clock"));
    setMinimumSize(200, 200); //設(shè)置最小尺寸
}

2.2 秒表程序移植

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

秒表這個(gè)Qt程序，用到了Qt Creator的圖形頁(yè)面設(shè)計(jì)，因此要主要移植的不同之處。

移植步驟：

Qt Creator中，堆棧窗口基礎(chǔ)工程的基礎(chǔ)上，點(diǎn)文件菜單，再點(diǎn)新建文件或項(xiàng)目，新建一個(gè)C++類(lèi)，名字可取TimerWidget

將ui文件也拷貝過(guò)來(lái)，在工程中，通過(guò)添加現(xiàn)有文件的方式，將ui文件添加進(jìn)工程

另外，可以將移植過(guò)來(lái)的ui文件，更名為T(mén)imerWidget.ui。需注意的是，修改了文件名后，還需要將ui文件以文本的形式打開(kāi)，修改對(duì)應(yīng)的類(lèi)名為T(mén)imerWidget，要包含的頭文件也改名為ui_TimerWidget.h

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

#include "timerwidget.h"
#include "ui_TimerWidget.h"
#include
#pragma execution_character_set("utf-8")

TimerWidget::TimerWidget(QWidget *parent) : QWidget(parent), ui(new Ui::TimerWidget)
{
    ui->setupUi(this);
    connect(&timer, SIGNAL(timeout()), this, SLOT(timeout_slot()));
    connect(&timer, SIGNAL(timeout()), this, SLOT(update()));
    connect(ui->Btn_Reset, SIGNAL(clicked()), this, SLOT(update()));

    time.setHMS(0,0,0,0);
    ui->Txt_ShowTime->setText("00:00:00");

    ui->Btn_Start->setChecked(false);
    ui->Btn_Reset->setEnabled(false);
    ui->Btn_Hit->setEnabled(false);
}

?

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

2.3 主程序框架

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

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

StackDlg::StackDlg(QWidget *parent)
    : QDialog(parent)
{
    setWindowTitle(tr("StackedWidget"));
    setMinimumSize(800, 480);
    qDebug("Hello");

    QPushButton *pClockButton = new QPushButton("時(shí)\n鐘", this);
    QPushButton *pTimerButton = new QPushButton("秒\n表", this);
    pClockButton->setFixedSize(QSize(80,200));
    pClockButton->setFont(QFont("Times", 20));
    pTimerButton->setFixedSize(QSize(80,200));
    pTimerButton->setFont(QFont("Times", 20));

    pStack = new QStackedWidget(this);
    ClockWidget *pClockWidget = new ClockWidget();
    TimerWidget *pTimerWidget = new TimerWidget();
    pStack->addWidget(pClockWidget);
    pStack->addWidget(pTimerWidget);

    QGridLayout *mainLayout = new QGridLayout(this);
    mainLayout->addWidget(pClockButton, 0, 0, Qt::AlignCenter);
    mainLayout->addWidget(pTimerButton, 1, 0, Qt::AlignCenter);
    mainLayout->addWidget(pStack, 0, 1, 2, 1);

    mainLayout->setContentsMargins(10,10,1,1);
    mainLayout->setColumnStretch(1, 10);
    mainLayout->setRowStretch(1, 1);

    connect(pClockButton, SIGNAL(clicked()), this, SLOT(showClock()));
    connect(pTimerButton, SIGNAL(clicked()), this, SLOT(showTimer()));
}

void StackDlg::showClock()
{
    qDebug("%s", __func__);
    pStack->setCurrentIndex(0);
}
void StackDlg::showTimer()
{
    qDebug("%s", __func__);
    pStack->setCurrentIndex(1);
}

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

3 測(cè)試

將代碼在Windows上編譯運(yùn)行ok后，再將源碼復(fù)制到Ububtu中進(jìn)行交叉編譯，具體的編譯過(guò)程可參考之前的文章：嵌入式Qt-動(dòng)手編寫(xiě)并運(yùn)行自己的第1個(gè)ARM-Qt程序

然后將編譯后的程序復(fù)制到Linux板子中運(yùn)行，運(yùn)行效果如下：

https://www.bilibili.com/video/BV1RB4y147s7

可以看到Qt時(shí)鐘和Qt秒表這兩個(gè)頁(yè)面可以隨意切換，并且兩個(gè)頁(yè)面獨(dú)立運(yùn)行，某個(gè)頁(yè)面被隱藏顯示時(shí)，其計(jì)時(shí)功能仍在運(yùn)行，再次將頁(yè)面切換回來(lái)，計(jì)時(shí)時(shí)間也是對(duì)的。

4 總結(jié)

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