Box Layout

Summary: 本节介绍了Slate中的Box布局，这是最简单的布局，处理控制和约束其Content中单个子控件的尺寸。 SBox具有各种属性，例如MinDesiredWidth，MinDesiredHeight，MaxDesiredWidth，MaxDesiredHeight，HeightOverride，WidthOverride，HAlign，VAlign和Padding。这些属性用于控制子控件的尺寸、对齐和边距。

之前的文档中的Layout介绍,都是处理多个控件之间的布局关系.如果想要精细控制一个控件的尺寸,就需要用到SBox

实际上SBox布局是Slate各种布局中最简单的一种布局，它只控制、约束自己Content中的唯一的一个子控件的尺寸。

MinDesiredWidth， MinDesiredHeight¶

使用MinDesiredWidth， MinDesiredHeight用来限制子控件中的最小尺寸。如果子控件中所需要的尺寸超过了最小值，Slot则依然会按需伸缩。

    "SBox":
    {
        "MinDesiredWidth": 200,
        "MinDesiredHeight": 80,
        "Content": {
            "SBorder": {
                "BorderBackgroundColor": [0, 1, 0, 1],
                "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"}
            }
        }
    }

如下图，没有子控件的SBorder，在不设置子控件的情况下，依然占据了200x80的空间

SBorder without a child widget still occupying a 200px x 80px space

The SBorder taking more than 200px as the content widget has long text

MaxDesiredWidth， MaxDesiredHeight¶

同理，如果想要将控件的尺寸限制在一个合适的尺寸之内，就可以用"MaxDesiredWidth" 和 "MaxDesiredHeight"

    "SBox":
    {
        "MinDesiredWidth": 200,
        "MinDesiredHeight": 80,
        "MaxDesiredWidth": 300,
        "MaxDesiredHeight": 80,
        "Content": {
            "SBorder": {
                "BorderBackgroundColor": [0, 1, 0, 1],
                "BorderImage": { "Style": "FEditorStyle", "Brush": "DashedBorder"},
                "Content": {
                    "SEditableTextBox":
                    {
                        "Text": "Some text"
                    }
                }
            }
        }
    }

例如上面的例子中，文本框将最小占用200px，随着其中内容的最多，逐渐变宽，最终被限制在300px

A GIF showing the min/max behavior of SBox

HeightOverride， WidthOverride¶

如果想要空间已知保持一个特定尺寸，可以同时设置 WidthOverride HeightOverride，更合适的做法是用"HeightOverride"和"HeightOverride"

    "WidthOverride": 200,
    "HeightOverride": 80,

A snapshot of SBox with fixed size limited by the 'WidthOverride' field

应用¶

例如，在UE4的SImage控件中，由于没有"DesiredSizeOverride"属性，当我们想要控制SImage控件的尺寸的时候，就可以在SBox控件中设置好想要的图片的显示尺寸，然后在SBox的控件中放入实际使用的SImage控件。

HAlign/VAlign¶

SBox 中同样也有"HAlign"和"VAlign"由于修饰Content中的内容

A Button aligned to the SBox's bottom/right

    "SBox":
    {
        "WidthOverride": 200,
        "HeightOverride": 80,
        "VAlign": "Bottom",
        "HAlign": "Right",
        "Padding": 5,
        "Content": {
            "SButton": { "Text": "PlaceHolder Button" }
        }
    }

CAUTION
"HAlign"和"VAlign" 和 "Content"是平级的. 不要写在"Content"内

Padding¶

SBox中的"Padding"属性,也是用来限制Content中的内容的.

如上面的例子中,按钮和绿框(Slate Debug 框)之间的空隙,就来自"Padding": 5.

其他Padding相关内容可见Padding and Margin