跳轉到主要內容

帶標籤的按鈕

TouchGFX中帶標籤的按鈕(Button With Label)是一種感應觸控事件的小部件,能夠在帶標籤的按鈕被釋放時發送callback。 每種狀態(按下和釋放)都有相關聯的圖像和文字。

帶標籤的按鈕可通過靈活按鈕進行複製。 靈活按鈕是一種可配置性更高的按鈕,為了獲得靈活性而需要多佔用一些RAM。

在模擬器中運行的帶標籤的按鈕(按下狀態)

小部件組

帶標籤的按鈕可以在TouchGFX Designer中的“Buttons”小部件組中找到。

TouchGFX Designer中的帶標籤的按鈕

屬性

下面幾節將描述帶標籤的按鈕的屬性。

屬性組屬性說明
Name小部件的名稱Name是TouchGFX Designer和程式碼中使用的唯一識別碼
LocationXY 指定小部件左上角相對于其父的位置。

WH指定小部件的寬度和高度。
帶標籤的按鈕的尺寸取決於所選圖像的尺寸。

鎖定指定小部件是否應鎖定為其當前的X、Y、W和H。
如果鎖定小部件,還會禁止通過螢幕與小部件進行交互。

可見 指定小部件的可見性。
如果將小部件標記為不可見,還會禁止通過螢幕與小部件進行交互。
Text一次性使用資源 指定文字的類型:唯一的或來自已知資源。

如果選擇一次性使用:
文字 指定要顯示的文字內容。
排版 指定文字的格式。
對齊指定文字相對於小部件的水準對齊方式。

如果選擇資源:
資源ID 指定要從中檢索文字的資源。

如需詳細瞭解關於文字配置的資訊,請參閱 “文字與字體” 一節。
Text Appearance釋放顏色按下顏色 指定處於按下和釋放狀態時的文字顏色。

Alpha 定小部件的透明度。
小部件Alpha值的範圍是0到255。 0表示完全透明,255表示純色。

文字旋轉指定文字的旋轉角度。 有四個可能的角度:0、90、180和270度。
Style樣式 指定小部件的預定義設置,用於將所選屬性設為預定義的值。
這些樣式包含可免費使用的圖像
Image釋放圖像按住圖像 指定分配給按下和釋放狀態的來自Designer皮膚庫或Project資料夾的圖像。
Mixin可拖動 指定在運行時小部件是否可拖動。

ClickListener 指定小部件被點擊時是否會呼叫callback函數。

FadeAnimator 指定小部件是否可繪製其 Alpha 值變化的動畫。

MoveAnimator 指定小部件是否可繪製 XY 值變化的動畫。

交互

下面幾節將描述帶標籤的按鈕支援的操作和觸發條件。

操作

特定小部件操作說明
Change button label colors修改標籤的顏色。
標準小部件操作說明
Move widget隨時間的推移將小部件移動到新位置。
Fade widget隨時間的推移改變小部件的Alpha值。
Hide widget隱藏小部件(將可見性設置為false)。
Show widget使隱藏的小部件可見(將可見性設置為true)。

觸發條件

觸發條件說明
點擊按鈕帶標籤的按鈕被點擊。

性能

帶標籤的按鈕包含兩幅圖像和文字,並依賴于圖像和文字繪製。 文字繪製與常規的圖像繪製十分相似(儘管由於文字字元的性質,存在大量透明度混合)。 因此,在大多數平臺上,帶標籤的按鈕都被視為快速執行的小部件。

關於文字繪製性能的更多資訊,請閱讀通用UI元件性能一節。

範例

生成程式碼

在為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::getColorFrom24BitRGB(255, 255, 255));
buttonWithLabelName.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(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參考