Разметка макета 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 в 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%, и вы получите следующий результат: