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的类型。您的layout将与浏览器本身一样扩展。如果你的layout是VerticalLayout，它的高度是100％，但它只有两个高度分别为300和100的面板。由于您未指定任何expand ratio，因此Vaadin将屏幕的50％分配给panel，将另外50％分配给Logo，因此您之间会有很大差距。

要解决此问题，您可以做两件事：

请勿使用layout.setSizeFull();而是使用layout.setSizeUndefined();
使用扩展比率进行游戏，以便顶部panel获得更少的空间，Logo获得更多空间：layout.setExpandRatio(panel, 0.2f);和layout.setExpandRatio(Logo, 0.8f);。这种方法的问题是，如果您的浏览器高度小于400像素，您的布局将被切断。

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

Answer 2

有两种方法可以做到这一点：

正如@Abbas所说

layout.setExpandRatio(panel, float);
或者您可以在css文件中添加属性：

layout.setStyleName("my-layout");

在css中添加：

.v-verticallayout-my-layout .v-slot{
  height: auto !important;
}

这将完成这项工作。我尝试了两种方法，但他们都在工作。

vaadin面板之间的巨大空间

2 个答案: