图形用户界面概念#

图形用户界面元素表示为 UIWidget 。图形用户界面的结构就像一棵树，每个小部件都可以有其他小部件作为子部件。

树的根是 UIManager 。UIManager将用户交互与图形用户界面连接起来。阅读更多关于 UIEvents 。

Arcade图形用户界面代码的类以UI为前缀，以便于在自动补全中识别和搜索。

UIWidget#

UIWidget 是Arcade图形用户界面的核心。小部件表示任何元素(如按钮或文本)的行为和图形表示

A UIWidget 具有以下属性

rect

X和y坐标(小部件的左下角)、宽度和高度

children

在此小部件A中呈现的子小部件 UIWidget 将不会移动其子级或调整其大小，请使用 UILayout 取而代之的是。

size_hint

两个浮点数的元组，定义它希望占用多少父空间(范围：0.0-1.0)。为了实现最大的垂直和水平扩展，请定义 size_hint 轴的值为1。

size_hint_min

两个整数的元组，定义小工具的最小大小。如果设置，则将小工具的大小更改为较小的值将使用此大小。

size_hint_max

两个整数的元组，定义小工具的最大大小。如果设置，则将小工具的大小更改为更高的值将使用此大小。

size_hint ， size_hint_min ，以及 size_hint_max 是作为小部件的附加信息的值，但不影响小部件本身。 UILayout 可以使用这些信息来放置小部件或调整小部件的大小。

渲染#

UIWidget.do_render() is called recursively if rendering was requested via UIWidget.trigger_render(). In case widgets have to request their parents to render use UIWidget.trigger_full_render()

该窗口小部件必须绘制自身和子窗口小部件 UIWidget.do_render() 。由于延迟功能，呈现不必检查任何脏变量，只要状态更改使用触发器函数。

对于可能具有透明区域的窗口小部件，它们必须请求完全渲染。

强制渲染整个图形用户界面可能会非常昂贵！

UILayout和UIWrapper#

UILayout 是小部件，保留移动子对象或调整其大小的选项。他们可能会尊重小部件的特殊属性，如 size_hint ， size_hint_min ，或 size_hint_max 。

UIWrapper 是用来包装单个子小部件以应用附加效果(如边框或周围空间)的小部件。

算法(WIP，未完全实施)#

UIManager 在实际的帧绘制之前触发布局和渲染过程。这打开了一种可能性，即只调整以适应多个变化。

中执行的步骤 UIBoxLayout ：

  1. UIBoxLayout.do_layout()

    1. 收集子项的当前大小、大小提示、大小提示最小/最大值

    2. 计算新的位置和大小

    3. 设置子项的位置和大小

  2. 递归调用 do_layout 子布局(在此之后完成 UIBoxLayout.do_layout() )

┌─────────┐          ┌────────┐                      ┌────────┐
│UIManager│          │UILayout│                      │children│
└────┬────┘          └───┬────┘                      └───┬────┘
     │   do_layout()    ┌┴┐                              │
     │─────────────────>│ │                              │
     │                  │ │                              │
     │                  │ │                              │
     │     ╔════════════╪═╪════╤═════════════════════════╪══════════════╗
     │     ║ place children    │                         │              ║
     │     ╟────────────────use size, size_hint, ...     │              ║
     │     ║            │ │ <─────────────────────────────              ║
     │     ║            │ │                              │              ║
     │     ║            │ │       set size and pos       │              ║
     │     ║            │ │ ─────────────────────────────>              ║
     │     ╚════════════╪═╪══════════════════════════════╪══════════════╝
     │                  │ │                              │
     │                  │ │                              │
     │     ╔═══════╤════╪═╪══════════════════════════════╪══════════════╗
     │     ║ LOOP  │  sub layouts                        │              ║
     │     ╟───────┘    │ │                              │              ║
     │     ║            │ │          do_layout()         │              ║
     │     ║            │ │ ─────────────────────────────>              ║
     │     ╚════════════╪═╪══════════════════════════════╪══════════════╝
     │                  └┬┘                              │
     │                   │                               │
     │<─ ─ ─ ─ ─ ─ ─ ─ ─ │                               │
