scrollview - Vaadin Flow 中的可滚动布局

Question

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

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

Answer 1

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

---

是的，这是可能的，尽管没有自动执行此操作的现有组件。
要走的路是将一个 VerticalLayout （用于垂直滚动条）放在另一个组件中，并将display该 VerticalLayout 的属性设置flex为block。（感谢vaadin 论坛中的 Diego Sanz Villafruela ）

我已经创建了自己的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);
    }
}