Java 瓦丁布局间距

只是玩瓦丁，看起来像是一个非常基本的布局问题。 代码：

css:

你能解释一下为什么布局之间有这么大的差距，以及如何控制或消除它吗

---

在Vaadin中使用时，您可以通过使用扩展比的概念来控制这一点。默认情况下，具有定义高度的垂直布局为每个项目分配相同数量的“插槽”空间（在您的示例中，50%将分配给

top

，50%分配给

bot

。我在布局的

top

和

bot

部分周围添加了一个红色和蓝色框，以显示Vaadin已为每个项目分配了50%：

可以按如下方式设置展开比以控制此操作：

final VerticalLayout screen = new VerticalLayout();
...
final VerticalLayout top = new VerticalLayout();
...
final VerticalLayout bot = new VerticalLayout();
...

// Set expand ratios
screen.setExpandRatio(top, 3);
screen.setExpandRatio(bot, 7);

这样，

top

将为30%和

bot

70%。您可以调整这些值以获得所需的布局。添加上述代码将产生以下布局：

现在出现空白是因为

top

的高度设置为30%：

final VerticalLayout top = new VerticalLayout();
...
top.setHeight("30%");

如果您根本不想要间隙，可以将

top

的高度设置为100%，您将得到以下结果：

---

要删除组件之间的空间，可以禁用间距（Vaadin 8）

final VerticalLayout screen = new VerticalLayout();
...
final VerticalLayout top = new VerticalLayout();
...
final VerticalLayout bot = new VerticalLayout();
...

// Set expand ratios
screen.setExpandRatio(top, 3);
screen.setExpandRatio(bot, 7);

final VerticalLayout top = new VerticalLayout();
...
top.setHeight("30%");

VerticalLayout layout = new VerticalLayout();
layout.setSpacing(false);