跳转到主要内容

带标签的按钮

TouchGFX中带标签的按钮是一种感应触控事件的控件,能够在带标签的按钮被释放时发送回调。 每种状态(按下和释放)都关联了图像和文本。

带标签的按钮可通过灵活按钮进行复制。 灵活按钮是一种可配置性更高的按钮,为了获得灵活性而需要多占用一些RAM。

在模拟器中运行的带标签的按钮(按下状态)

控件组

带标签的按钮可以在TouchGFX Designer中的“按钮”控件组中找到。

TouchGFX Designer中的带标签的按钮

属性

下面几节将描述带标签的按钮的属性。

属性组属性说明
名称控件的名称名称是TouchGFX Designer和代码中使用的唯一标识符
位置XY 指定控件左上角相对于其父的位置。

WH 指定控件的宽度和高度。
带标签的按钮的尺寸取决于所选图像的尺寸。

锁定指定控件是否应锁定为其当前的X、Y、W和H。
如果锁定控件,还会禁止通过屏幕与控件进行交互。

可见 指定控件的可见性。
如果将控件标记为不可见,还会禁止通过屏幕与控件进行交互。
文本ID指定使用的文本。 如果控件使用自动生成的文本,ID将显示“自动生成”。.

翻译指定要显示的文本内容。

字体排印 指定文本的格式。

对齐 指定文本的水平对齐方式。

如需详细了解关于文本配置的信息,请参阅“文本与字体”一节。
文本外观释放颜色按下颜色 指定处于按下和释放状态时的文本颜色。

Alpha 定控件的透明度。
控件Alpha值的范围是0到255。 0表示完全透明,255表示不透明。

文本旋转指定文本的旋转角度。 有四个可能的角度:0、90、80和270度。
样式样式 指定控件的预定义设置,用于将所选属性设为预定义的值。
这些样式包含可免费使用的图像
图像释放图像按住图像 指定分配给按下和释放状态的来自Designer皮肤库或Project文件夹的图像。
Mixin可拖动 指定在运行时控件是否可拖动。

ClickListener 指定控件被点击时是否会调用回调函数。

FadeAnimator 指定控件是否可绘制其 Alpha 值变化的动画。

MoveAnimator 指定控件是否可绘制 XY 值变化的动画。

交互

下面几节将描述带标签的按钮支持的操作和触发条件。

操作

特定控件动作说明
修改按钮标签颜色修改标签的颜色。
标准控件操作说明
移动控件随时间的推移将控件移动到新位置。
渐隐控件随时间的推移改变控件的Alpha值。
隐藏控件隐藏控件(将可见性设置为false)。
显示控件使隐藏的控件可见(将可见性设置为true)。

触发条件

触发条件说明
点击按钮带标签的按钮被点击。

性能

带标签的按钮包含两幅图像和文本,并依赖于图像和文本绘制。 文本绘制与常规的图像绘制十分相似(尽管由于文本字符的性质,存在大量透明度混合)。 因此,在大多数平台上,带标签的按钮都被视为快速执行的控件。

关于文本绘制性能的更多信息,请阅读通用UI组件性能一节。

Examples

生成代码

在为View基类生成的代码中,可以看到TouchGFX Designer如何设置带标签的按钮。

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <texts/TextKeysAndLanguages.hpp>
#include <touchgfx/Color.hpp>

Screen1ViewBase::Screen1ViewBase() :
buttonCallback(this, &Screen1ViewBase::buttonCallbackHandler)
{
buttonWithLabelName.setXY(155, 106);
buttonWithLabelName.setBitmaps(touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID), touchgfx::Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
buttonWithLabelName.setLabelText(touchgfx::TypedText(T_SINGLEUSEID1));
buttonWithLabelName.setLabelColor(touchgfx::Color::getColorFromRGB(255, 255, 255));
buttonWithLabelName.setLabelColorPressed(touchgfx::Color::getColorFromRGB(255, 255, 255));
buttonWithLabelName.setLabelRotation(TEXT_ROTATE_0);
buttonWithLabelName.setAction(buttonCallback);

add(buttonWithLabelName);
}

void Screen1ViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
if (&src == &buttonWithLabelName)
{
//InteractionName
//When buttonName clicked calls the new virtual function "functionName()" set by the user
functionName();
}
}
Tip
您可以在用户代码中使用ButtonWithLabel类中的这些函数和其他可用函数。 如果修改了控件的外观,记得调用 buttonWithLabelName.invalidate() 以强制重绘。

TouchGFX Designer示例

为了进一步探索带标签的按钮,尝试在TouchGFX Designer中用以下UI模板新建应用:

TouchGFX Designer中的自定义触发操作示例UI模板

TouchGFX Designer中的泳池演示UI模板

API参考