跳转到主要内容

教程5：创建自定义触发条件和操作

通过TouchGFX Designer，可以定义具有自定义触发条件和操作的交互组件。 应用中的每个屏幕都可能包含操作集合（这些是C++中的简单void方法），您可以从TouchGFX Designer内部和代码中调用这些操作，而自定义容器也可能有您的应用可能响应的触发条件（相当于C++中的回调）集合。

在该教程中，我们将详细介绍此功能，以探索使用它创建更简洁、动态的TouchGFX应用的可能性。

本教程不适合TouchGFX的新用户。 建议以后再学习本教程。

将自定义操作添加到屏幕​

在这一节中，我们将：

  • 新建一个包含背景方块和按钮的应用
  • 将自定义操作添加到应用
  • 在按钮被按下时使用自定义操作修改背景色

首先，用尺寸为480x272的图像（适用于STM32F746或模拟器等）新建一个空白应用，并插入一个用作背景的方块（将其命名为“background”）和一个按钮（将其命名为“button”）。 结果应类似于下图：

1

添加一个白色背景方块和一个按钮

下面，将一个自定义操作添加到屏幕。 您可以从屏幕的“属性”选项卡完成此操作，方法是选择“屏幕”并按下“操作”组中的“+”按钮（上面的图1）。 将操作命名为“setBackgroundColor”，提供诸如“设置背景色”之类的描述。 不要设置此操作的类型。

将新的自定义操作添加到屏幕

按下 F4 键生成项目代码。 This generates a virtual method in TouchGFX/generated/gui_generated/include/gui_generated/screen1_screen/Screen1ViewBase.hpp called setBackgroundColor().

您可以通过在Screen1View.cpp文件的用户代码中重写该方法或者通过TouchGFX 设计器创建交互来为该方法添加功能。 我们来尝试后者，转至屏幕的“交互”选项卡，并添加在点击按钮时调用新方法的交互。

在点击按钮时调用setBackgroundColor

现在，我们必须指定在调用setBackgroundColor时实际发生的操作。 为此，在另一个交互中使用新的自定义操作 (1) 作为触发条件。 首先，在触发条件“调用setBackgroundColor”发生时，使用操作“修改方块色彩”(2) 将背景方块的色彩简单地设置为黑色。

12

实现自定义操作setBackgroundColor的功能

现在，运行模拟器并按下按钮；背景应变为黑色。 您已成功创建第一个自定义操作。

按下按钮将背景变为黑色

You can now see the generated code for the method setBackgroundColor in TouchGFX/generated/gui_generated/src/screen1_screen/Screen1ViewBase.cpp.

将值传递给自定义操作​

本节将在刚创建的应用的基础上，基于自定义操作的概念进行如下拓展：

  • 将参数添加到setBackgroundColor操作
  • 将随机色传递到setBackgroundColor
  • 在按下按钮时将背景修改为随机色

为了让该应用更有趣，我们将一个值传递到setBackgroundColor 自定义操作，使之变得更动态。

转至屏幕的“交互”选项卡，为操作按下x按钮删除两个当前操作，然后我们将设置新操作。

转至屏幕的“属性”选项卡，找到自定义操作setBackgroundColor ，取消选中类型复选框并输入“colortype”，这将是我们要传递给操作的参数类型（colortype是用于描述色彩的自带TouchGFX类型）。 不能命名参数，它的名称将是“value”。

为自定义操作设置参数

下面来设置交互，它使用我们新添加的参数值。 我们使用触发条件“调用setBackgroundColor”和操作“执行C++代码”进行设置。 我们要用新参数设置背景方块的色彩，因此要执行的代码应是：

background.setColor(value);
background.invalidate();

第二行强制用新色彩重绘背景。

使用传递的值修改背景色彩

请注意，触发条件显示了参数的名称和类型“value : colortype”。

下面，我们将设置在点击按钮时实际调用setBackgroundColor的交互。 添加另一个具有触发条件“点击按钮”和操作“调用Screen1 setBackgroundColor”的交互，请注意，值属性也显示了它的预期类型。 我们将在stdlib.h中利用随机化方法rand()将随机色传递给setBackgroundColor，以便获取三个0至255之间的随机数并用它们指定色彩。 为了访问rand()，我们需要将其包含在应用中。 还可以从TouchGFX Designer内部为屏幕和自定义容器提供您自己的includes函数，在本例中我们需要这样做。 转至屏幕的“属性”选项卡，在“INCLUDES”组下面输入：

#include <stdlib.h>

包含stdlib以便访问rand()

下面，对于值属性，我们将输入 (1)：

touchgfx::Color::getColorFromRGB(rand()%256, rand()%256, rand()%256)
1

在点击按钮时传递随机色彩值

现在，运行模拟器并尝试多次按下按钮。 您应看到背景变为随机色。

点击按钮时得到的随机色

在自定义容器中使用自定义触发条件​

最后，自定义容器还可以定义自定义触发条件集，在本节中，我们将基于应用进行如下拓展：

  • 创建新的名为ColorEmitter的自定义容器
  • 将名为“colorChanged”的自定义触发条件添加到ColorEmitter
  • 在按下按钮时用触发条件colorChanged将随机色传递给应用
  • 在屏幕中设置交互以监听触发条件colorChanged
  • 使用ColorEmitter发送的任何色彩设置背景方块的色彩

下面，我们尝试用自定义触发条件来指示应用中的一些事件。 我们不使用将随机色传递给setBackgroundColor的按钮交互，而是尝试让自定义容器将随机色发送到屏幕，然后让屏幕使用自定义容器传递的任何值。 这会是一个简单的示例，应用中的不同UI组件相互通信，使应用具有更小的体积和更高的可复用性。

首先，我们新建一个自定义容器并将其命名为“ColorEmitter”。 插入一个按钮并将其命名为“button”。 结果应类似于下图：

自定义容器ColorEmitter

下面，我们要让ColorEmitter在按钮被点击时发送随机色。 然后，任何对象都可以决定监听此类发送并使用此色彩。 在本例中，我们只模仿之前的行为，使用此色彩设置背景色。

为了让自定义容器发送颜色，首先需要创建自定义触发条件。 转至自定义容器的“属性”选项卡，按下“触发条件”组中的“+”按钮 (1)。 将触发条件命名为“colorChanged”，输入说明“色彩变化”，并将类型设置为“colortype”。

1

将自定义触发条件添加到自定义容器

然后，转至自定义容器的“交互”选项卡并新建一个交互。 使用触发条件“点击按钮”和操作“发送colorChanged”。 现在我们要发送随机色，对值属性使用与之前相同的代码：

touchgfx::Color::getColorFromRGB(rand()%256, rand()%256, rand()%256)

发送自定义触发条件

但是，由于自定义容器中未自动包含touchgfx::Color命名空间，因此最初并不起作用。 与以前一样，我们将为自定义容器提供自己的include函数。 转至自定义容器的“属性”选项卡，在“Includes”组(1)下面输入：

#include <touchgfx/Color.hpp>
1

提供额外的includes函数

现在，我们要用新建的自定义容器ColorEmitter替代旧按钮。 选择Screen1并删除这里的按钮。 这应当会在使用此按钮的交互中生成域错误，因此还需要删除此交互，我们将为ColorEmitter创建新的交互。 现在，在Screen1上插入ColorEmitter实例，然后在Screen1上新建一个交互。 对于触发条件，您应当会看到一个名为“ColorEmitter colorChanged发生”的选项。 选择该选项，并为操作选择“调用Screen1 setBackgroundColor”。 现在，我们需使用colorChanged发送的值，其名称始终为“value”（如上文所述）。 因此，在值属性中输入“value”。

设置交互以监测colorChanged自定义触发条件

现在，运行模拟器并再次尝试按下按钮。 应用应显示相同行为，背景变为随机色。 现在，我们不仅在屏幕上实现了所有功能，还成功地在屏幕与它的一些较小的可复用组件（即简单的ColorEmitter）之间建立了通信。

点击按钮时得到的随机色