实训的TouchGFX例程效果很炫酷，但是要学会用TouchGFX，还是必须要自行搭建空白例程从零开始学习的。
, K3 W  s' W& w% k7 |( N5 }由于线下实训已经提供了正点原子H7R7所需要的TPA文件，所以在初始化时不需要用到CubeMX，只需要直接选TPA文件创建空白TouchGFX例程即可：



, ~7 z$ E# W' G2 g4 x在空白例程中，我打算加入几个功能：1.通过图片按钮切换界面，并且按钮的按下和释放图像是不同的两个图像；2.加入TextArea用于显示硬件代码那边传过来的数值，硬件代码还没开始写，就定义一个tick事件回调函数，这个回调函数是几十毫秒执行一次，用于更新TextArea的数值；3.屏幕来回切换都使用按钮实现，并且动画设置两个不同的。
3 O1 R* p( ?& ^6 k; s' a
/ C  b  V4 |% G; V8 |在创建添加任何控件之前，必须添加一个叫box的控件，可以理解为盒子或者容器，所有的交互控件，比如按钮和TextArea，都必须放在box上面：
1 Z8 l/ g9 p  `; N2 ?. {% ]7 g+ T" g
# S% u+ D& m% E
首先是通过图片按钮切换界面这个功能，需要用到flexButton和Button的Interactions（交互），图片按钮也可以设置按下和释放：
; f0 c9 i; G0 v' F! M4 ^. t3 ?
  Z; k& v! |: N4 T( B8 U
) I% [+ z5 `# x通过按钮（图片按钮）来切换界面，可以用TouchGFX自带的ChangeScreen事件，或者添加专属Callback回调函数，如果按钮只用来切换界面那就直接用ChangeScreen事件即可，如果在切换界面的同时还想要通过代码干别的事情，那就用Callback回调函数，但是有个注意点是，使用Callback回调函数来实现切换界面，在不使用Action控件的前提下，必须要注册一个假触发和假事件，如图，使用一个不存在的HardwareButton 0触发来触发ChangeScreen事件，由于硬件部分并没有搭建HardwareButton 0，所以这个触发是个假触发，永远不会发生：


在代码中注册fb_anon1的回调函数fb_anon1_Callback()，这个fb_anon1和相应回调函数的名字是可以自由取的，但是代码注册名和TouchGFX Designer注册名必须一致：
( V4 S, F0 m9 p% N2 J+ ?# O
. A7 {( {  `- k, h
8 b8 @& Y$ p. M2 t; D1 gapplication().gotoScreen2ScreenWipeTransitionEast()实现了从Screen1界面切换到Screen2界面的功能，getRootContainer().invalidate()是防止花屏的，刚刚提到了假触发的事情，因为前面注册假触发来触发ChangeScreen事件，所以才会注册application().gotoScreen2ScreenWipeTransitionEast()这个成员函数，切换界面的动作才能被fb_anon1按钮的回调函数调用。同理，Tick10和Tick1也是我注册的触发，意思是每10个节拍和每一个1节拍触发一次的事件，这个事件同样也能注册回调函数，我这里就是分别用两个TextArea来显示一个整数和浮点数的递增。


7 ]: r. J( F! K" @) }6 G6 H4 t值得注意的是，要用TextArea显示变量，还需要注册Wildcard，可以理解为通配符字符串：
1 ^; _7 _7 b7 f, s

+ }) s- U/ S" G8 N# N9 u在typographies选项卡里面还需要填写TextArea所用字体的显示范围，我这里填写0x20-0xfe，表示可以显示所有ASCII码：
7 K. O5 _" e9 g4 q" R; J
; D5 V& J$ k  |
. C% {# @" g8 H$ }" s8 A- k4 A( |然后创建一个Screen2界面，同样是添加box和图片按钮flexButton，把这个flexButton的事件设置为切换为Screen1界面，那样，就实现两个界面通过按钮来回切换了：
% Y. e9 b3 ~, `% W- s' T# i( V
3 P  G( L% u% p! K" O1 O" {- m
) j( j5 ~1 z" w. o6 t最后，在初始化代码处添加串口初始化代码以及重定义ioputchar代码，以实现串口打印：
8 ^2 {1 r) u3 y6 Q+ Z5 Q/ i

在串口初始化完成之后打印一句UART1.\n:
$ L! X* ^5 h* @5 d. @4 G1 l: ~

模拟器运行效果：
2 T9 w2 Y9 r5 g& ^2 |6 H

# ~+ T% j) T+ i# ^  v+ ~! ]开发板实测运行效果视频我做成gif放在二楼。
, Q7 X  Y/ N' F4 S