Vaadin Web应用开发教程(33):UI布局-HorizontalSplitPanel和VerticalSplitPanel布局

HorizontalSplitPanel和VerticalSplitPanel为水平和垂直分割窗口，可以将空间分成上下或左右两部分。用户可以通过中间的分隔条调整两部分的大小。
可以通过setFirstComponent()和setFirstComponent()为分隔的两部分设置不同的UI组件， addComponent()也可以依次添加两个UI组件。

// Have a panel to put stuff in
Panel panel = new Panel("Split Panels Inside This Panel");
panel.setSizeFull();
// Have a horizontal split panel as its root layout
HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
panel.setContent(hsplit);
 
// Put a component in the left panel
hsplit.setFirstComponent(new Label("left panel"));
 
// Put a vertical split panel in the right panel
VerticalSplitPanel vsplit = new VerticalSplitPanel();
hsplit.setSecondComponent(vsplit);
 
// Put other components in the right panel
vsplit.addComponent(new Label("Here's the upper panel"));
vsplit.addComponent(new Label("Here's the lower panel"));
mainWindow.setContent(panel);

 

此外可以通过方法setSplitPosition 设置分隔条的位置，如果不想用户调整分隔条的位置，可以通过setLocked(true) 禁止用户移动分隔条。