图形用户界面概念#
图形用户界面元素表示为 UIWidget
。图形用户界面的结构就像一棵树;每个小部件都可以有其他小部件作为子部件。
树的根是 UIManager
。这个 UIManager
将用户交互与图形用户界面连接起来。阅读更多关于 用户界面事件 。
Arcade的图形用户界面代码类的前缀为 UI-
以便于在自动完成中识别和搜索它们。
班级#
以下类提供了图形用户界面的基本结构。
UIManager#
UIManager
是图形用户界面的起点。
要使用图形用户界面,您需要创建一个 UIManager
实例,并调用其 add()
方法将小部件添加到图形用户界面。每个 View
应该有自己的 UIManager
。(如果您不使用视图,则可以使用单个 UIManager
对于窗户。)
这个 UIManager
最初不会对任何用户输入做出反应。你得打电话给我 enable()
在 on_show_view()
。并使用以下命令禁用它 disable()
在 on_hide_view()
。
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_hint
, size_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
:
prepare_layout()
更新自己的大小提示(_H)do_layout()
收集电流
size
,size_hint
,size_hint_min
儿童的数量计算新的位置和大小
设置子项的位置和大小
递归调用
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 |
|
---|---|---|---|
|
X |
X |
X |
|
X |
X |
X |
|
X |
X |
X |
|
X |
X |
X |
UIMixin#
Mixin类是可用于应用某些特定行为的基类。目前,可用的Mixin仍在大力开发中。
现有:
UIDraggableMixin
UIMouseFilterMixin
UIWindowLikeMixin
UIConstructs#
结构是小部件和布局的预定义结构,就像消息框一样。
现有:
UIMessageBox
UIButtonRow
可用元素#
文本小工具#
所有文本小工具都需要 x
和 y
定位参数。他们也接受 text
和 multiline
选择。
标签#
Name : UILabel
标签用于显示文本,作为对用户的指示。支持多行文字,并将其原本的样式选项移到参数中。
这个小部件没有任何样式选项,它们已被移到参数中。 bold
和 italic
将文本设置为粗体或斜体。 align
指定文本的对齐方式。此外,它还需要 font_name
, font_size
,以及 text_color
选择。
使用 label
属性访问内部 Text
班级。
文本输入字段#
Name : UIInputText
文本字段允许用户输入基本字符串。它使用的是侏儒的 IncrementalTextLayout
以及它的 Caret
。这些文件存储在 layout
和 caret
属性。
此小工具需要 width
和 height
属性,并使用矩形显示布局后面的背景。
文本输入字段允许用户在文本周围移动插入符号以修改它,以及选择文本的一部分来替换或删除它。中列出了文本字段的运动符号 pyglet.window.key
模块。
文本区#
Name : UITextArea
文本区域是一个可滚动的文本小部件。用户可以滚动鼠标来查看呈现的文本文档。 This does not support editing text 。可以将其视为可滚动标签,而不是文本字段。
width
和 height
为文本区域分配大小。如果文本不适合这些尺寸,则只显示其中的一部分。滚动鼠标将递增地显示文本的其他部分。其他参数包括 multiline
和 scroll_speed
。看见 view_y
在滚动速度上。
使用 layout
和 doc
来分别获取文本区域的侏儒布局和文档。
用户界面事件#
Arade的图形用户界面事件是完全类型化的数据类,它提供有关影响用户界面的事件的信息。
所有的侏儒窗口事件都由 UIManager
vt.进入,进入 UIEvents
并通过 dispatch_event()
发送到 on_event()
回电。
小部件特定的事件(如 UIOnClickEvent
通过以下方式派送 on_event
然后作为特定的事件类型(如 on_click
)。
事件属性的完整列表如下所示。
事件 |
属性 |
---|---|
|
无 |
|
|
|
|
|
|
|
|
|
|
|
|
|
无 |
|
|
|
|
|
|
|
无 |
|
|
|
|
|
|
arcade.gui.UIEvent
。所有事件的基类。arcade.gui.UIMouseEvent
。鼠标相关事件的基类。arcade.gui.UIMouseMovementEvent
。鼠标运动。此活动还有一个附加的pos
属性,该属性返回x和y坐标的元组。UIMousePressEvent
。按下了鼠标按钮。UIMouseDragEvent
。鼠标按下并移动(拖动)。UIMouseReleaseEvent
。释放鼠标按钮。UIMouseScrollEvent
。鼠标滚动。
UITextEvent
。来自用户的文本输入。这仅用于文本字段,是以字符串形式输入的文本。UITextMotionEvent
。文本运动事件。这包括使用插入符号移动文本。例如,使用箭头键、退格键、删除键或Home/End和PgUp/PgDn键中的任何一个。持有Control
使用箭头键将插入符号移动整个单词或段落。通过鼠标移动插入符号不会触发此事件。UITextMotionSelectEvent
。文本运动事件以供选择。按住Shift
按键和按箭头键 (Control
可选)将选择角色(S)。此外,使用Control-A
键盘组合将选择所有文本。通过鼠标选择文本不会触发此事件。UIOnUpdateEvent
。这是对Arcade的回调on_update
方法。
小部件特定的事件#
小部件事件仅作为小部件本身的一个pyglet事件被调度,而不会通过小部件树传递。
UIOnClickEvent
。点击事件:UIInteractiveWidget
班级。这是在小组件按下时触发的。UIOnChangeEvent
。A的值UIWidget
已经改变了。UIOnActionEvent
。操作的结果是与UIWidget
(主要用于构造)
不同的事件系统#
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开始在全球范围内可用。