Question

在尝试调整浏览器大小时，我面临与项目重叠的问题。我尝试了很多不同的变化来使它工作，但结果仍然是不可接受的。

调整大小之前：

， B 和 C 包含在VerticalLayout中 - 我将其称为 root 。

根位于HorizontalLayout内 - UI的内容。
A 是一个简单的组件。
B 正在扩展VerticalLayout，里面包含2个HorizontalLayout。
C 只是一个组件 - Grid。

现在，当我试图调整我的浏览器大小时（如箭头所示） C 开始窃取其他组件。

调整大小后：

我想要实现的效果是我的网格（ C ）没有尝试适合我的浏览器。它不应该移动，只是隐藏 - 就像下面（绿色显示实际可见的部分）：

    /*ROOT class that extends VerticalLayout*/
    private void init()
    {
        super.setSizeFull();

        addA();
        addB();
        addC();
    }

    private void addA()
    {
        Label header = new Label();

        super.addComponent(header);
        super.setComponentAlignment(header, Alignment.MIDDLE_CENTER);
    }

    private void addB()
    {
        layoutB.setSizeFull();
        layoutB.setWidth("92%");
        super.addComponentsAndExpand(layoutB);
        super.setExpandRatio(layoutB, 0.3f);
        super.setComponentAlignment(layoutB, Alignment.MIDDLE_CENTER);
    }

    private void addC()
    {
        grid.setSizeFull();
        grid.setColumnReorderingAllowed(true);

        grid.setWidth("92%");
        super.addComponentsAndExpand(grid);
        super.setExpandRatio(grid, 0.6f);
        super.setComponentAlignment(grid, Alignment.BOTTOM_CENTER);
    }

正如您所见， C 的添加方式与 B 相同，但只有 C 正在移动。在此先感谢您的帮助！

我正在使用Vaadin 8。

@Edit：

@SpringUI(path = "/ui")
public class MyUI extends UI {

@Override
protected void init(VaadinRequest request) 
{
    Workspace workspace = new Workspace();

    HorizontalLayout root = new HorizontalLayout();
    root.setSizeFull();
    root.addComponentsAndExpand(workspace);

    setContent(root);
}

public class Workspace extends Panel
{
    public Workspace()
    {
        init();
    }

    private void init()
    {
        setSizeFull();
        addStyleName(ValoTheme.PANEL_BORDERLESS);

        VerticalLayout layout = new VerticalLayout();
        // by default width 100% and height undefined in Vaadin 8
        setContent(layout);

        // component A
        Label label = new Label("Test1");
        layout.addComponent(label);

        // component B
        HorizontalLayout bar = new HorizontalLayout();
        bar.addComponents(new Label("Label 1"), new Label("Label 2"));
        layout.addComponent(bar);

        // component C
        Grid<MyBean> grid = new Grid<>(MyBean.class);
        grid.setCaption("My Grid:");
        grid.setHeight("1000px");
        //grid.setHeightByRows(50); // same as fixed height
        List<MyBean> items = new LinkedList<>();
        IntStream.range(1, 100).forEach(i -> items.add(new MyBean("Item " + i)));
        grid.setItems(items);
        layout.addComponent(grid);
    }
}

    public static class MyBean {
        private String name;
        public MyBean(String name) { this.name = name; }
        public String getName() { return name; }
        public void setName(String name) { this.name = name; }
    }

}

Answer 1

看看这个工作示例：

@SpringUI(path = "/ui")
public class MyUI extends UI {

@Override
protected void init(VaadinRequest request) {
    Panel panel = new Panel();
    panel.addStyleName(ValoTheme.PANEL_BORDERLESS);
    panel.setSizeFull();

    VerticalLayout layout = new VerticalLayout();
    // by default width 100% and height undefined in Vaadin 8
    panel.setContent(layout);

    // component A
    Label label = new Label("Test1");
    layout.addComponent(label);

    // component B
    HorizontalLayout bar = new HorizontalLayout();
    bar.addComponents(new Label("Label 1"), new Label("Label 2"));
    layout.addComponent(bar);

    // component C
    Grid<MyBean> grid = new Grid<>(MyBean.class);
    grid.setCaption("My Grid:");
    grid.setHeight("1000px");
    //grid.setHeightByRows(50); // same as fixed height
    List<MyBean> items = new LinkedList<>();
    IntStream.range(1, 100).forEach(i -> items.add(new MyBean("Item " + i)));
    grid.setItems(items);
    layout.addComponent(grid);

    setContent(panel);
}

public static class MyBean {
    private String name;
    public MyBean(String name) { this.name = name; }
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }
}

}

Grid具有固定的高度（按像素或行数）。 VerticalLayout不需要扩展比率。 Panel中的布局将根据其子组件的需要增长。如果高度大于Panel的可用空间，则会显示滚动条。

Vaadin -layout重新调整重叠

1 个答案: