Vaadin Flow 中的可滚动布局

Question

在 Vaadin Flow 中，不存在本质上是可滚动布局的组件。 在 Vaadin 8 中，这是由 Panel.

完成的

有没有办法在 Vaadin Flow 中实现可滚动的组件？

Answer 1

编辑： 我现在发布了一个附加组件 here，它提供 class VerticalScrollLayout，还有 class HorizontalScrollLayout。如果有改进的建议，请随时联系我或在这里发表评论。

---

是的，这是可能的，尽管没有现有的组件可以自动执行此操作。
方法是在另一个组件中放置一个 VerticalLayout（对于 vertical 滚动条），然后从 [=14= 设置该 VerticalLayout 的 display 属性 ] 到 block。 （在 vaadin forum 中归功于 Diego Sanz Villafruela）

我自己制作了 VerticalScrollLayout class 可以为您完成这一切，因此 在视图中使用它就像使用简单的 VerticalLayout[=32] =]

public class VerticalScrollLayout extends VerticalLayout {
    private VerticalLayout content;

    public VerticalScrollLayout(){
        preparePanel();
    }

    public VerticalScrollLayout(Component... children){
        preparePanel();
        this.add(children);
    }

    private void preparePanel() {
        setWidth("100%");
        setHeight("100%");
        getStyle().set("overflow", "auto");

        content = new VerticalLayout();
        content.getStyle().set("display", "block");
        content.setWidth("100%");
        content.setPadding(false);
        super.add(content);
    }

    public VerticalLayout getContent(){
        return content;
    }

    @Override
    public void add(Component... components){
        content.add(components);
    }

    @Override
    public void remove(Component... components){
        content.remove(components);
    }

    @Override
    public void removeAll(){
        content.removeAll();
    }

    @Override
    public void addComponentAsFirst(Component component) {
        content.addComponentAtIndex(0, component);
    }
}