使用TouchGFX开发STM32界面应用之入门篇（三）

只看该作者 · 2020-6-21 12:45

使用TouchGFX开发STM32界面应用之入门篇（三）-- 多屏呈现与MVP框架(2)

【注：这是《TouchGFX入门篇（三）-- 多屏呈现与MVP框架》**的第二部分，第一部分请看这里】
在上一讲中我们已经创建了第一个Screen、并运行了模拟器来验证时间参数能正确配置，下面开始创建第二个Screen：

作者：海东青电子
链接：https://www.jianshu.com/p/90aee3fe2950
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

只看该作者 · 2020-6-21 12:46

这个Screen上有3个控件（英文的叫法：Widget）：屏幕中央是数字显示的时间，围绕时间是一个大小不断变化的圆弧（通过动画来实现长短变化），右上角是一个图形按钮----按下后可以调出时间配置窗口：

只看该作者 · 2020-6-21 12:46

为了添加一个新的Screen，在1 处点击 + 号，系统自动在 2 处产生一个Screen，默认名称为Screen2（实际项目时应由用户更改为有意义的名称），然后设置Screen的背景，在 3 处添加一个Button、并配置按钮的 Released Image 等属性（略），在 4 处添加一个 Text Area，并按上图右侧所示配置各个属性，字体选40px，并且其中的 WILDCARD1 和 WILDCARD2 都需要配置（二者配置相同）。

只看该作者 · 2020-6-21 12:47

最后添加一个圆弧图形（Circle控件）：

只看该作者 · 2020-6-21 12:48

最后要做的是，添加有关按钮的消息响应函数，使得可以在2个Screen之间来回切换。

先配置Screen1中 Clock 按钮的动作响应属性：

只看该作者 · 2020-6-21 12:48

然后是Screen2中设置按钮的属性：

只看该作者 · 2020-6-21 12:49

界面设计工作告一段落，CTRL+S 保存项目文件，点击右下角的 Browse Code ，进入VS编程环境，编译、运行，弹出模拟器运行窗口：

只看该作者 · 2020-6-21 12:50

鼠标点击 Clock 按钮，应该能切换到第二个屏幕：

只看该作者 · 2020-6-21 12:50

再点击右上角的设置按钮，应该能切换回第一个屏幕。而且，应该能看到一个“场景切换特效”：首页屏幕是从底部钻出来的！有点儿酷吧，哈哈！这是图五右侧下方 Slide、South 两个参数起到的转场特效，TouchGFX的功能挺牛的吧。

只看该作者 · 2020-6-21 12:51

因为还没有完善代码，在首页屏幕上点击各个按钮时，小时、分钟数值显示可能是乱的，先不要管他，重要的是2个屏幕能正确切换，就达到了第一步的目的。

只看该作者 · 2020-6-21 12:52

下面开始代码的添加过程：MVP框架模式的实现，以及如何在2个Screen之间正确传递变量的值。我用一句话来概括这个高大上的MVP术语：所有数据仅能保存在称为 Model 的类对象（简单说就是一种文件）中，Presenter是视图（View）与Model之间的纽带，View只能通过Presenter来读取数据。下面用代码编程的实现来具体说明MVP。

只看该作者 · 2020-6-21 12:53

找到Model.hpp文件，添加2个私有成员变量 hour 和 minute，以及访问（即：读和写）这些变量的操作函数声明：

只看该作者 · 2020-6-21 12:53

加入对hour和minute变量的初始化：

只看该作者 · 2020-6-21 12:54

前面曾讲过，View不能直接读写Model中的数据，必须得通过Presenter来操作，所以先要在Presenter中实现对数据的读写：

只看该作者 · 2020-6-21 12:55

而在Screen2中也需要用同样方式访问Model中数据，所以在 Screen2Presenter.hpp 中也需要添加跟上面同样的代码：

只看该作者 · 2020-6-21 12:56

最后要做的，是在Screen1和Screen2中读取hour、minute的初始值，以及更新、保存这些变量。对于Screen1，需要在Screen1View.cpp中获取存储在Model中的hour、minute的初始数值，在Screen1View.hpp中添加小时、分钟增减按钮的响应函数（将hour、minute保存到Model中）：

只看该作者 · 2020-6-21 12:56

同样地，在Screen2中也需要做类似代码处理，并且先要添加属于Screen2的变量hour、minute：

只看该作者 · 2020-6-21 12:57

只看该作者 · 2020-6-21 12:58

在VC中，编译、运行，在Screen1中调整小时、分钟的数值，保存。然后，切换到Screen2，应该能正确显示调整之后的小时、分钟：

只看该作者 · 2020-6-21 12:58

至此，我们完成了2个Screen之间的切换，以及如何在Screen之间传递数据。只是，这个界面真是太low了 ---- 时间没有走起来，还有，那个半圆弧显得怪怪的。---- 这正是下一节要做的工作：让时钟跑起来、让表盘（就是这个丑丑的圆弧^_^）动起来！