Vaadin Layout-Abstand

Question

Nur mit Vaadin spielen, sieht aus wie sehr einfaches Layout-Problem. Code:

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

Können Sie mir bitte erklären, warum gibt es eine so große Lücke zwischen den Layouts und wie sie zu kontrollieren oder entfernen?

Answer 1

Sie können dies steuern, das Konzept der mit Verhältnisse erweitern wenn Vertical and Horizontal Layouts in Vaadin verwenden. Standardmäßig weist ein vertikales Layout mit einer definierten Höhe jedem Objekt die gleiche Menge an Platz zu (in diesem Beispiel werden 50% top und 50% bot zugewiesen. Ich habe eine rote und blaue Box um die top hinzugefügt und bot Teile Ihres Layouts zeigen, dass Vaadin 50% auf jeweils zugeteilt:

Sie die Verhältnisse erweitern einstellen können wie folgt dies zu kontrollieren:

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

diese Weise top wird sei 30% und bot 70%. Sie können diese Werte optimieren, um das gewünschte Layout zu erhalten. Hinzufügen des obigen Code führt zu folgendem Layout:

Das Leerzeichen wird jetzt durch die Tatsache, dass Höhe von top auf 30% festgelegt:

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

Wenn Sie don‘ t wollen die Lücke überhaupt Sie die Höhe von top-100% eingestellt und Sie werden folgendes Ergebnis: