跳轉到主要內容

文字區域

文字區域在螢幕上顯示文字。 文字區域的文字在大小、顏色、自訂字體、動態文字等方面是完全可以配置的。 如需詳細瞭解如何在TouchGFX Designer中處理文字,請閱讀文字與字體一文。

在模擬器中運行的文字區域

小部件組

文字區域位於TouchGFX Designer中的Miscellaneous小部件組中。

TouchGFX Designer中的文字區域

屬性

TouchGFX Designer中文字區域的屬性。

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

WH指定小部件的寬度和高度。

自動調整大小指定是否根據文字輸入自動設置小部件的大小。

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

可見指定小部件的可見性。
使小部件不可見還將禁用與小部件之間通過螢幕進行的交互。.
Text一次性使用資源指定文字的類型:唯一的或來自已知資源。

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

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

最多可以為動態文字輸入創建兩個萬用字元,表示為'<tag>' ,其中‘tag’可以是任意字串。
Appearance顏色指定所顯示文字的顏色。

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

行距指定行之間的間距。

文字旋轉設置文字的旋轉角度。
Mixin可拖動 指定在運行時小部件是否可拖動。

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

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

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

交互

下面的部分介紹了文字區域支援的操作和觸發條件。

操作

小部件特有的操作說明
Set text設置小部件的文字。
Resize widget調整小部件的尺寸。
Set wildcard設置小部件的萬用字元。 萬用字元必須已經添加到文字區域,才能進行此操作。
標準小部件操作說明
Move widget隨時間的推移將小部件移動到新位置。
Fade widget隨時間的推移改變小部件的Alpha值。
Hide widget隱藏小部件(將可見性設置為false)。
Show widget使隱藏的小部件可見(將可見性設置為true)。

觸發條件

文字區域不會產生任何觸發條件。

性能

文字區域依賴于文字繪製。 文字繪製非常類似于普通的圖像繪製(儘管由於文字字元的性質,會發生大量的alpha混合)。 因此,大部分平臺會將文字區域視為非常快速的小部件。

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

範例

生成程式碼

在為View基類生成的程式碼中,可以看到TouchGFX Designer如何設置按鈕。

Screen1ViewBase.hpp
touchgfx::TextAreaWithOneWildcard textArea;

/*
* Wildcard Buffers
*/
static const uint16_t TEXTAREA_SIZE = 20;
touchgfx::Unicode::UnicodeChar textAreaBuffer[TEXTAREA_SIZE];
Screen1ViewBase.cpp
textArea.setPosition(40, 111, 400, 50);
textArea.setColor(touchgfx::Color::getColorFrom24BitRGB(60, 180, 230));
textArea.setLinespacing(0);
Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%s", touchgfx::TypedText(T_TOUCHGFXID).getText());
textArea.setWildcard(textAreaBuffer);
textArea.setTypedText(touchgfx::TypedText(T_SINGLEUSEID1));
Tip
您可以在用戶程式碼中使用TextArea類中的這些函數和其他可用函數。 如果更改了小部件的外觀,請必須呼叫 textArea.invalidate() 以強制重繪。

用戶程式碼

下面的範例演示了如何實handleTickEvent()函數,以便在運行時使用萬用字元更改文字。 運行這段程式碼將創建本節開頭所示的應用

Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
virtual ~Screen1View() {}
virtual void setupScreen();
virtual void tearDownScreen();

virtual void handleTickEvent();
protected:
uint8_t counter;
bool flag;
};
Screen1View.cpp
Screen1View::Screen1View():
counter(0),
flag(true)
{}

void Screen1View::handleTickEvent()
{
counter++;
if(counter%120 == 0) // every 2s
{
if(flag)
{
Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%s", touchgfx::TypedText(T_STMICROID).getText());
flag = false;
}
else
{
Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%s", touchgfx::TypedText(T_TOUCHGFXID).getText());
flag = true;
}
textArea.invalidate();
counter = 0;
}
}

TouchGFX Designer範例

如需進一步瞭解文字區域,請嘗試在TouchGFX Designer中使用下列範例之一創建新應用:

TouchGFX Designer中的文字範例

TouchGFX Designer中的阿拉伯文字範例

API參考