图形用户界面概念#

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

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

Arcade的图形用户界面代码类的前缀为 UI- 以便于在自动完成中识别和搜索它们。

班级#

以下类提供了图形用户界面的基本结构。

UIManager#

UIManager 是图形用户界面的起点。

要使用图形用户界面,您需要创建一个 UIManager 实例,并调用其 add() 方法将小部件添加到图形用户界面。每个 View 应该有自己的 UIManager 。(如果您不使用视图,则可以使用单个 UIManager 对于窗户。)

这个 UIManager 最初不会对任何用户输入做出反应。你得打电话给我 enable()on_show_view() 。并使用以下命令禁用它 disable()on_hide_view()

要绘制图形用户界面,请调用 draw()on_draw() 方法。

UIWidget#

这个 UIWidget 类是Arcade图形用户界面系统的核心。小部件指定任何UI元素的行为和图形表示,例如按钮或标签。

用户与小部件的交互在 on_event()

A UIWidget 具有以下属性。

rect

具有四个槽的元组。前两个是x和y坐标(小部件的左下角),后两个是宽度和高度。

children

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

size_hint

两个标准化浮点数的元组 (0.0 -1.0)描述该小工具希望占据的父级宽度和高度部分。

示例:

# Prefer to take up all space within the parent
widget.size_hint = (1.0, 1.0)

# Prefer to take up the full width & half the height of the parent
widget.size_hint = (1.0, 0.5)
# Prefer using 1/10th of the available width & height
widget.size_hint = (0.1, 0.1)
size_hint_min

定义小工具的最小宽度和高度的两个整数的元组。应将这些值考虑在内 UILayout 当一个 size_hint 给出的是轴。

size_hint_max

定义小工具最大宽度和高度的两个整数的元组。应将这些值考虑在内 UILayout 当一个 size_hint 给出的是轴。

警告

尺寸提示本身什么也做不了!

它们是在暗示 UILayout 实例,这些实例可以选择使用或忽略它们。

UILayout#

UILayout 是窗口小部件,它们保留移动子对象或调整其大小的权利。他们可能会尊重小部件的特殊属性,如 size_hintsize_hint_min ,或 size_hint_max

这个 arcade.gui.UILayout 必须仅在以下情况下调整子项的尺寸(x或y轴) size_hint 提供轴的值,该值不是 None 用于尺寸标注。

绘图#

对图形用户界面进行了优化,以尽可能地提高性能。这意味着,图形用户界面分离了每个小部件的定位和呈现以及屏幕上结果的绘制。

定位小部件,然后将其渲染到帧缓冲区中(类似于窗口大小的图像),只有当小部件更改并请求渲染时才会更新(通过 trigger_render()trigger_full_render() )。

在.期间 draw() ,将检查是否需要更新,并最终在屏幕上绘制。

布局和渲染#

UIManager 在实际绘制框架之前触发图形用户界面的布局和渲染(如有必要)。这样,图形用户界面只需调整一次即可适应多项更改。

布局是一个两步过程:1.准备布局,准备子项并更新自己的值2.进行布局,实际设置子对象的位置和大小

不会在每次绘制调用期间执行渲染。对以下小部件属性的更改将触发呈现:

  • 直角

  • 儿童

  • 背景

  • 边框宽度、边框颜色

  • 填充物

  • 小部件特定的属性(如文本、纹理等)

do_render() 方法请求呈现,则递归调用 trigger_render() 。如果小部件必须请求其父级渲染,请使用 arcade.gui.UIWidget.trigger_full_render()

该窗口小部件必须绘制自身和子窗口小部件 do_render() 。由于延迟的功能,呈现不必检查任何脏变量,只要状态更改使用 trigger_full_render() 方法。

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

警告

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

举例说明布局算法#

arcade.gui.UIManager 在实际的帧绘制之前触发布局和渲染过程。这为只调整一次以适应多个更改提供了可能。

Example :在中执行的步骤 UIBoxLayout

  1. prepare_layout() 更新自己的大小提示(_H)

  2. do_layout()
    1. 收集电流 sizesize_hintsize_hint_min 儿童的数量

    2. 计算新的位置和大小

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

  3. 递归调用 do_layout 子布局(最后一步 do_layout() )

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

大小提示支持#

size_hint

size_hint_min

size_hint_max

UIAnchorLayout

X

X

X

UIBoxLayout

X

X

X

UIGridLayout

X

X

X

UIManager

X

X

X

UIMixin#

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

现有:

  • UIDraggableMixin

  • UIMouseFilterMixin

  • UIWindowLikeMixin

UIConstructs#

结构是小部件和布局的预定义结构,就像消息框一样。

现有:

  • UIMessageBox

  • UIButtonRow

可用元素#

按钮#

与大多数窗口小部件一样,按钮需要 xywidth ,以及 height 调整其大小的参数。按钮特别有另外两个参数- textmultiline

所有按钮类型都支持样式设置。它们是文本窗口小部件,这意味着您可以使用 ui_label 属性以获取 UILabel 按钮的组件。

扁平按钮#

NameFlatButton

用于简单交互(悬停、按下、释放、点击)的平面按钮。这个按钮是用一个简单的矩形创建的。平面按钮可以快速创建一个漂亮的按钮。但是,根据您的用例,您可能希望使用纹理按钮来进一步定制您的外观。

样式选项如下表所示。

名字

描述

font_size

按钮文本的字体大小。默认为12。

font_name

按钮文本的字体名称或系列。如果提供了元组,则arcade将尝试加载所有字体,优先选择第一个字体。默认为 ("calibri", "arial")

font_color

按钮文本的字体颜色(前景)。对于正常、悬停和禁用状态,默认为白色。按下状态默认为黑色。

bg

按钮的背景色。这将修改按钮内矩形的颜色,而不是边框。不是为每个按钮设置不同的颜色,而是将它们设置为一个共同的颜色主题。对于悬停和禁用状态,默认为灰色。否则它就是白色的。

border

边框颜色。通常只在焦点或悬停状态下修改此选项。悬停时默认为白色或青绿色。

border_width

按钮的边框/轮廓的宽度。在悬停或焦点状态下增加边框是很常见的,但是过粗的边框会导致您的图形用户界面看起来陈旧或质量较低。默认为2。

图像/纹理按钮#

NameUITextureButton

一个图像按钮。纹理由 arcade.load_texture() 对于简单的交互(悬停、按下、释放、点击)。纹理使您可以比样式更好地进一步自定义小部件的外观。

纹理按钮比平面按钮多几个参数。 texturetexture_hovered ,以及 texture_pressed 将分别更改按钮上显示的纹理。 scale 将更改按钮的比例或大小-它类似于精灵 scale

提示

此小工具 doeswidthheight 参数,但它们只拉伸纹理,而不是在保持边界不变的情况下调整纹理大小。此功能目前正在进行中。

与平面按钮相比,当纹理按钮具有纹理时,它们的样式选项较少。

名字

描述

font_size

按钮文本的字体大小。默认为12。

font_name

按钮文本的字体名称或系列。如果提供了元组,则arcade将尝试加载所有字体,优先选择第一个字体。默认为 ("calibri", "arial")

font_color

按钮文本的字体颜色(前景)。对于正常、悬停和禁用状态,默认为白色。按下状态默认为黑色。

border_width

按钮的边框/轮廓的宽度。在悬停或焦点状态下增加边框是很常见的,但是过粗的边框会导致您的图形用户界面看起来陈旧或质量较低。默认为2。

文本小工具#

所有文本小工具都需要 xy 定位参数。他们也接受 textmultiline 选择。

标签#

NameUILabel

标签用于显示文本,作为对用户的指示。支持多行文字,并将其原本的样式选项移到参数中。

这个小部件没有任何样式选项,它们已被移到参数中。 bolditalic 将文本设置为粗体或斜体。 align 指定文本的对齐方式。此外,它还需要 font_namefont_size ,以及 text_color 选择。

使用 label 属性访问内部 Text 班级。

提示

A text 属性可以修改显示的文本。当心--一次又一次地调用它会带来很大的延迟。使用 begin_update() 和py:meth:`~arcade.Text.end_update`来加快速度。

文本输入字段#

NameUIInputText

文本字段允许用户输入基本字符串。它使用的是侏儒的 IncrementalTextLayout 以及它的 Caret 。这些文件存储在 layoutcaret 属性。

此小工具需要 widthheight 属性,并使用矩形显示布局后面的背景。

