小部件和容器
本節將介紹構建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中小部件的位置是相對于其父容器而確定的，因此改變父容器的位置也會相應地移動子容器。
容器充當視窗，這意味著只有與容器幾何圖形相交的子容器部分才可見。
在下面的動畫中，您將看到容器的視窗部分是如何工作的。 首先，我們看到這個按鈕的父容器的輪廓：
充當視窗的容器