多屏应用

在本教程中，您将学习如何在应用程序中创建多个屏幕以及如何在两个屏幕之间共享数据。我们将创建一个模拟时钟的应用程序，它将使用一个屏幕设置小时和分钟，并将设置的时间传递给另一个带有运行时钟的屏幕。

您还将学习如何使用TouchGFX Designer根据交互（例如屏幕更改）创建动画。

可以从此链接下载本教程中将使用的图像  。将文件解压缩到磁盘上的目录。

设置屏幕1

创建的第一个屏幕是Screen1，它是可以设置小时和分钟并将其与运行时钟一起发送到屏幕的屏幕。屏幕1如下所示，其中包含两个文本框，其中包含所需的时钟时间。要调整框中的值，请使用向上和向下箭头。为了保存所选值并将其传递到时钟上，使用了相应框下方的保存按钮。最后，通过按时钟按钮，随时钟切换到Screen2。

插入背景和文本区域的操作如下图和表格所示。

屏幕1的屏幕快照，突出显示了背景的位置和文本区域

这些按钮将插入到应用程序中，如下图和表所示。

屏幕1的屏幕截图，突出显示了按钮的位置

通过设置图形元素，下一步是添加按钮的触发器，按钮将调整所选值并保存它们：

利用设计人员生成的虚拟功能，我们首先集成了箭头按钮的四个功能。为了跟踪小时和分钟的值，还添加了两个计数器。

因此，以下代码应添加到Screen1View.hpp

Screen1View.hpp

...
public:
...
    virtual void buttonHourUpClicked();
    virtual void buttonHourDownClicked();
    virtual void buttonMinuteUpClicked();
    virtual void buttonMinuteDownClicked();

protected:
    int16_t hour;
    int16_t minute;
...

当按下箭头时，相应的值将更改为适合时钟的值。

应当以以下方式添加这四个功能的逻辑。

Screen1View.cpp

...
void Screen1View::buttonHourUpClicked()
{
    hour = (hour + 1) % 24; // Keep new value in range 0..23
    Unicode::snprintf(textAreaHourBuffer, TEXTAREAHOUR_SIZE, "%02d", hour);
    textAreaHour.invalidate();
}

void Screen1View::buttonHourDownClicked()
{
    hour = (hour + 24 - 1) % 24; // Keep new value in range 0..23
    Unicode::snprintf(textAreaHourBuffer, TEXTAREAHOUR_SIZE, "%02d", hour);
    textAreaHour.invalidate();
}

void Screen1View::buttonMinuteUpClicked()
{
    minute = (minute + 1) % 60; // Keep new value in range 0..59
    Unicode::snprintf(textAreaMinuteBuffer, TEXTAREAMINUTE_SIZE, "%02d", minute);
    textAreaMinute.invalidate();
}

void Screen1View::buttonMinuteDownClicked()
{
    minute = (minute + 60 - 1) % 60; // Keep new value in range 0..59
    Unicode::snprintf(textAreaMinuteBuffer, TEXTAREAMINUTE_SIZE, "%02d", minute);
    textAreaMinute.invalidate();
}

设置屏幕2

第二个屏幕Screen2是运行时钟的放置位置，从Screen1中保存的值开始。除时钟外，Screen2还包含一个围绕时钟设置动画的圆圈，表示时钟正在运行。最后，返回到Screen1，实现了将屏幕更改为Screen1的按钮。

使用模拟器运行应用程序时“ screen2”的屏幕截图

在将元素添加到Screen2之前，必须创建一个新屏幕。这是通过TouchGFX Designer中的添加屏幕按钮完成的，如下图所示。

TouchGFX Designer中添加屏幕按钮的位置

当进入“ screen2”时，时钟和动画都通过进入视图而动画到其位置，时钟从左侧移入，圆圈从右侧移入。因此，这两个小部件最初放置在TouchGFX Designer中的画布外部。

窗口小部件的放置应按照下面的图片和表格进行。

Wigets在“ screen2”中的位置

在屏幕之间切换

屏幕1上的时钟按钮和屏幕2上的配置按钮需要交互才能切换屏幕。此外，输入Screen2时，需要将放置在Screen2上屏幕区域之外的两个元素移到适当位置。

将以下交互添加到Screen1：

还将以下交互添加到Screen2：

