java - vaadin 面板之间的巨大空间

Question

我编写的这段代码创建了 2 个面板。目的是让其中一个直接在另一个之上，中间没有空间，但问题是它们之间存在巨大的差距。

谁能帮我解决这个问题？

代码:

        Panel panel = new Panel();
        Panel Logo = new Panel();

        VerticalLayout layout1 = new VerticalLayout();
        VerticalLayout layout2 = new VerticalLayout();
        panel.setWidth("500px");
        panel.setHeight("300px");
        Logo.setWidth("500px");
        Logo.setHeight("100px");
        Logo.addStyleName(Runo.PANEL_LIGHT);
        Label label = new Label("test");
        label.setWidth(null);
        Button test = new Button("test");
        first.setStyleName("test");;
        first.setClickShortcut(KeyCode.ENTER, null);

        layout1.addComponent(test);
        layout2.addComponent(label);
        layout.addComponent(Logo);
        layout.addComponent(panel);
        layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
        layout1.setComponentAlignment(test, Alignment.MIDDLE_CENTER);
        layout2.setComponentAlignment(label, Alignment.MIDDLE_CENTER);
        layout.setSizeFull();
        layout1.setSizeFull();
        layout2.setSizeFull();
        setContent(layout);
        panel.setContent(layout1);
        Logo.setContent(layout2);

Answer 1

这取决于您设置为全尺寸的布局类型。您的布局 将像浏览器本身一样扩展。如果您的 layout 是 VerticalLayout，它的高度是 100%，但它只有两个高度分别为 300 和 100 的面板。由于您没有指定任何 expand ratio ，Vaadin 将 50% 的屏幕分配给 panel，将另外 50% 的屏幕分配给 Logo，因此两者之间有很大的差距。

要修复它，您可以做两件事:

1. 不要使用 layout.setSizeFull(); 而是使用 layout.setSizeUndefined();
2. 调整扩展比例，让顶部的 panel 获得更少的空间，而 Logo 获得更多的空间:layout.setExpandRatio(panel, 0.2f); 和 layout.setExpandRatio(Logo, 0.8f);。这种方法的问题在于，如果您的浏览器高度小于 400 像素，您的布局将被截断。

我花了一段时间和许多试验/错误来学习这个概念。请务必仔细阅读 this继续之前的页面。