3.5.2.2.7. 分组框布局

在线示例

API 文档

GroupBoxLayout 是一个容器，可以将一组组件框在一个区域并为它们设置一个整体的标题。另外，这个区域还可以折叠起来。

gui groupBox

该组件的 XML 名称：groupBox

下面是一个分组框布局的 XML 描述示例：

  1. <groupBox caption="Order">
  2.     <dateField dataContainer="orderDc" property="date" caption="Date"/>
  3.     <lookupField dataContainer="orderDc" property="customer" optionsContainer="customersDc" caption="Customer"/>
  4.     <textField dataContainer="orderDc" property="amount" caption="Amount"/>
  5. </groupBox>

groupBox 的属性:

  • caption – 分组标题。
  • orientation – 定义组件放置的方向 - 水平或垂直。默认值为 vertical（垂直）。
  • collapsable – 如果该值设置为 true，可以使用 gui_groupBox_minus/gui_groupBox_plus 按钮将组件的内容隐藏。

  • collapsed – 如果设置为 true，初始状态下组件内容会被折叠。collapsed 属性在 collapsable="true" 有效。

    下面是一个折叠的 GroupBox 的例子：

    gui groupBox collapsed

    可以通过 ExpandedStateChangeListener 接口获取 groupBox 组件的展开状态改变事件。

  • outerMargin - 设置 groupBox 边框的外边距。如果设置为 true，组件的所有边都会添加外边距。要单独设置每一边的外边距，请为 groupBox 的每一边设置 true 或 false：

    1. <groupBox outerMargin="true, false, true, false">

    如果 showAsPanel 属性设置为 true，则忽略 outerMargin 属性。

  • showAsPanel – 如果设置为 true，该组件看起来就会像 Vaadin Panel。默认值为 false。

    gui groupBox Panel

默认情况下，groupBox 容器的宽是 100％，类似于vbox。

在基于 Halo 主题的 Web 客户端中，可以使用 XML 描述或界面控制器中的 stylename 属性为 groupBox 组件设置预定义样式。以编程方式设置样式时，选择一个以 LAYOUT_ 或 GROUPBOX_ 为前缀的 HaloTheme 类常量。showAsPanel 属性设置为 true 时可以与以下样式结合使用：

  • borderless 样式删除 groupBox 的边框和背景颜色：

    1. groupBox.setShowAsPanel(true);
    2. groupBox.setStyleName(HaloTheme.GROUPBOX_PANEL_BORDERLESS);
  • card 样式会使布局看起来像卡片布局。

  • well 样式会使容器具有下沉阴影效果：

    1. <groupBox caption="Well-styled groupBox"
    2.           showAsPanel="true"
    3.           stylename="well"
    4.           width="300px"
    5.           height="200px"/>

    gui groupBox Panel 2

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

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

groupBox 的属性

align - caption - captionAsHtml - collapsable - collapsed - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - expand - box.expandRatio - height - id - orientation - outerMargin - settingsEnabled - showAsPanel - spacing - stylename - width

groupBox 的预定义样式

borderless - card - well

API

add - addExpandedStateChangeListener - addShortcutAction - applySettings - getComponent - getComponentNN - getComponents - getOwnComponent - getOwnComponents - indexOf - remove - removeAll - saveSettings - setOuterMargin - setSpacing