小部件和容器
本節將介紹構建TouchGFX應用程式時的兩個最基本概念：小部件和容器。 這是您將在整個UI開發過程中使用的兩個構建單元。 兩者都包含TouchGFX提供的預製元件，同時也足夠開放，可支援創建自訂實現。
小部件
TouchGFX and TouchGFX Designer tool supplies numerous standard widgets which users can freely use to build their UI, such as 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中小部件的位置是相對于其父容器而確定的，因此改變父容器的位置也會相應地移動子容器。
容器充當視窗，這意味著只有與容器幾何圖形相交的子容器部分才可見。
在下面的動畫中，您將看到容器的視窗部分是如何工作的。 首先，我們看到這個按鈕的父容器的輪廓：
充當視窗的容器