TouchGFX界面开发 | 按钮控件应用示例

news2024/11/26 4:37:28

按钮控件应用示例

按钮是最常见的部件之一，有了按钮就可以点击，从而响应事件，达到人机交互的目的。TouchGFX Designer内置了七种按钮部件：

下压按钮：能够在被释放时发送回调，按下和释放状态都关联了图像
标签按钮：能够在被释放时发送回调，按下和释放状态都关联了图像和文本
图标按钮：能够在被释放时发送回调，按下和释放状态都关联了图像和图标
开关按钮：能够在被点击时发送回调，在被点击时会掉换两张位图，以模仿两种状态之间的切换
单选按钮：能够在被点击时发送回调，其包含四幅图像，对应于按下或释放状态下的选中或未选中按钮
重复按钮：能够在被点击时发送回调，按钮立即激活其按下操作，然后在给定延迟后激活，然后在某个时间间隔后重复激活
灵活按钮：能够在被点击时发送回调，可包含最多4个视觉元素：BoxWithBorder、Icon、Text和Image

本文以下压按钮（Button）为例，介绍TouchGFX按钮控件的使用（其余按钮使用方法类似），将实现如下视频中的效果：

在这里插入图片描述

本文示例基于于STM32F429IGT6 + RGB (800 * 480)硬件平台，提前移植好了TouchGFX，并添加了触摸驱动。详细可参考使用STM32CubeMX移植TouchGFX 和添加触摸屏驱动这两篇文章的介绍

一、TouchGFX Designer界面布局

打开Keil工程中，TouchGFX文件夹里的TouchGFX Designer软件

添加图片资源

在这里插入图片描述

主界面中添加背景图、计数器背景图、添加两个按钮并配置按压显示图片

在这里插入图片描述

添加文本区域控件，用来显示数字；可以为动态文本输入创建两个通配符，表示为< tag >，其中‘tag’可以是任意字符串，这里创建了一个通配符 < d >，通配符设置里可以配置初始值

在这里插入图片描述

若要显示负数，需要在Text选项下设置字体参数，添加通配符号“-”和通配符范围，否则负号和数字不能显示

在这里插入图片描述

添加交互动作：对两个按钮添加交互动作，按钮被点击时，调用虚函数

在这里插入图片描述

点击Generate Code生成TouchGFX代码

二、MKD-ARM Keil中添加用户代码

TouchGFX生成代码后，两个按钮点击时调用的虚函数会自动生成，并位于类MainScreenViewBase的公共部分。但是生成的方法具有空实现，需要我们自已重写。
在这里插入图片描述

在MainScreenView.hpp头文件中增加虚方法声明，并定义一个变量用于计数

class MainScreenView : public MainScreenViewBase
{
public:
    MainScreenView();
    virtual ~MainScreenView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
	virtual void increaseValue(); 	//添加虚方法声明
	virtual void decreaseValue();	//添加虚方法声明
protected:
	int8_t count;	//定义变量用于计数		
};

在这里插入图片描述

在MainScreenView.cpp中实现虚方法

void MainScreenView::increaseValue()
{
	count++;
	Unicode::snprintf(countTxtBuffer,COUNTTXT_SIZE,"%d",count);
	countTxt.invalidate();

}

void MainScreenView::decreaseValue()
{
	count--;
	Unicode::snprintf(countTxtBuffer,COUNTTXT_SIZE,"%d",count);
	countTxt.invalidate();
}