小部件和容器
本節將介紹構建TouchGFX應用程式時的兩個最基本概念:小部件和容器。 這是您將在整個UI開發過程中使用的兩個構建單元。 兩者都包含TouchGFX提供的預製元件,同時也足夠開放,可支援創建自訂實現。
小部件
TouchGFX和TouchGFX Designer工具提供了許多標準小部件,用戶可以自由地使用這些小部件來構建自己的UI,例如Text Area, Button and Texture Mapper. 但在基本層面上,TouchGFX中的小部件只是一個抽象的定義,可以在螢幕上繪製,也可以與之交互。
有了TouchGFX Designer,用戶可以將任何想要的小部件添加到螢幕上,並使用所提供的特定於每個小部件的屬性進行定制。 還可以通過使用TouchGFX提供的不同類型的容器對小部件進行分組。
您也可以在用戶程式碼中添加小部件,方法是使用add(widget_instance_name);
函數,或將小部件添加到容器中,方法是使用容器添加函數,例如myContainer.add(widget_instance_name);
。 添加小部件的順序將決定Z軸上的順序。 最後添加的小部件將出現在螢幕的最前面。
小部件的座標總是相對于其父節點,即根容器(螢幕)或容器。
Further reading
容器
容器是TouchGFX中的一種元件,可以包含子節點(比如小部件和其他容器)。
在TouchGFX Designer中,可以在Widgets(小部件)選項卡中的containers(容器)類別下找到容器,向容器中添加小部件的方法將小部件拖放到樹狀檢視中的容器中。
子容器在Z軸上的順序由向容器中添加子容器時的順序決定 - 最後添加的子容器將顯示在螢幕的最前面。
由於TouchGFX中小部件的位置是相對于其父容器而確定的,因此改變父容器的位置也會相應地移動子容器。
容器充當視窗,這意味著只有與容器幾何圖形相交的子容器部分才可見。
在下面的動畫中,您將看到容器的視窗部分是如何工作的。 首先,我們看到這個按鈕的父容器的輪廓: