跳转到主要内容

控件和容器

本节将介绍构建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
您可以创建自己的容器,以满足自己可能有的任何特定需求。 如需详细信息,请参阅自定义容器一节。