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您设置为完整大小的类型.您的layout意愿将扩展到浏览器本身.会发生的是,如果你layout是a VerticalLayout,它的高度是100%,但它只有两个面板,高度分别为300和100.由于你没有指定任何扩展比例,因此Vaadin将50%的屏幕分配给panel其他50%Logo,因此你会在两者之间产生很大的差距.

要修复它,你可以做两件事:

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

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