Question

只是玩Vaadin，看起来非常基本的布局问题。代码：

^(?!.*([SCE]).*\1)[SCE](?:,[SCE]){0,2}$

的CSS：

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

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

Answer 1

在Vaadin中使用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％，您将得到以下结果：

Answer 2

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

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

Vaadin布局间距

2 个答案: