跳转到主要内容

控件和容器

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

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

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

充当视窗的容器

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