[经验分享] 【补 DigiKey“智造万物，快乐不停”创意大赛】2.基本gui设计基于STM32H7B3I-DK

Henry-0755 2024-2-10 22:33 楼主

# **【补 DigiKey“智造万物，快乐不停”创意大赛】**2.基本gui设计 基于STM32H7B3I-DK

论坛的各位新年好呀~之前的创意大赛未完成，过年来补一补：

本章是项目ui的设计部分：

使用的版本

Touchgfx 4.22.1

cubemx6.9.2

frameware

cubeide

通过TouchGFX可以生成指定预先设定好的板级配置，选择stm32h7b3i-dk后即可生成带有cubeMX cubeIDE的项目。

这个板子也有许多demo可以参考，路径在：

`Repository\XXXX_FW_XXXX\Projects\XXXXX\Demonstrations`

但这块板子的demo都没有适配stm32cubeMX6.10版本，如果通过cube mx的examples生成项目进行编译会报错，需要自己修改，但这些历程很有参考价值，比如将其中自定义的ui组件导出（对Containers中的组件右键导出），在自己的项目中引用，如想使用例程menulauncher的自定义选择组件（外层是个横向的scroller view，内层是选择的图片按键，选择中会给icon highlight）

:exclamation: 在导出的过程中如果重复导入同一个widget哪怕在touchgfx中删除这个widget，（包含图片资源以及code）会无法导入，需要手动删除这些图片代码才可以。这应该算个bug

参照官方教程

`https://support.touchgfx.com/zh-CN/docs/tutorials/tutorial-04`

完成效果：

<span class="gif-notice-info" style="display:block; text-align:center; line-height: 24px; font-size:12px; color:#aaa; padding: 10px 0;">点击上图查看Gif动图</span>

添加Menu的监听事件进入到对应的功能

本人没学过c++所以用起来touchgfx有点困难，以未学过的角度看一下如何实现按下中心的icon跳转到对应的界面：

首先是Touchgfx中的这个scrollwheel勾选Use Selected Style Template并在代码中实现UpdateCenterItem实现放大中心选中的icon的效果，其中scrollwheel的Item是自定义的一个image+btn，btn可以添加Interactions，实现按下的时候进行回调，调用虚拟函数来实现跳转：

```c++
//optionButtonSelected.hpp

+  virtual void btnClicked();

//optionButtonSelected.cpp

+void optionButtonSelected::btnClicked()
+{
+  //TODO跳转
+}
```