跳轉到主要內容

滑動選單

TouchGFX中的滑動選單(Slide Menu)是由內部容器、圖像和可選按鈕構成的專門化的容器，可以動畫形式顯示收起和展開狀態的變化過程。

在模擬器中運行的滑動選單

小部件組​

滑動選單位於TouchGFX Designer中的Containers小部件組中。

TouchGFX Designer中的滑動選單

屬性​

下面的部分介紹了滑動選單的屬性。

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

W 和H 指定小部件的寬度和高度。
滑動菜單的大小是由其背景和按鈕圖像的大小決定的。

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

可見 指定小部件的可見性。
如果將小部件標記為不可見，還會禁止通過螢幕與小部件進行交互。
Expanding Direction展開方向指定滑動菜單的展開方向。
State狀態指定滑動功能表的初始狀態。

收起：可見像素數指定狀態為收起時應可見的像素數。

展開：隱藏像素數 指定狀態為展開時應隱藏的像素數。

展開超時指定從展開狀態自動恢復到收起狀態之前的時長。
Background背景圖像 指定用作背景的圖像。

背景位置 指定背景圖像相對於小部件座標的x、y座標。
Button使用按鈕 指定是否使用按鈕來控制小部件的狀態。

釋放圖像指定用於按鈕已發佈狀態的圖像。

按下圖像指定用於按鈕已按下狀態的圖像。

按鈕位置指定按鈕相對於小部件座標的x、y座標。
Use Button緩動和緩動選項指定動畫使用的緩動方程。

持續時間指定動畫應持續的時長。
Mixin可拖動 指定在運行時小部件是否可拖動。

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

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

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

交互​

下面的部分介紹了滑動選單支援的操作和觸發條件。

操作​

小部件特有的操作說明
Change State of Slide Menu將滑動功能表的狀態改為收起或展開
Reset Timer of Slide Menu重定計時器會自動將滑動功能表狀態恢復為收起狀態
標準小部件操作說明
Move widget隨時間的推移將小部件移動到新位置。
Hide widget隱藏小部件（將可見性設置為false）。
Show widget使隱藏的小部件可見（將可見性設置為true）。

觸發條件​

觸發條件說明
滑動菜單動畫結束從一種狀態變為另一種狀態的滑動功能表動畫已結束。
滑動功能表狀態已更改滑動功能表的狀態已更改。

性能​

滑動選單為Container類型，預設情況下不會出現在繪圖鏈中。 因此，性能主要取決於子部件的繪圖性能。

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

範例​

生成程式碼​

在生成的視圖基類的程式碼中，可以查看TouchGFX Designer是如何創建滑動選單的。

Screen1ViewBase.cpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include "BitmapDatabase.hpp"

Screen1ViewBase::Screen1ViewBase()
{
    slideMenuName.setup(touchgfx::SlideMenu::EAST,
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BACKGROUND_ID),
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
        touchgfx::Bitmap(BITMAP_LEFT_SLIDE_MENU_BUTTON_ID),
        0, 0, 49, 111);
    slideMenuName.setState(touchgfx::SlideMenu::COLLAPSED);
    slideMenuName.setVisiblePixelsWhenCollapsed(24);
    slideMenuName.setHiddenPixelsWhenExpanded(0);
    slideMenuName.setAnimationEasingEquation(touchgfx::EasingEquations::circEaseInOut);
    slideMenuName.setAnimationDuration(18);
    slideMenuName.setExpandedStateTimeout(180);
    slideMenuName.setXY(0, 0);

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

TouchGFX Designer範例​

如需進一步瞭解滑動功能表，請嘗試在TouchGFX Designer中使用以下UI範本創建新應用：

TouchGFX Designer中的滑動選單UI範本

API參考​

Further reading
  • SlideMenu類的API參考