如何使滚动条出现在 Window 和未定义大小的面板中？

Question

在下面的示例中 - window with Panel 增长直到达到浏览器 window 限制。之后面板内容变为可滚动但没有滚动条出现。如果我将面板设置为固定大小的滚动条，则按照文档显示。

有人可以建议 Vaadin 模式在 Window 或面板大小达到浏览器 window 限制时实现滚动条吗？

public class DemoUI extends UI {

@Override
protected void init(VaadinRequest vaadinRequest) {
    VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();
    Button demo1 = new Button("Question");
    demo1.addClickListener(new Button.ClickListener() {
        @Override
        public void buttonClick(Button.ClickEvent clickEvent) {
            Window window = new Window();
            window.setClosable(true);
            window.center();
            window.setResizable(true);
            window.setModal(false);
            window.setContent(new UndefWindow(window));

            addWindow(window);
        }
    });
    layout.addComponent(demo1);
    setContent(layout);
}
}

public class UndefWindow extends VerticalLayout {

private Window window;
public UndefWindow(Window window){
    this.window = window;
    Panel panel = new Panel();
    VerticalLayout layout = new VerticalLayout();
    Button add10 =new Button("Add 10");
    add10.addClickListener(new Button.ClickListener() {
        @Override
        public void buttonClick(Button.ClickEvent clickEvent) {
            for (int i=0; i <10; i++){
                layout.addComponent(new Label("Label: "+i));
            }
            window.center();
        }
    });
    layout.addComponent(add10);
    panel.setContent(layout);
    addComponent(panel);
    setExpandRatio(panel, 1.0f);

}
}

编辑：我能够通过 SizeReporter 插件实现这一点 - 代码如下

SizeReporter

public class UndefWindow extends VerticalLayout {

private Window window;
VerticalLayout root;
int rootHeight;
public UndefWindow(Window window, VerticalLayout root){
    this.window = window;
    this.root = root;

    Panel panel = new Panel();
 //   panel.setHeight("400px");

    SizeReporter sizeReporterRoot = new SizeReporter(root);
    sizeReporterRoot.addResizeListener(new ComponentResizeListener() {
        @Override
        public void sizeChanged(ComponentResizeEvent event) {
            System.out.println("Root size: " + event.getWidth() + " x " + event.getHeight());
            rootHeight = event.getHeight();
        }
    });
    SizeReporter sizeReporter = new SizeReporter(panel);
    sizeReporter.addResizeListener(new ComponentResizeListener() {
        @Override
        public void sizeChanged(ComponentResizeEvent event) {
            System.out.println("Panel size: " + event.getWidth() + " x " + event.getHeight());
            if(event.getHeight()>rootHeight){
                window.setHeight(rootHeight-60, Unit.PIXELS);
                //window.center();
                panel.setHeight(rootHeight-60, Unit.PIXELS);
            }else
                window.center();
        }
    });

    VerticalLayout layout = new VerticalLayout();

    Button add10 =new Button("Add 10");
    add10.addClickListener(new Button.ClickListener() {
        @Override
        public void buttonClick(Button.ClickEvent clickEvent) {
            for (int i=0; i <10; i++){
                layout.addComponent(new Label("Label: "+i));
            }
        }
    });
    addComponent(add10);
    panel.setContent(layout);
    addComponent(panel);

}
}

Answer 1

你的Window内容有点过于复杂了。在 Vaadin 中，Window 本身扩展了 Panel，因此您根本不需要额外的 Panel。所以我把它剥离了。此外，为了布局正常工作，您希望未定义 VerticalLayout 高度，即增长直到满足浏览器 window 大小。为了面板滚动在那种情况下工作，需要有一些定义高度的内容，在这种情况下是标签，所以我将定义的高度设置为标签。然后添加标签，会增加VerticalLayout的尺寸，一旦超过浏览器高度，Panel就会有滚动条。

public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        Button demo1 = new Button("Question");
        demo1.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(Button.ClickEvent clickEvent) {
                Window window = new Window("Window");
                window.setClosable(true);
                window.center();
                window.setResizable(true);
                window.setModal(false);
                window.setContent(new UndefWindow(window));

                addWindow(window);
            }
        });
        layout.addComponent(demo1);
        setContent(layout);
    }

    public class UndefWindow extends VerticalLayout {
        private Window window;
        public UndefWindow(Window window){
            this.window = window;
            Button add10 =new Button("Add 10");
            add10.addClickListener(new Button.ClickListener() {
                @Override
                public void buttonClick(Button.ClickEvent clickEvent) {
                    for (int i=0; i <10; i++){
                        Label label = new Label("Label: "+i);
                        label.setHeight("38px");    
                        addComponent(label);
                    }
                    window.center();
                }
            });
            addComponent(add10);
        }
    }
}

如何使滚动条出现在 Window 和未定义大小的面板中？

How make scrollbar appear in Window with Panel with undefined size?

panel

scrollbar

vaadin