Vaadin Flow 中的可滚动布局

Question

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

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

Answer 1

编辑：我现在发布了一个附加组件here，它提供类VerticalScrollLayout，以及类HorizontalScrollLayout强>。如果有改进建议，请随时与我联系或在此处发表评论。

---

是的，这是可能的，尽管没有自动执行此操作的现有组件。
可行的方法是在另一个组件中放置一个 VerticalLayout（对于 vertical 滚动条），并将该 VerticalLayout 的 display 属性从 flex 设置为 block。 （感谢 Diego Sanz Villafruela 在vaadin forum）

我已经创建了自己的 VerticalScrollLayout 类来为您完成所有工作，因此在视图中使用它就像使用简单的 VerticalLayout 一样简单

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);
    }
}