嵌入式Qt-實現兩個窗口的切換

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

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

1 Qt堆棧窗口

本篇的頁面切換功能，是利用Qt的QStackedWidget實現的。

1.1QStackedWidget

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

1.2 基礎模板

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

#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)變化時，切換對應的StackedWidget顯示
    connect(list, SIGNAL(currentRowChanged(int)), stack, SLOT(setCurrentIndex(int)));
}

該代碼的運行效果如下：

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

2 移植時鐘與秒表程序

2.1 時鐘程序移植

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

移植步驟：

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

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

例如其構造函數如下：

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); //設置最小尺寸
}

2.2 秒表程序移植

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

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

移植步驟：

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

將ui文件也拷貝過來，在工程中，通過添加現有文件的方式，將ui文件添加進工程

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

移植后的構造函數如下：

#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，構造函數繼承的ui也是Ui::TimerWidget

2.3 主程序框架

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

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

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

    QPushButton *pClockButton = new QPushButton("時\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的信號和槽機制，需要信號和槽函數的參數一致或信號的參數多于槽的參數，而按鈕按下沒有參數，但切換堆棧頁面需要一個參數（索引號，指示要展示第幾個頁面），因此不能直接使用pStack的setCurrentIndex作為槽函數，需要自己再封裝一層，分別寫兩個按鈕按下時的槽函數。

3 測試

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

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

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

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

4 總結

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