要在运行时更新时钟并为圆圈设置动画，请handleTickEvent 使用虚拟功能  。

handleTickEvent 由TouchGFX框架定期调用，使它能够动态更新活动屏幕中的元素，在这种情况下将是时钟和循环。 

类似于Screen1，一个小时和一个分钟计数器用于跟踪时钟。由于  handleTickEvent 调用频率比应更新的时钟频率高，因此添加了tickCounter来确定时钟更新之间的滴答数。为了更新圆弧的角度，使用了addStart和addEnd函数。handleTickEvent 如下所示，将函数和变量添加到Screen2View.hpp中。

Screen2View.hpp

public:
...
    virtual void handleTickEvent();

protected:
    int16_t hour;
    int16_t minute;
    int16_t tickCount;
    int16_t addStart;
    int16_t addEnd;
...

集成了handleTickEventScreen2View.cpp，从而更新了时钟和圆圈的代码如下所示

Screen2View.hpp

...
void Screen2View::handleTickEvent()
{
    if (tickCount == 60)
    {
        minute++;
        hour = (hour + (minute / 60)) % 24;
        minute %= 60;

        Unicode::snprintf(textClockBuffer1, TEXTCLOCKBUFFER1_SIZE, "%02d", hour);
        Unicode::snprintf(textClockBuffer2, TEXTCLOCKBUFFER2_SIZE, "%02d", minute);

        textClock.invalidate();

        tickCount = 0;
    }

    if (!textClock.isMoveAnimationRunning())
    {
        tickCount++;
        if (circle.getArcStart() + 340 == circle.getArcEnd())
        {
            addStart = 2;
            addEnd = 1;
        }
        else if (circle.getArcStart() + 20 == circle.getArcEnd())
        {
            addStart = 1;
            addEnd = 2;
        }
        circle.invalidate();
        circle.setArc(circle.getArcStart() + addStart, circle.getArcEnd() + addEnd);
        circle.invalidate();
    }
}
...

• 请记住，将用于小时和分钟的印刷术的通配符范围0-9列添加到列中，以使TouchGFX生成所有数字的字形。

在这一步中，使用了小部件Circle来了解有关Circle的更多信息，文章  Circle描述了该小部件及其属性。

在下一步中，将添加Screen1上保存按钮的代码，以允许在Screen1和Screen2之间共享数据。

步骤2：储存资料

...
public:
    void saveHour(int16_t saveHour)
    {
        hour = saveHour;
    }

    void saveMinute(int16_t saveMinute)
    {
        minute = saveMinute;
    }

    int16_t getHour()
    {
        return hour;
    }

    int16_t getMinute()
    {
        return minute;
    }

protected:
    int16_t hour;
    int16_t minute;
...

...
Model::Model() : modelListener(0), hour(0), minute(0)
{
}
...

...
public:
    void saveHour(int16_t hour)
    {
        model->saveHour(hour);
    }

    void saveMinute(int16_t minute)
    {
        model->saveMinute(minute);
    }

    int16_t getHour()
    {
        return model->getHour();
    }

    int16_t getMinute()
    {
        return model->getMinute();
    }
...

...
void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();

    hour = presenter->getHour();
    minute = presenter->getMinute();

    Unicode::snprintf(textAreaHourBuffer, TEXTAREAHOUR_SIZE, "%02d", hour);
    Unicode::snprintf(textAreaMinuteBuffer, TEXTAREAMINUTE_SIZE, "%02d", minute);
}
...

...
public:
    virtual void buttonSaveHourClicked()
    {
        presenter->saveHour(hour);
    }

    virtual void buttonSaveMinuteClicked()
    {
        presenter->saveMinute(minute);
    }
...

...
void Screen2View::setupScreen()
{
    Screen2ViewBase::setupScreen();

    hour = presenter->getHour();
    minute = presenter->getMinute();

    Unicode::snprintf(textClockBuffer1, TEXTCLOCKBUFFER1_SIZE, "%02d", hour);
    Unicode::snprintf(textClockBuffer2, TEXTCLOCKBUFFER2_SIZE, "%02d", minute);
}
...

...
void Screen2View::tearDownScreen()
{
    presenter->saveHour(hour);
    presenter->saveMinute(minute);

    Screen2ViewBase::tearDownScreen();
}
...