综述

本文将完成以下任务：

创建一个简单的图形用户界面(GUI)，显示一个欢迎消息和一个按钮，点击按钮后显示一个弹出窗口。

开发工具：

TouchGFX Designer 4.26.0

---

GUI绘制

在新建或者复制项目文件后，首先导入所需要的图片，在左侧Images中提前批量添加所需要的图片；

新建一个Screen，点击Image添加背景图片，这里使用的是官方提供的背景图；同时添加两个Box形状控件，作为上方图标的底色和边界。

添加一个Scalable Image（可调大小图像）控件，在Properties里面载入我们添加的图片，作为图标，放到合适的位置后调整尺寸；

添加一个Text Area 文本区域控件，修改文本内容，选择合适的文本格式预设，也可以修改或者新建预设，用于更换文本大小、字体等属性；设置文本颜色，此处为白色比较合适；

添加一个带文本的按钮控件，选择合适的按钮样式，因为文本长度不长，所以我们选择一个比较短的按钮；文本的设置的步骤和前面文本控件的是一样的。绘制后的布局如下：

接下来绘制按下按钮之后的弹窗：

modal window是一个容器，可视时默认在屏幕最前端，可以在里面放置文本等组件，当modal window展示时，里面所有内容都会一起展示出来。

选择Modal Window添加一个窗口，在其属性的Appearance里面有三个选项：第一个是底图，第二第三个分别是阴影的颜色和透明度。我们选择合适大小的底图，效果如下：

我想要实现在****弹出这个窗口后，点击任意位置（或者点击文本位置）跳转到下一个屏幕****，所以我选择了放置一个Flex Button（自由样式按钮），按钮只保留文本元素，来响应点击事件；Flex Button可以添加的元素如下：

先添加一个Flex Button控件，在控件树中将放置的flexbutton拖放至modalWindow里，

并且在 flexButton 的 Properties 属性设置中，在Visual Elements里面添加一个Text文本元素，删除默认的 Box With Border带框盒子元素。

双击出现的Text，并在translation中填入合适的文本。flexbutton的文字会出现在按钮区域的最上方，如果flexButton的大小是全屏的，那么我们需要通过打回车Enter调节到中间。

完成这些操作后，当modalWindow唤出时，点击底图覆盖的区域就可以响应按钮按下事件；透明区域是不响应按钮按下事件的。

---

添加交互

我们需要添加交互的主要有两个控件：分别是主界面中的NEXT按钮，以及modalWindow中的按钮。下面将比较重要的元素都重命名一下：

Screen2重命名为WelcomeScreen，modalWindow1重命名为PopupWindow，flexButton1重命名为fullScreenBtn，buttonWithLabel1重命名为NextBtn。

首先，因为该画面是开机时第一个显示的，我们必须把它设置为Startup Screen。

切换到Interactions添加交互，首先是Screen2出现时，应该将PopupWindow隐藏，也就是开机时只展示底图。交互的逻辑设计如下：

接着是当NextBtn按钮按下时，显示弹窗；

最后是当弹窗的fullScreenBtn按钮按下时，切换到下一个画面，切换的动效可以自行调整。

我临时使用上一篇报告中绘制的画面Screen1来作为切换的对象，Screen1实现的是屏幕按钮点灯的效果。我们直接切换到该画面。

点击右下角最右边的按钮编译并下载到开发板上，验证效果。

最后的效果如下：

---

ST的Logo： 此项目的源码放在Github上：STM32F429-TouchGFX/MyApplication_SwitchInterface at main · Chiando-1100/STM32F429-TouchGFX