【STM32H7S78-DK测评】3.转轮动效菜单的实现

电子烂人

【STM32H7S78-DK测评】3.转轮动效菜单的实现 [复制链接]

本帖最后由电子烂人于 2025-1-15 14:06 编辑

1.前言

之前的帖子已经实现了基础的TOUCHGFX效果，我们要在这个基础上加上菜单的动效

ST提供了很多小控件，不过还不足以实现我们的效果，这篇文章在原有的基础上试着添加一些定制的转轮控件

2.工程建立

打开之前的TOUCHGFX工程：

在CONTAINERS里添加一个小控件，同时摆放好图标和文字的样式，记录下各个元素的坐标

另外，放一些要用的元素进工程

记得设置下要用到的字体，这边屏幕比较大，选用宋体，45磅：

把控件里的文字也设置好：

回到我们的菜单页面，放置一个scrollwheel转动菜单控件

并在Item Template选择做好的Container，这边设置元素多少，列表外观，以及选择循环模式

在转盘的中央放置一个透明按钮，表示我们按下这个区域

到这里就基本设置完成，生成工程，开始代码端的操作。

3.代码修改

主要流程为：显示转轮效果--->绑定图标和文字--->确认转轮当前所选--->按键进入对应函数--->跳转屏幕

全部代码为C++编译，只展示部分核心内容，.HPP自行修改。这部分代码有参考@NATHAN_XI 同学的代码，在此表示感谢。

mainMenuView.CPP

#include <gui/mainmenu_screen/mainMenuView.hpp>
#include <texts/TextKeysAndLanguages.hpp>
#include <BitmapDatabase.hpp>

mainMenuView::mainMenuView():
scrollWheel1_ItemSelectedCallback(this, &mainMenuView::scrollWheel1_ItemSelectedHandler)
{

}

void mainMenuView::setupScreen()
{
	scrollWheel1.setItemSelectedCallback(scrollWheel1_ItemSelectedCallback);
    mainMenuViewBase::setupScreen();
}

void mainMenuView::tearDownScreen()
{
    mainMenuViewBase::tearDownScreen();
}

void mainMenuView::scrollWheel1UpdateItem(CustomContainer1& item, int16_t itemIndex)
{
	item.setListElements(itemIndex);
}

void mainMenuView::scrollWheel1_ItemSelectedHandler(int16_t itemSelected)
{
	presenter->menuSelected(itemSelected);
}

model.cpp

#include <gui/model/Model.hpp>
#include <gui/model/ModelListener.hpp>

Model::Model() : modelListener(0)
{

}

void Model::tick()
{

}

void Model::SetmenuSelected(int itemSelected)
{
	Screen1Scroll1WheelItemSele = itemSelected;
}

int Model::GetScreenMainMenuScroll1WheelItem(void)
{
	return Screen1Scroll1WheelItemSele;
}

CustomContainer1.CPP

#include <gui/containers/CustomContainer1.hpp>
#include <texts/TextKeysAndLanguages.hpp>
#include <BitmapDatabase.hpp>
#include <gui_generated/containers/CustomContainer1Base.hpp>
#include <math.h>

CustomContainer1::CustomContainer1()
{

}

void CustomContainer1::initialize()
{
    CustomContainer1Base::initialize();
}

void CustomContainer1::offset(int16_t x)
{
    image1.setX(10 + x);
    textArea1.setX(110 + x);
}

void CustomContainer1::alphaAdjust(int16_t a)
{
	image1.setAlpha(a);
	textArea1.setAlpha(a);
}

4.成果展示

WeChat_20250114171933

后记

部分参考来源：

使用TouchGFX开发STM32界面应用之入门篇（四）-- 定制控件-1 - 简书

使用TouchGFX开发STM32界面应用之入门篇（四）-- 定制控件-2 - 简书

WIKI：https://support.touchgfx.com/academy/tutorials/tutorial-04

再次感谢@NATHAN_XI同学的讲解，这部分自己摸索真的很痛苦

NATHAN_XI的动态 - 哔哩哔哩