3.5.2.2.2. 盒子布局

API 文档

BoxLayout 是一个顺序排列组件的容器。

有三种类型的 BoxLayout，它们对应的 XML 元素如下：

在线示例

  • hbox − 组件在水平方向顺序排列。

    gui hbox

    1. <hbox spacing="true" margin="true">
    2.     <dateField dataContainer="orderDc" property="date"/>
    3.     <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc"/>
    4.     <textField dataContainer="orderDc" property="amount"/>
    5. </hbox>

在线示例

  • vbox − 组件在垂直方向顺序排列。vbox 默认具有 100%的宽度。

    gui vbox

    1. <vbox spacing="true" margin="true">
    2.     <dateField dataContainer="orderDc" property="date"/>
    3.     <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc"/>
    4.     <textField dataContainer="orderDc" property="amount"/>
    5. </vbox>

在线示例

  • flowBox − 组件被水平排列在一行。如果一行中没有足够的空间，则排列不下的组件将显示在下一行中（行为类似于 Swing 的 FlowLayout）。

    gui flowbox

    1. <flowBox spacing="true" margin="true">
    2.     <dateField dataContainer="orderDc" property="date"/>
    3.     <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc"/>
    4.     <textField dataContainer="orderDc" property="amount"/>
    5. </flowBox>

在基于 Halo 的主题的 Web 客户端中，BoxLayout 可用于创建更复杂的组合布局。 使用两个 Box 布局，一个 vbox 布局，设置 stylename 为 card 或 well。里面嵌套一个 hbox 布局， 并为其设置属性 stylename="v-panel-caption" ， 使用这个方法可以定义一个具有标题的面板，看起来像 Vaadin Panel。

  • card 使布局看起来像卡片。

  • well 样式使卡片的外看起来带有下沉阴影效果。

gui boxlayout

  1. <vbox stylename="well"
  2.       height="200px"
  3.       width="300px"
  4.       expand="message"
  5.       spacing="true">
  6.     <hbox stylename="v-panel-caption"
  7.           width="100%">
  8.         <label value="Widget caption"/>
  9.         <button align="MIDDLE_RIGHT"
  10.                 icon="font-icon:EXPAND"
  11.                 stylename="borderless-colored"/>
  12.     </hbox>
  13.     <textArea id="message"
  14.               inputPrompt="Enter your message here..."
  15.               width="280"
  16.               align="MIDDLE_CENTER"/>
  17.     <button caption="Send message"
  18.             width="100%"/>
  19. </vbox>

getComponent()方法允许通过索引获取 BoxLayout 的子组件：

  1. Button button = (Button) hbox.getComponent(0);

可以在 BoxLayout 中使用键盘快捷键。使用 addShortcutAction() 方法设置快捷方式和要执行的操作：

  1. flowBox.addShortcutAction(new ShortcutAction("SHIFT-A", shortcutTriggeredEvent ->
  2.         notifications.create()
  3.                 .withCaption("SHIFT-A action")
  4.                 .show()
  5. ));

hbox 、 vbox 、 flowBox 的属性

align - caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - enable - expand - box.expandRatio - height - id - margin - spacing - stylename - visible - width

API

add - addLayoutClickListener - addShortcutAction - getComponent - getComponentNN - getComponents - getMargin - getOwnComponent - getOwnComponents - indexOf - remove - removeAll - setMargin - setSpacing