Vaadin 流中的可滚动布局

Question

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

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

Answer 1

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

---

是的，这是可能的，尽管没有现有的组件可以自动执行此操作。
要走的方法是将垂直布局(用于垂直滚动条)放置在另一个组件中，并将该垂直布局的display属性从flex设置为block。(感谢迭戈·桑兹·维拉弗鲁埃拉在瓦丁论坛上)

我制作了自己的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);
}
}

Answer 2

现在有一个用于滚动的官方组件：

https://vaadin.com/docs/latest/components/scroller