跳转到主要内容

位置和大小

普通TouchGFX应用程序的大部分UI设置可用TouchGFX设计器创建，但通常还需要手动编写一些内容。 例如，制作更多动画或创建依赖于用户事件或配置数据的控件动态设置。

当您开始这项任务时，有必要了解一些类别中的有用方法。

TouchGFX框架中的所有控件均为Drawable类的子类。 该类别包含控制大小和位置的一般方法。

控件层次结构（部分）

您构建了许多控件对象实例的用户界面。 这些对象作为成员添加到视图子类中。 视图类是屏幕类的子类。

屏幕层次结构

屏幕类包含一个容器成员。 称为根容器。 根容器初始化为从(0，0)开始，填充整个显示区域(width = HAL::DISPLAY_WIDTH，height = HAL::DISPLAY_HEIGHT)。

添加控件​

通过在视图类中创建成员，可将控件添加到视图中。 这里我们添加了一个名为myBox的方框:

Screen1View.hpp
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <touchgfx/widgets/Box.hpp>

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
protected:
    Box myBox;
};

要在代码中使用该方框，则必须包含Box.hpp，除非它已经包含在基础类头文件中。

要绘制方框控件，必须将其添加到场景图(屏幕内的控件树)。

控件树

可通过添加函数完成。 通常在设置屏幕中:

Screen1View.cpp
#include <gui/screen1_screen/Screen1View.hpp>

Screen1View::Screen1View()
{
}

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
    add(myBox);
}

屏幕上的添加方法调用根容器上的添加:

void add(Drawable& d)
{
    container.add(d);
}

如果您的屏幕中有另一个容器，可以通过调用该容器上的添加向其中添加控件:

void Screen1View::setupScreen()
{
    ...
    myContainer.add(myBox);
}

设置大小和位置​

大多数控件的默认位置为(0，0)，宽度和高度为零。 这意味着几乎总是需要设置控件的大小和位置。

设置位置的基本方法是设置XY法:

   myBox.setXY(10, 10); // 将myBox放在x=10, y=10处

宽度和高度可以用设置宽高法设置。 或设置宽、设置高法：

   myBox.setWidthHeight(200, 100); // myBox宽200，高100

两者可与设置位置法结合使用:

   myBox.setPosition(10, 10, 200, 100); // 将myBox放在x=10，y=10处，宽200，高100

辅助方法​

drawable类有辅助方法，可协助设置drawable:

Drawable类的API参考

扩展​

Drawable::expand()法使一个控件(一个Drawable)的大小与其父部件相同。 可以设置边距。 控件放在左上角(加上边距):

   myBox.expand(10); // 将myBox放在x=10, y=10处，除了10像素的边距之外，大小与父级相同

居中​

Drawable::centerX()), Drawable::centerY()), Drawable::center() 法将控件放在其父控件内（水平、垂直、水平和垂直）：

   myBox.centerX(); // 将myBox在其父级中水平居中

无效​

改变一个控件的大小时，必须使需要重绘的屏幕部分无效。 如果要将控件变大，只需让新尺寸无效。 如果要将控件变小，则应在更改尺寸之前使其无效:

   // 扩大方框，扩大后使其无效，以便重新绘制新尺寸
   myBox.expand(10);
   myBox.invalidate();
   ...
   // 缩小方框，缩小之前使其无效，以便重新绘制背景
   myBox.invalidate();
   myBox.myBox.setPosition(10, 10, 200, 100);

请记住，使控件无效时，屏幕上被控件占据的区域(当时)将在下一个绘制阶段重新绘制。 这意味着如果使一个控件无效，然后让它缩小，现在可见的其他控件(在后面)的部分将被重绘，不仅是无效的控件。

移动​

Drawable类有一个 Drawable::moveRelative(int16_t x, int16_t y) 法，可将屏幕上的控件从一个位置移动到另一个位置。 这可以用作动画的一部分，也可以仅用于重新排列用户界面的各个部分。

Drawable::moveRelative(int16_t x, int16_t y) 调用invalidate，所以我们不必如此:

    myBox.moveRelative(1, 0); // 向右移动1个像素

另一个方法是Drawable::moveTo(int16_t x, int16_t y),将控件移动到指定位置:

    myBox.moveTo(100, 100); // 从当前位置移动到100，100

此方法同样调用invalidate。