在 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
  ...