编辑“界面”（章节）

=== UI组件 ===

<code>window</code>

* 唯一可移动的容器。要启用移动，添加<code>movable = yes</code>属性。
* 可以固定大小，也可以由其子代调整大小。
* 在游戏中，背景是通过模板设置的，比如<code>using = Window_Background</code>和<code>using = Window_Decoration</code>。
* 如果一个孩子在窗口之外，它将无法被点击，也不会显示工具提示。使用<code>allow_outside = yes</code>来改变这一点。没有z坐标，所以z的排序方式是第一个写的子代会被放在第二个写的子代后面。为了使组件可以点击，并且在其他组件的顶部，你需要把它放在其他组件的后面。

<code>widget</code>

* 一个静态容器。在其他方面类似于一个窗口。

<code>margin_widget</code>

* 类似于widget，但可以用margins调整大小。(这使我们可以通过将高度设置为100%，将边距设置为约50，使窗口可以调整到不同大小的屏幕上，以显示hud)

<code>container</code>

* 没有固定的尺寸（但你可以设置最大尺寸）。
* 自动调整大小以适应所有子代，包括不可见的子代。使用<code> ignoreinvisible = yes </code>来忽略它们。
* 常用于将多个元素组合在一起移动。

<code>flowcontainer</code>

* 将其所有子代排列成水平行。使用<code>direction = vertical</code>使其垂直。
* 默认情况下不会忽略不可见的子代。使用<code>ignoreinvisible = yes </code>来改变它。
* 没有固定的大小，可以使用<code>ignoreinvisible = yes</code>来改变。
* 它的子代不能有位置，因为它们是自动设置的。
* 如果你需要调整它的子代的位置，你可以把它放在一个容器或widget里面，然后改变相对于这个父代的位置。

<code>hbox</code>
<code>vbox</code>

* 将所有的子代排列成水平的一行，并沿其宽度分布。Vbox也是一样的，但是是垂直的。
* 不能有固定的大小，而是取其父代的宽度作为自己的宽度（忽略父代的边距）。Vbox取其高度。
** 如果它的父体不能有固定的大小（如flowcontainer），这可能会导致游戏崩溃。
* 可受最小尺寸/最大尺寸和边距的限制。
* 默认情况下，忽略不可见的子代，使用<code>ignoreinvisible = no</code>来更改。
* 在另一个hbox中的hbox将有0个大小，并且不会展开其子代。使用<code>layoutpolicy_horizontal = expanding</code>来调整它的大小（或者在vbox中使用<code>layoutpolicy_vertical = expanding</code>）。
* 接受数据模型（从游戏数据中创建列表）。

<code>dynamicgridbox</code>

* 仅用于数据模型。
* 将所有条目垂直排列。使用<code>flipdirection = yes</code>可以使其水平排列。
* 默认情况下不忽略不可见项目。使用 <code>ignoreinvisible = yes</code> 来进行更改。
* 根据内容的调整大小，并受到最小尺寸和最大尺寸的限制。
* 条目可以有不同的尺寸。
* 有时候在处理非常长的列表时可能会出现卡顿的情况。

<code>fixedgridbox</code>

* 类似于动态框，但其所有项目都是固定尺寸的（本质上是一个表格）。
* 仅用于数据模型。
* 将所有项目垂直排列。使用 <code>flipdirection = yes</code> 可以使其水平排列。
* 无法忽视不可见的条目。
* 可以固定大小，根据内容进行调整，并受最小尺寸和最大尺寸的限制。
* 处理长列表性能更好。

<code>overlappingitembox</code>

* 仅用于数据模型。
* 将所有项目水平排列，并在列表长度超过盒子大小时重叠显示。使用 <code>flipdirection = yes</code> 使其水平排列。
* 可以是固定尺寸或自动调整大小。

<code>scrollarea</code>

* 一个带有滚动条的小部件，如果内容超过其大小，滚动条将出现。
* 滚动条可以通过 <code>scrollbarpolicy_horizontal = always_off</code> 和 <code>scrollbarpolicy_vertical = always_off</code> 来禁用。
** 可以使用没有滚动条的滚动区域来裁剪列表或图片。
* 可以固定大小，根据内容进行调整，并受最小尺寸和最大尺寸的限制。

<code>button</code>

* 一个可点击的对象。 接受 <code>onclick</code> 和 <code>onrightclick</code>.
** 在添加右键功能时，请包括 <code>button_ignore = none</code>.
* 无默认材质
* 可以根据其子代进行固定大小或调整大小。
** 一个0x0按钮可以用来添加不可见的快捷键。

<code>icon</code>

* 显示一个材质
* 可用作小部件来存储子代。
* 可以通过 <code>mirror = horizontal</code> 或 <code>mirror = vertical</code> 进行翻转.

<code>textbox</code>

* 显示文字内容。
* 可以是固定尺寸或自动调整大小。
* 使用 <code>elide = right</code> 或 <code>elide = left</code> 来截断过长的文本。
* 可以是单行或多行，当 <code>multiline = yes</code> 时为多行。
* 游戏文件通常使用在gui/shared/text.gui中设置的模板，比如 <code>text_single</code> 。使用它们可以保持视觉一致性，并减少每次编写代码的工作量。

==== hbox/vbox ====

Hboxes和vboxes是可调整大小的容器，它们对其子代进行排序、调整大小或展开。hbox水平排序子代，vbox垂直排序子代，除此之外它们的工作方式相同，所以这里的所有示例都适用于两者。

以下是屏幕截图，hboxes 带有黑色背景。所有示例都可以在 [https://steamcommunity.com/sharedfiles/filedetails/?id=2579010074 UI Library mod] 中找到。

{| class="wikitable"
|默认情况下，hbox 的工作方式类似于流容器(flowcontainer)：它以水平方向排列子项，并调整大小以适应它们。
<pre>
hbox = {
    button_round = {}
    button_round = {}
}
</pre>
|[[File:simple_hbox_wide.jpg]]
|-
|使用 <code>layoutpolicy_horizontal = expanding</code> 时，它会扩展到其父级的宽度，并展开其子元素。
<pre>
hbox = {
    layoutpolicy_horizontal = expanding
    button_round = {}
    button_round = {}
}
</pre>
|[[File:Expanded_hbox.jpg]]
|-
|要将其子项分组，我们可以使用 <code>expand = {}</code> ，这是一个模板部件，其布局策略设置为"增长(growing)"（在gui/shared/windows.gui中定义）。
<pre>
hbox = {
    layoutpolicy_horizontal = expanding
    button_round = {}
    button_round = {}
    expand = {}
}
</pre>
|[[File:Ordered_hbox.jpg]]
|-
|"扩大(expanding)"策略涉及到子代的规模调整。

这对于创建标签页非常有用，无需手动设置它们的大小。
<pre>
hbox = {
    layoutpolicy_horizontal = expanding
    button_standard = { layoutpolicy_horizontal = expanding }
    button_standard = { layoutpolicy_horizontal = expanding }
}
</pre>
|[[File:tabs hbox 2.jpg]]
|-
|随着水平和垂直方向的“扩展(expanding)”策略，hbox 及其子代将在两个方向上进行调整大小。
<pre>
hbox = {
    layoutpolicy_horizontal = expanding   layoutpolicy_vertical = expanding
    button_standard = {
        layoutpolicy_horizontal = expanding   layoutpolicy_vertical = expanding
    }
    button_standard = {
        layoutpolicy_horizontal = expanding   layoutpolicy_vertical = expanding
    }
}
</pre>
|[[File:big hbox.png]]
|}
如果放置在固定大小的父级容器中，默认情况下，它会水平和垂直方向上扩展到整个父级容器的大小。但如果放置在其他垂直盒子或水平盒子中，它们将不会扩展到父级容器的大小。


==== 布局策略 ====

布局策略控制着hboxes和vboxes中子元素的调整大小方式。这同样适用于嵌套boxes中的boxes。

有两种类型，<code>layoutpolicy_horizontal</code> 和 <code>layoutpolicy_vertical</code> ，分别控制水平和垂直行为。

默认情况下有五项固定的策略:

#'''fixed'''（固定的） - 组件保持原始大小，无法放大或缩小。设置"fixed"属性的hboxes/vboxes将根据子代的大小进行调整，就像一个容器。
#'''expanding'''（扩展的） - 根据父代的宽度/高度自动调整大小，但不会缩小到原始尺寸以下。优先级高于其他策略的子代。如果多个子代设置为 "expanding" ，它们将平均分配可用空间。
#'''growing''' （增长的）- 与"expanding"相似，但优先级较低。如果存在带有"expanding"属性的子代，"growing"将不会发生。这还意味着 <code>expand = {}</code> 部件将调整大小为0，因此如果想要与"expanding"策略的组件一起使用，需要更改其策略。
#'''preferred''' （偏好的）- 随着可用空间的变化，它会随之放大或缩小。
#'''shrinking''' （缩水的）- 可以缩小至原始大小以下，但无法放大超过原始大小。

布局策略还会遵循最小尺寸 (minimumsize) 、最大尺寸 (maximumsize) 、最小宽度 (min_width)和最大宽度 (max_width) 。

{|class="wikitable"
| "Expanding" 优先于 "growing" ，但不会使其缩小到小于原始（固定）尺寸。
<pre>
hbox = {
	max_width = 400
	layoutpolicy_horizontal = expanding

	button_standard_small = { layoutpolicy_horizontal = expanding }
	button_standard_small = { layoutpolicy_horizontal = growing }
}
</pre>
|[[File:growing hbox 2.png]]
|-
| "preferred" 和 "shrinking" 在空间不足时都可以收缩。为了看到这种效果，可能需要通过 <code>max_width</code> 或 "shrinking" 策略来限制 hbox 的宽度。
<pre>
hbox = {
	layoutpolicy_horizontal = shrinking

	button_standard_small = { layoutpolicy_horizontal = growing }
	button_standard_small = { layoutpolicy_horizontal = preferred }
	button_standard_small = { layoutpolicy_horizontal = shrinking }
}
</pre>
|[[File:shrinking hbox 2.png]]
|}

请注意，具有较大尺寸的物块 (objects) 可能会拉伸 hbox/vbox，即使看起来适合。设置 <code>max_width</code> ，并测试所有文本字段是否能够容纳很长的字符串，以确保窗口不会改变。