文本输入字段允许用户在文本周围移动插入符号以修改它,以及选择文本的一部分来替换或删除它。中列出了文本字段的运动符号 pyglet.window.key 模块。

文本区#

NameUITextArea

文本区域是一个可滚动的文本小部件。用户可以滚动鼠标来查看呈现的文本文档。 This does not support editing text 。可以将其视为可滚动标签,而不是文本字段。

widthheight 为文本区域分配大小。如果文本不适合这些尺寸,则只显示其中的一部分。滚动鼠标将递增地显示文本的其他部分。其他参数包括 multilinescroll_speed 。看见 view_y 在滚动速度上。

使用 layoutdoc 来分别获取文本区域的侏儒布局和文档。

用户界面事件#

Arade的图形用户界面事件是完全类型化的数据类,它提供有关影响用户界面的事件的信息。

所有的侏儒窗口事件都由 UIManager vt.进入,进入 UIEvents 并通过 dispatch_event() 发送到 on_event() 回电。

小部件特定的事件(如 UIOnClickEvent 通过以下方式派送 on_event 然后作为特定的事件类型(如 on_click )。

事件属性的完整列表如下所示。

事件

属性

UIEvent

UIMouseEvent

x, y

UIMouseMovementEvent

dx, dy

UIMousePressEvent

dx, dy, button, modifiers

UIMouseDragEvent

dx, dy

UIMouseScrollEvent

scroll_x, scroll_y

UIKeyEvent

symbol, modifiers

UIKeyReleaseEvent

UITextEvent

text

UITextMotionEvent

motion

UITextMotionSelectEvent

selection

UIOnClickEvent

UIOnUpdateEvent

dt

UIOnChangeEvent

old_value, new_value

UIOnActionEvent

action

  • arcade.gui.UIEvent 。所有事件的基类。

  • arcade.gui.UIMouseEvent 。鼠标相关事件的基类。
  • UITextEvent 。来自用户的文本输入。这仅用于文本字段,是以字符串形式输入的文本。

  • UITextMotionEvent 。文本运动事件。这包括使用插入符号移动文本。例如,使用箭头键、退格键、删除键或Home/End和PgUp/PgDn键中的任何一个。持有 Control 使用箭头键将插入符号移动整个单词或段落。通过鼠标移动插入符号不会触发此事件。

  • UITextMotionSelectEvent 。文本运动事件以供选择。按住 Shift 按键和按箭头键 (Control 可选)将选择角色(S)。此外,使用 Control-A 键盘组合将选择所有文本。通过鼠标选择文本不会触发此事件。

  • UIOnUpdateEvent 。这是对Arcade的回调 on_update 方法。

小部件特定的事件#

小部件事件仅作为小部件本身的一个pyglet事件被调度,而不会通过小部件树传递。

不同的事件系统#

Arade的图形用户界面使用不同的事件系统,具体取决于所需的流程。游戏开发人员应该主要与用户界面事件交互,这些事件是从特定的 UIWidget S喜欢安安 on_click 一颗纽扣。

在极少数情况下,开发人员可能会自己实现一些小部件,或者希望修改现有的图形用户界面行为。在这些情况下,开发人员可能会在小部件上注册自己的pyglet事件类型,或者覆盖 on_event 方法。在这种情况下,请参考现有的小部件作为示例。

Pyglet窗口事件#

由接收的Pyglet窗口事件 UIManager

您可以通过以下方式发送它们:

UIWidget.dispatch_event("on_event", UIEvent(...))

窗口事件被包装到 UIEvent

Pyglet事件分派器-UIWidget#

小部件实现了pyglet的 EventDispatcher 并注册一个 on_event 事件类型。

on_event() 包含特定的事件处理,在没有深入了解后果的情况下不应被覆盖。

要添加自定义事件处理,请使用修饰符语法添加另一个监听器::

@UIWidget.event("on_event")

用户界面事件#

用户界面事件是在图形用户界面内传递的事件的类型化表示。小部件可以定义和分派它们自己的这些事件的子类。

属性#

Property 是Kivy Like Properties的纯Python实现。它们用于检测Widget的属性变化并触发呈现。它们主要在图形用户界面小部件中使用,但从3.0.0开始在全球范围内可用。