跳轉到主要內容

可滾動容器

可滾動容器(Scrollable Container)屬於容器,允許垂直和水平滾動其內容。

在模擬器中運行的可滾動容器

小部件組

可滾動容器位於TouchGFX Designer中的Containers小部件組中。

TouchGFX Designer中的可滾動容器

屬性

TouchGFX Designer中可滾動容器的屬性。

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

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

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

可見 指定小部件的可見性。 使小部件不可見還將禁用與小部件之間通過螢幕進行的交互。
Scrolling啟用水平滾動指定是否啟用水平滾動。

啟用垂直捲動指定是否啟用垂直捲動。

顯示捲軸指定捲軸是否應始終可見。

滾動時顯示捲軸指定捲軸是否僅應在內容進行滾動時可見。
如果“顯示捲軸”已啟用,則將忽略此選項。

捲軸顏色指定捲軸的顏色。

捲軸Alpha 指定捲軸的透明度。
小部件Alpha值的範圍是0到255。 0為完全透明,255為實心。
Mixin可拖動 指定在運行時小部件是否可拖動。

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

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

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

交互

下面的部分介紹了可滾動容器支援的操作和觸發條件。

操作

小部件特有的操作說明
Enable horizontal scroll調整小部件的寬度和高度。
標準小部件操作說明
Move widget隨時間的推移將小部件移動到新位置。
Hide widget隱藏小部件(將可見性設置為false)。
Show widget使隱藏的小部件可見(將可見性設置為true)。

觸發條件

可滾動容器不會產生任何觸發條件。

性能

可滾動容器為Container類型,除了捲軸渲染之外,預設情況下不會出現在繪圖鏈中。 因此,性能主要取決於子部件的繪圖性能。

更多關於繪圖性能的常規資訊,請閱讀常規UI元件性能部分。

範例

生成程式碼

在生成的視圖基類的程式碼中,可以查看TouchGFX Designer是如何創建可滾動容器的。

Screen1ViewBase.cpp
#include <gui_generated/main_screen/mainViewBase.hpp>
#include "BitmapDatabase.hpp"
#include <touchgfx/Color.hpp>

mainViewBase::mainViewBase()
{
scrollableContainer.setPosition(115, 11, 250, 250);
scrollableContainer.enableHorizontalScroll(false);
scrollableContainer.setScrollbarsColor(touchgfx::Color::getColorFrom24BitRGB(0, 0, 0));
scrollableContainer.setScrollbarsPermanentlyVisible();
scrollableContainer.setScrollbarsVisible(false);
scrollableContainer.add(<widget_name>); //add a widget as child

add(scrollableContainer);
}

void mainViewBase::setupScreen()
{

}
Tip
您可以在用戶程式碼中使用ScrollableContainer類中的這些函數和其他可用函數。 如果更改小部件的外觀,請必須呼叫 scrollableContainer.invalidate() 以強制重繪。

TouchGFX Designer範例

如需進一步瞭解可滾動容器,請嘗試在TouchGFX Designer中使用下列UI範本之一創建新應用:

TouchGFX Designer中的可滾動容器UI範本

API參考