F429I-DISC1体验报告(5) 滚动菜单、语言切换的实现丨国庆开发板测评活动

[复制链接]

cm32 发布时间：2025-12-13 19:26

文章
文章封面:
文章简介:	在前几期的测评报告中，我根据测评任务完成了欢迎界面、小画板、温度界面等内容，为了将其串为一个整体，在本文中会搭建一个菜单界面，包含跳转至以上几个界面的入口。

综述

在前几期的测评报告中，我根据测评任务完成了欢迎界面、小画板、温度界面等内容，为了将其串为一个整体，我决定搭建一个菜单界面，包含跳转至以上几个界面的入口。

开发工具

TouchGFX Designer 4.26.0

Swipe Container 简介

Swipe Container 是 TouchGFX 提供的可滑动页面容器，用于在多个子界面之间实现整页切换。其核心特性包括：支持水平方向或垂直方向的滑动；自动处理拖拽距离、速度和滑动阈值；提供切换动画与边界回弹效果。开发者只需将多个页面组件加入容器，即可实现类似移动端“左右滑屏”的界面切换行为，常用于主界面分页、功能分类浏览等场景。

Scrollable Container 简介

Scrollable Container 是用于承载可滚动内容区域的容器，可在固定显示窗口中展示超出尺寸的内容。它支持垂直或水平滚动，自动处理拖拽、减速、边界限制等行为，可用于放置长列表、图文混排面板或超大控件。Scrollable Container 仅移动其内部内容，不进行整页切换，适合实现“列表浏览”“长文本查看”“图像滚动”等界面布局需求。

Slide Menu 简介

Slide Menu 是一种侧边滑入式的界面控件，用于在主界面上临时显示功能菜单或设置面板。其典型结构为：菜单内容位于屏幕侧边（上下左右均可），默认隐藏，仅在用户滑动手势或点击按钮时以动画方式滑入屏幕；关闭时再滑出。Slide Menu 的优势是能够在不占用主界面空间的前提下提供额外操作选项，常用于导航栏、工具栏、设置面板等场景。

GUI绘制过程

Swipe Container菜单界面

首先在前面的基础上，新建一个Screen，作为呈现目录的载体；添加一个图像和一个Swipe Container（挥动容器）；

新建多个Page，根据功能需要对他们分别重命名；

页面标识可以调整为居中朝下，更加整齐一些；

将其他窗口的预览图截图并导入PS进行透视变形，导出为PNG格式，作为素材图片，此处不对此展开描述；

在Images中添加新的图片，包括三张窗口示意图和几个图标；

在各自窗口下添加一个Scalable Image显示窗口预览图，以及一个按钮，调整好位置，显示的内容通过Swipe Container中的Pages调整：

在语言设置页中加入两个按钮，添加自己的图标；这样一个用Swipe Container实现的菜单窗口就完成了，可以通过左右挥动切换显示的内容。下面介绍用Scrollable Container实现的菜单界面。

一种更简单的菜单界面

添加一个Scrollable Container控件，在其中加入四个按钮即可，屏幕只会显示Container覆盖的区域；可以通过上下滑动来改变显示的内容。在最顶部加入一个标题Options。

新建语言

在Texts->Texts->Groups->Unsorted找到所有窗口的文本，点击加号新建对应的翻译文本，命名为Chinese，并输入对应中文文本；

在Texts->Typographies中的多种字体样式（取决于前面汉字用的哪种样式）中新建一个Chinese语言设置，选择合适的字体，并加入中文字符集；后续即可切换语言。

交互设计

菜单选项

以Swipe Container实现的菜单为例，首先是当前三个界面的跳转按钮按下时，切换到对应的页面；

在语言设置页面中，实现的不仅是更改语言，还有切换回首页重新展示的设计：首先，按下中文/英文按钮时，设置语言为对应的语言；

其次，按下按钮时立即切换画面，到最开始的欢迎界面。

以Scrollable Container实现的菜单为例，同样的，跳转到页面的按钮只需要加入上述切换屏幕的逻辑；语言切换因为只用了一个按钮，所以需要写一些逻辑来完善它的语言切换功能：

通过状态量languageState来判断当前语言是中文还是英文，0表示是英文，1表示是中文；在按下按钮的时候，0需要切换成中文，而1需要切换成英文。languageState在Model中声明，通过Presenter在Base中读取或修改：

Model.hpp

//Model.hpp
class Model
{
public:
    //...保持原内容
  //新增两个函数接口
    int getLanguageState() const;
    void setLanguageState(int s);

protected:
    //...保持原内容
    //新增变量languageState
    int languageState;
};

Model.cpp

//Model.cpp
Model::Model() : modelListener(0),languageState(0)  //构造函数初始化参数的数值
{

}

void Model::setLanguageState(int s)
{
  languageState = s;
}

int Model::getLanguageState() const
{
    return languageState;
}

同时在OptionScreen2Presenter.hpp中加入函数声明

void LanguageSetState(int8_t State);

int8_t LanguageGetState();

主要是为了实现Model和ViewBase之间参数的传输。

在OptionScreen2Presenter.cpp中定义：

//OptionScreen2Presenter.cpp
void OptionScreen2Presenter::LanguageSetState(int8_t State){
   model->setLanguageState(State);
}

int8_t OptionScreen2Presenter::LanguageGetState(){
  return model->getLanguageState();
}

最后在LanguageBtn的回调中写入以下代码：

//通过读写LanguageState变量，判断当前系统所需要使用的语言
if(presenter->LanguageGetState()==0){
Texts::setLanguage(CHINESE);
invalidate();
presenter->LanguageSetState(1);
}
else{
Texts::setLanguage(GB);
invalidate();
presenter->LanguageSetState(0);
}