在Vaadin中使用嵌套的Horizo​​ntalSplitPanel和VerticalSplitPanel创建布局

Question

我是vaadin的新手并尝试设置基本布局。这是我的代码：

    //a label
    public static final String brownFox = "The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. ";

@Override
protected void init(VaadinRequest request) {

    VerticalLayout layout = new VerticalLayout();
    setContent(layout);

    // First Main horizontal split panel
    final HorizontalSplitPanel horizontal1 = new HorizontalSplitPanel();
    horizontal1.setHeight("100%");
    horizontal1.setSplitPosition(20, Sizeable.UNITS_PERCENTAGE);
    layout.addComponent(horizontal1);

    // add a label to the left area
    horizontal1.setFirstComponent(new Label(brownFox));

    // Second main horizontal split panel
    final HorizontalSplitPanel horizontal2 = new HorizontalSplitPanel();
    horizontal2.setHeight("100%");
    horizontal1.setSecondComponent(horizontal2);
    horizontal2.setSplitPosition(80, Sizeable.UNITS_PERCENTAGE);

    // First main vertical split panel
    final VerticalSplitPanel vertical1 = new VerticalSplitPanel();
    vertical1.setWidth("100%");
    horizontal2.setFirstComponent(vertical1);

    vertical1.setFirstComponent(new Label(brownFox));
    vertical1.setSecondComponent(new Label(brownFox));
    vertical1.setSplitPosition(50, Sizeable.UNITS_PERCENTAGE);
    horizontal2.setSecondComponent(new Label(brownFox));}

渲染布局为：

问题是 VerticalSplitPanel 的第二组件和拆分器。标签被隐藏，分割器不在屏幕中间。

感谢您的帮助。

Answer 1

VerticalLayout默认为自动/未定义高度，因此将其设置为100％以占用UI中的所有可用空间。

@Override
protected void init(VaadinRequest request) {

  VerticalLayout layout = new VerticalLayout();
  setContent(layout);
  // Add this
  layout.setHeight("100%");

  // The rest is the same
  ...