Vaadin Flow中的可滚动布局

Question

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

有什么方法可以在Vaadin Flow中实现可滚动组件？

Answer 1

编辑：我现在在这里发布了一个加载项，该加载项提供了类VerticalScrollLayout以及类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);
    }
}