┌────┴────┐          ┌───┴────┐                      ┌───┴────┐
│UIManager│          │UILayout│                      │children│
└─────────┘          └────────┘                      └────────┘

UIMixin#

Mixin类是可用于应用某些特定行为的基类。目前，可用的Mixin仍在大力开发中。

构造#

结构是小部件和布局的预定义结构，如消息框或(尚不可用)文件对话框。

可用元素#

  • UIWidget ：

    • UIFlatButton -用于简单交互的2D平面按钮(悬停、按下、释放、点击)

    • UITextureButton -带纹理的按钮(使用 arcade.load_texture() )用于简单的交互(悬停、按下、释放、点击)

    • UILabel -文本简单，支持多行，适合内容

    • UIInputText -接受用户文本输入的字段

    • UITextArea -多行可滚动文本小工具。

    • UISpriteWidget -将Sprite嵌入到图形用户界面树中

  • UILayout ：

    • UIBoxLayout -将小工具彼此并排放置(垂直或水平)

  • UIWrapper ：

    • UIPadding -在小工具周围添加空间

    • UIBorder -在小工具周围添加边框

    • UIAnchorWidget -用于在屏幕上定位相对的UIWidget

  • 构造

    • UIMessageBox -带有消息文本和几个按钮的弹出框。

  • 混合食品

    • UIDraggableMixin -使小工具可拖动。

    • UIMouseFilterMixin -捕获在小工具边界内发生的鼠标事件。

    • UIWindowLikeMixin -组合 UIDraggableMixin 和 UIMouseFilterMixin 。

UIEvents#

UIEEvent是全类型的数据类，提供有关影响UI的事件的信息。事件自上而下传递给每个 UIWidget 由UIManager执行。

常规的pyglet窗口事件由UIManager转换为UIEEvent，并通过DISPATCH_EVENT传递给 on_event 回电。

小部件特定的UIE事件(如UIOnClick)通过“on_Event”调度，然后作为特定的事件类型(如‘on_Click’)调度

  • UIEvent -所有事件的基类

  • UIMouseEvent -鼠标相关事件的基类

    • UIMouseMovementEvent -鼠标移动

    • UIMousePressEvent -按下鼠标按钮

    • UIMouseDragEvent -鼠标按下并移动(拖动)

    • UIMouseReleaseEvent -松开鼠标按钮

    • UIMouseScrollEvent -鼠标斯科尔

  • UITextEvent -来自用户的文本输入

  • UITextMotionEvent -像箭头一样的文本运动事件

  • UITextMotionSelectEvent -可供选择的文本运动事件

  • UIOnClickEvent -点击事件 UIInteractiveWidget 班级

  • UIOnChangeEvent -价值为 UIWidget 已经改变了

  • UIOnUpdateEvent -Arcade.Window on_update 回调

不同的事件系统#

根据所需的流程，图形用户界面使用不同的事件系统。游戏开发人员应该主要与从特定UIWidget发送的UIEEvent进行交互，例如 on_click 一颗纽扣。

在极少数情况下，开发人员可能会实现一些UIWidget或想要修改现有的图形用户界面行为。在这些情况下，开发人员可能会在UIWidget上注册自己的Pyglet事件类型，或者覆盖 UIWidget.on_event 方法。

#Pyglet窗口事件

由UIManager接收，通过 UIWidget.dispatch_event("on_event", UIEvent(...)) 。窗口事件被包装到UIEvent子类中。

#Pyglet EventDispatcher-UIWidget

UIWidget实现了Pyglets EventDispatcher并注册了 on_event 事件类型。 UIWidget.on_event 包含特定的事件处理，在没有深入了解后果的情况下不应被覆盖。要添加自定义事件处理，请使用修饰器语法添加另一个监听器 (@UIWidget.event("on_event") )。

#UIEvents

UIEEvent是在图形用户界面中传递的事件的类型化表示。UIWidget可能会定义自己的UIEEvent。

#_属性

_Property 是Kivy Properties的一个内部、实验性的纯Python实现。它们用于检测UIWidget的属性变化，并触发渲染。它们只能在Arcade内部代码中使用。