Question

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

当窗口或面板大小达到浏览器窗口限制时，是否可以建议Vaadin模式实现滚动条？

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高度，即增长直到满足浏览器窗口大小。为了使Panel滚动在该场景中工作，需要有一些定义高度的内容，在这种情况下它是Label，所以我将定义的高度设置为Label。然后添加标签，将添加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);
        }
    }
}

如何在带有未定义大小的面板的窗口中显示滚动条？

1 个答案: