BoxLayout

BoxLayout - 盒子布局 是一个顺序排列组件的布局容器。

组件的 XML 名称:hboxvboxflowBox

基本用法

有三种类型的 BoxLayout

hbox

hbox - 组件在水平方向顺序排列:

<layout>
    <hbox id="hbox"
          spacing="true">
        <label align="MIDDLE_LEFT"
               value="Label"/>
        <textField inputPrompt="TextField" required="true"/>
        <button caption="Button"/>
        <button caption="Button"/>
    </hbox>
</layout>
hbox

vbox

vbox - 组件在竖直方向顺序排列。默认具有 width=100%

<layout>
    <vbox id="vbox"
          spacing="true">
        <label value="Label"/>
        <textField inputPrompt="TextField" required="true"/>
        <button caption="Button"/>
        <button caption="Button"/>
    </vbox>
</layout>
vbox

flowbox

flowBox - 组件水平排列,支持换行。如果一行中没有足够的空间,则放不下的组件将显示在下一行。

<layout>
    <flowBox id="flowBox"
             spacing="true"
             width="300px">
        <label value="Label"/>
        <textField inputPrompt="TextField"/>
        <button caption="Button"/>
        <button caption="Button"/>
    </flowBox>
</layout>
flow box

样式

BoxLayout 可用于创建更复杂的组合布局。例如,设置 stylenamecardwell。并为其内部的子容器设置属性 stylename="v-panel-caption",这样的组件看起来像 Vaadin Panel

<layout>
    <vbox stylename="well"
          height="200px"
          width="300px"
          expand="message"
          spacing="true">
        <hbox stylename="v-panel-caption"
              width="100%">
            <label value="Widget caption"/>
            <button align="MIDDLE_RIGHT"
                    icon="font-icon:EXPAND"
                    stylename="borderless-colored"/>
        </hbox>
        <textArea id="message"
                  inputPrompt="Enter your message here..."
                  width="280"
                  align="MIDDLE_CENTER"/>
        <button caption="Send message"
                width="100%"/>
    </vbox>
</layout>
vaadin panel

属性

margin

定义外边框和容器内容之间的间距。支持两种类型的值:

  • margin="true" - 四边启用边距。一个值表示四边同时设定。

  • margin="true,false,true,false" - 仅启用顶部和底部的边距。(值格式为:“上右下左”)。

默认不设置边距。

spacing

设置容器内组件的间距。取值范围:

  • true

  • false - 默认值。

requiredIndicatorVisible

如果 BoxLayout 中至少有一个组件的 required 属性为 true,且 requiredIndicatorVisible="true",则 BoxLayout 的右上角会显示一个“必填”图标。默认 requiredIndicatorVisible="false"