java - Vaadin 布局间距

Question

刚刚玩 Vaadin，看起来像是非常基本的布局问题。代码:

final VerticalLayout screen = new VerticalLayout();
//screen.setStyleName("mid-blue");
screen.setWidth("100%");
screen.setHeight("100%");
screen.setSpacing(false);
screen.setMargin(false);


final VerticalLayout top = new VerticalLayout();
screen.addComponent(top);
top.setStyleName("black");
top.setWidth("100%");
top.setHeight("30%");
top.setSpacing(false);
top.setMargin(false);

final VerticalLayout bot = new VerticalLayout();
screen.addComponent(bot);
bot.setStyleName("light-blue");
bot.setWidth("60%");
bot.setHeight("100%");
bot.setSpacing(false);
bot.setMargin(false);

screen.setComponentAlignment(bot,Alignment.TOP_CENTER);
setContent(screen);

CSS:

@import "../valo/valo.scss";

@mixin test {
@include valo;

.mid-blue {
    background: #71C6E5;
}
.black {
    background: black;
}
.light-blue {
    background-color: #A2DCF2;
}
.white {
    background-color: white;
}
.green {
    background: green;
 }
 }

您能否解释一下为什么布局之间存在如此巨大的差距以及如何控制或消除它？

Answer 1

在使用Vertical and Horizontal Layouts时，您可以通过使用扩展比率的概念来控制这一点在瓦丁。默认情况下，具有定义高度的垂直布局为每个项目分配相同数量的“槽”空间(在您的示例中，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%，您将得到以下结果: