欢迎广西岑兴高速公路发展有限公司加入本网会员单位

1. 前言在使用TouchGFX 设计UI 界面时，用同一按钮的长按和短按表示不同的功能是个比较常见的实际需求。普通的Button 控件可以通过Interactions 处理一些基本的交互动作，通过下面一些简单的操作，我们可以将这个普通的Button 改造成可以根据不同的按键时间处理不同事务的多功能按钮。

2. 操作方法

（1）创建一个按钮，并在Mixins 中勾选ClickListener 功能，使Button 能够响应触控输入。

图1. Enable ClickListener

启用ClickListener Mixin 后，会更改生成的控件的声明，下面的代码表示button1 启用了ClickListener Mixin。

touchgfx::ClickListener< touchgfx::Button > button1;

（2）用户代码中实现回调

在TouchGFX Designer 中对Button 控件启用ClickListener Mixin 后，下一步是在这个Button 所在的Screen 的头文件中添加控件的Click 的回调和其回调处理函数的声明。

回调函数的声明应包含以下三点内容：要绑定的类名，此例中为Screen1View；回调来自哪个Widget，此处为Button；以及发生事件的类型ClickEvent。

Screen1View.hpp

class Screen1View : public Screen1ViewBase

{

public:

Screen1View();

virtual ~Screen1View() {} 

virtual void setupScreen(); 

virtual void tearDownScreen(); 

void ButtonClickHandler(const Button& b, const ClickEvent& e); 

protected: 

Callback<Screen1View, const Button&, const ClickEvent&> buttonClickedCallback; 

};

然后，将回调函数的声明和回调函数的处理函数绑定到视图对象。

下一步是通过setClickAction()的方法告诉Button1这个Widget，当它被按下时，去调用哪个回调函数。

最后，实现回调函数的处理函数，同时可以根据需要自行增加按钮按下和释放时的处理。

（3）添加handleTickEvent()声明和定义,用于处理计时相关逻辑，此函数以60Hz的频率被TouchGFX引擎调用。

（4）根据实际应用需求实现长按键的处理

在我们的测试例程中，实现了三秒长按键后，切换Text文本显示的功能，如下。

图2. 长按前效果

图3. 长按3S后效果

3. 总结

本文解释了如何通过ClickListener实现对按钮控件自定义功能，实际应用中大多数的Widgets以及View本身都可以通过ClickListener实现点击和释放时的自定义处理。