Vaadin布局间距

只是玩Vaadin，看起来像非常基本的布局问题。代码：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; 
} 
}

能否请您解释一下为什么是在那里的布局和如何控制或删除其之间如此巨大的落差？

来源

2016-11-23 Omryf

您可以通过使用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％的差距，你会得到以下结果：

来源

2016-11-23 14:18:01

非常感谢这个伟大的答案。它的窍门！ – Omryf

Vaadin布局间距

回答

相关问题