Vaadin - 多个 TabSheet 布局

Question

我有几个 Vaadin 选项卡，其中一个显示表格和一些按钮，另一个显示 Hierarchical 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);

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

Answer 2

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

1 - 我首先确定的是父组件（在我的例子中，我有两个 VerticalLayout 被添加到另一个中）有 setSizeFull()。它们被添加到视图中。在我的例子中，我忘记将它设置在一个扩展 VerticalLayout 和实现视图的类上，由导航器调用。

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);