Question

我有一个包含两个（大）组件的 VerticalLayout ：网格和图表。图表根据网格中的选择进行更新。我正在使用 VerticalLayout 的 replaceComponent 方法。因此，在网格中选择项目时，图表会更新，但浏览器会向上滚动而不是保持滚动位置。这可能是因为Vaadin首先从 DOM 中删除了图表，然后添加了新图表。

更换组件时是否可以保持滚动位置？

到目前为止，我还没有在网上找到任何答案。如有必要，我可以制作 SSCCE 。

Answer 1

UI object包含getScrollTop和setScrollTop方法。

有了这些，应该可以满足您的要求。在删除组件之前，请使用getScrollTop检索滚动条位置，修改对象后，使用setScrollTop到之前保存的值。

Answer 2

感谢André我发现在更换的组件上设置固定高度解决了这个问题。这是一个SSCCE：

@Override
protected void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    layout.setSpacing(true);
    setContent(layout);

    TextField t1 = new TextField("Big field (1)");
    t1.setWidth("300px");
    t1.setHeight("1000px");
    layout.addComponent(t1);

    TextField t2 = new TextField("Big field (2)");
    t2.setWidth("300px");
    t2.setHeight("1000px");
    layout.addComponent(t2);

    final Component[] toReplace = new Component[] { t2 };

    Button button = new Button("Click Me");
    button.addClickListener(event -> {
        Table t = new Table();
        t.addContainerProperty("Name", String.class, null);
        for (int i = 0; i < 20; i++) {
            t.addItem(new Object[] { "" + i }, i);
        }
        //t.setHeight("200px");

        layout.replaceComponent(toReplace[0], t);
        toReplace[0] = t;
    });
    layout.addComponent(button);

    setContent(layout);
}

未设置高度时，会出现滚动问题。

更换组件时，不要滚动Vaadin

2 个答案: