跳转到主要内容

控件和容器

本节将介绍构建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中控件的位置是相对于其父容器而确定的,因此改变父容器的位置也会相应地移动子容器。

容器充当视窗,这意味着只有与容器几何图形相交的子容器部分才可见。

在下面的动画中,您将看到容器的视窗部分是如何工作的。首先,我们看到这个按钮的父容器的轮廓:

充当视窗的容器

Further reading
您可以创建自己的容器,以满足自己可能有的任何特定需求。如需详细信息,请参阅自定义容器一节。