附件：LAT1573 TouchGFX中滚轮式菜单选择界面容器的应用介绍

关键字：TouchGFX， 容器, 滚轮式菜单选择

1. 菜单选择界面介绍

在STM32N6570-DK开发板的开机视频中，有一个流畅炫酷的滚轮式菜单选择界面，

通过选择不同的图标，可以实现界面的切换。这里将这个功能设计成了一个容器，本LAT

的附件提供了一个菜单选择界面的容器MenuContainer.tpkg和所需的字体、动画的图

片，可以很方便的导入其他工程，并根据自己需要替换图片和文字，实现流畅炫酷菜单选

择界面的快速开发。

图1. STM32N6570-DK的菜单选择界面

2. 容器的导入方法

关于自定义容器的导入导出方法，可以参考TouchGFX Wiki文档《自定义容器导入和

导出》章节。

2.1. 导入容器

打开TouchGFX Designer，可以是一个空的工程，也可以是一个正在开发的工程，点

击菜单栏的“Edit->Import->Customer”导入菜单选择容器MenuContainer.tpkg。

图2. 导入自定义容器

容器导入后，会有个缺少字体的提示。由于导入容器时，字体没有导入，需要手动将

字体复制到工程文件夹assets\fonts目录下。同时导入的动画图片仅导入了第一张和最后

一张图片，为了实现整个动画的播放，需要将launch-animation文件夹中的动画图片

launch_demo_0001.png 到 launch_demo_0022.png 添加到

assets\images\Main\launch-animation 文件夹。

图3.  字体缺失提示

由于导入字体后，TouchGFX Designer会重新检索字体，需要先保存工程然后关闭

TouchGFX Designer，然后重新打开TouchGFX Desinger，然后重新配置

MainSelectSubDemo 和 MaiLauchIcon 的字体，当然您也可以选择其他字体。

图4. 添加字体

                     

3. 添加交互，实现界面切换

新建Screen1和Screen2，在Screen1中添加MenuContainer容器。需要注意的

是，因为在MenuContainer的属性配置中当goToMenu动作被调用时，会切换回

Screen1，所以MenuContainer容器所在的界面是Screen1，如果是其他名字，需要修

改属性配置。

图5.  Screen1添加MenuContainer容器

为了实现点击Launch时切换到Screen2界面，在Containers/MenuContainer的

Actions 选项添加goToScreen2, 然后在交互中，添加一个交互，当goToScreen2被调

用时，实现界面切换。

图6.  MenuContainer 添加Action

图7. MenuContainer 添加交互

                   

为了实现当点击AI DEMO图标时，调用goToScreen2函数，需要在

MenuContainer.cpp 中修改如下代码。

图8. 代码修改调用goToScreen2函数

上述结果修改好后，就可以模拟运行下查看仿真效果，具体实现请参考本文档的附

件。  

4. 小结

本文向大家介绍了MenuContainer容器的导入和使用方法，大家可以使用这个容器

替换自己的素材开发流畅炫酷的菜单选择界面。

---

意法半导体公司及其子公司 （“ST”）保留随时对 ST 产品和 / 或本文档进行变更的权利，恕不另行通知。买方在订货之前应获取关于 ST 产 品的最新信息。 ST 产品的销售依照订单确认时的相关 ST 销售条款。 买方自行负责对 ST 产品的选择和使用， ST 概不承担与应用协助或买方产品设计相关的任何责任。 ST 不对任何知识产权进行任何明示或默示的授权或许可。 转售的 ST 产品如有不同于此处提供的信息的规定，将导致 ST 针对该产品授予的任何保证失效。 ST 和 ST 徽标是 ST 的商标。若需 ST 商标的更多信息，请参考 www.st.com/trademarks。所有其他产品或服务名称均为其 各自所有者的财 产。 本文档是ST中国本地团队的技术性文章，旨在交流与分享，并期望借此给予客户产品应用上足够的帮助或提醒。若文中内容存有局限或与ST 官网资料不一致，请以实际应用验证结果和ST官网最新发布的内容为准。您拥有完全自主权是否采纳本文档（包括代码，电路图等）信息， 我们也不承担因使用或采纳本文档内容而导致的任何风险。 本文档中的信息取代本文档所有早期版本中提供的信息。