Question

你能解释一下HorizontalLayoutContainer和HBoxLayoutContainer之间的区别吗？

Answer 1

阅读JavaDoc 5分钟后发现HBoxLayoutContainer有：

支持自动溢出
每个孩子的布局都是最小和最大尺寸（在容器的轴上，因此在横轴上，因此最小/最大宽度）
可能在儿童中分配剩余空间（ flex ）

而HorizontalLayoutContainer：

（可能）在孩子不适合时滚动
为每个孩子设置一个固定的宽度和高度（或其内在大小）。

我的理解是HBoxLayoutContainer使用底层的CSS3 Flexible Box Model，而HorizontalLayoutContainer宁愿使用display: inline-box或float（或等效控制）通过JavaScript，可能使用position: absolute）

Answer 2

一些例子会有所帮助。我们假设您在窗口内有一个固定大小的面板。您希望使用垂直堆栈小部件填充面板，因此它看起来像这样：

[Select all]
[ ] Check box #1
[ ] Check box #2
...
[ ] Check box #n

如果列表太长，您需要一个垂直滚动条来显示复选框，但是＆＃34;选择全部＆＃34;按钮不应滚动。

包含所有复选框的面板应为VerticalLayoutContainer。这是显而易见的，因为VBoxLayoutContainer没有getScrollSupport（）方法。

不明显的是外部面板（包含＆＃34;选择所有＆＃34;按钮和滚动面板的面板）也需要是VerticalLayoutContainer。外部面板将采用其父级给出的大小，它将强制其子项适合自己。如果外部面板是VBoxLayout面板，则滚动条将在内部面板中消失。问题是外面板会使自身和内部面板一样大，以便包含所有复选框。由于内部面板非常大，滚动条将永远不会出现。由于外面板很大，它会被切断。看起来您忘记将滚动条添加到内部面板，即使您的错误在外部面板中。

第二个例子：让我们在顶行添加更多按钮。

[Select all] [Select none] [Help]
[ ] Check box #1
[ ] Check box #2
...
[ ] Check box #n

在第一个例子中，我们将[Select all]按钮直接放入外部面板。在这种情况下，我们需要制作一个新的面板来按住按钮。在这种情况下，您需要一个HBoxLayoutContainer。 HBoxLayoutContainer将自动将其高度设置为内部按钮的高度，外部面板将自动为HBoxLayoutContainer保留足够的空间。如果您使用HorizontalLayoutContainer，则该容器不会自动设置其高度。除非你手动设置那个容器的高度（哎呀！），否则它的高度为0！即它会消失。

总之，当您在这些容器之间进行选择时，最重要的问题是此容器将如何与其父容器进行交互，而不是其子容器。如果您希望容器选择自己的大小（如按钮栏），请使用HBoxLayoutContainer或VBoxLayoutContainer。如果您希望容器使用其父级推荐的大小（如固定大小窗口中的主面板），请使用HorizontalLayoutContainer或VerticalLayoutContainer。

如果你没有从javadocs那里得到这个，那就不要感到难过。我花了几个小时的阅读和反复试验来解决这个问题。

GXT 3布局容器：水平＆amp;垂直与HBox＆amp;垂直框

2 个答案: