Vaadin - 多选项卡布局

Question

我有几个 Vaadin 选项卡，其中一个显示表格和一些按钮，另一个显示分层 Vaadin 树并具有自定义搜索框。我已将选项卡的大小设置为 H:420px W:250px，因此它们具有相同的大小，如果表格太大或树太长，我会得到一个滚动条（这就是我想要的），问题是其他组件就像搜索框和按钮被强制向下放置在布局的底部一样，所以如果我想访问按钮/搜索框，我必须一直向下滚动，这样我才能使用我想要的组件。我尝试仅为组件添加第二个布局，但没有帮助：-/这是我迄今为止尝试过的：

TabSheet tabs = new TabSheet();
tabs.setWidth("250");
tabs.setHeight("420");

VerticalLayout lyTab = new VerticalLayout();
tabOne = tabs.addTab(lyTab, "Tab One", null);
//added an extra layout for the Buttons :
HorizontalLayout  lyButton = new HorizontalLayout();
lyButton.addComponent(applyButton);
lyButton.addComponent(selectAll);
lyTab.addComponent(lyButton);

我的想法是向 tabSheet 添加第二个布局，这样我就可以修复它的位置，使其无法移动但这没有用。有什么想法吗？

Answer 1

如果我正确理解您的问题，这里是如何使用表格来做到这一点：

VerticalLayout tab = new VerticalLayout();
tab.setSizeFull();

Table table = new Table();
table.setSizeFull();
tab.addComponent(table);
tab.setExpandRatio(table, 1);

HorizontalLayout buttons = new HorizontalLayout();
buttons.addComponent(new Button());
buttons.addComponent(new Button());
tab.addComponent(buttons);

Tab tabOne = tabs.addTab(tab, "Tab One", null);

在这种情况下，表格是全尺寸的，并在需要时显示滚动条。

对于树，将上面代码中的表格部分替换为：

Panel panel = new Panel();
panel.setSizeFull();
panel.getContent().setSizeUndefined();
tab.addComponent(panel);
tab.setExpandRatio(panel, 1);

Tree tree = new Tree();
tree.setSizeUndefined();
panel.addComponent(tree);

这里树无法显示滚动条，因此我们将其包装在一个全尺寸的面板中，该面板在需要时显示滚动条。

Answer 2

我在 Vaadin 7.4.8 中仍然遇到类似的问题，并且能够使其工作。

1 - 我确定的第一件事是父组件（在我的例子中，我有两个 VerticalLayout 被添加到另一个组件中）具有 setSizeFull()。它们被添加到视图中。就我而言，我忘记将其设置在扩展 VerticalLayout 和 Implements View 的类上，由导航器调用。

2 - 另一个重要的细节是 tabSheet - 使用 addTab(component) 添加的选项卡还必须设置 setSizeFull() ，以便选项卡占用所有未使用的空间，特别是在底部。

2.1 - 添加了 setExpandRatio(tabSheet, 1) 以便它向顶部移动。

3 - 现在，对于使用 addTab(component) 添加到 tabSheet 的组件（VerticalLayout），我添加了两个组件，一个是 Horizo​​ntalLayout，第二个是 VerticalLayout。

所以我确保：

• 它有 setSizeFull
• setExpandRatio(Horizo​​ntalLayout, .5f);
• setExpandRatio(VerticalLayout, .5f);