如何将滚动条添加到 Vaadin 布局

Posted 2023-02-23

【中文标题】如何将滚动条添加到 Vaadin 布局

【英文标题】：How to add scrollbar to Vaadin layout

【发布时间】：2014-05-22 18:27:21

【问题描述】：

我发现了很多问题，人们询问如何在 Vaadin 布局中隐藏滚动条，但我的问题是 Vaadin 没有显示任何滚动条。 例如我可以有这个代码：

HorizontalLayout layout = new HorizontalLayout();
layout.setSizeUndefined(); // I also tried setSizeFull()
for(Integer i = 1; i <= 15; i++) 
    layout.addComponent(new Button("Test button #" + i.toString());

但是当我运行这段代码时，当浏览器窗口太小而无法全部显示时，页面上的按钮就会被切断。永远不会出现滚动条。

我也尝试创建面板，然后将我的布局添加到此面板。我已经测试了panel.addComponent(foo) 和panel.setContent(foo)，我也尝试设置panel.setScrollable(true)。没有任何成功。

有没有办法在某种 Vaadin 布局中添加滚动条？我使用 Vaadin 6.8.7。 提前致谢！

---

有我的完整代码：

private ComponentContainer openZoomifyLayout() 
    Panel panel = new Panel();
    Panel panel2 = new Panel();

    middlePanel = new MiddlePanel();

    VerticalLayout mw = new VerticalLayout();
    mw.setSizeFull();

    HorizontalLayout sp = new HorizontalLayout();
    Panel photos = new Panel();
    photos.setSizeUndefined();

    mw.addComponent(panel);
    mw.addComponent(panel2);
    mw.addComponent(sp);

    mw.setExpandRatio(sp, 99);
    mw.setExpandRatio(panel, 0);
    mw.setExpandRatio(panel2, 0);

    panel2.addComponent(middlePanel);

    mw.setComponentAlignment(panel, Alignment.TOP_CENTER);
    mw.setComponentAlignment(panel2, Alignment.TOP_CENTER);

    photos.setContent(table);
    photos.setScrollable(true);
    sp.addComponent(photos);
    sp.addComponent(createMainDetail());

    return mw;

这个方法用在扩展Window的类中，所以在初始化的时候有：setContent(openZoomifyLayout());

【问题讨论】：

你能展示你的主要布局吗？可能在布局链的某处有一个固定高度的组件

我已经添加了主布局的代码.. :-)

【参考方案1】：

您将需要一个面板。您还需要确保面板的大小是固定的而不是“自然的”。如果它的大小是“自然的”，则面板将被放大，直到其内容可以完全显示。面板的默认大小是自然的，这就是您看不到任何滚动条的原因。

【参考方案2】：

您的 sp HorizontalLayout 和您的 photos Panel 需要全尺寸。

正如您在 Vaadin Book 章节中所读到的那样6.6.1

通常，如果面板在某个方向上具有未定义的大小，如 默认垂直，它将适合内容的大小并增长为 内容增长。但是，如果它具有固定或百分比大小，并且 它的内容变得太大而无法放入内容区域，滚动条 将针对特定方向出现。面板中的滚动条是 浏览器本机处理溢出：自动属性 CSS。

【讨论】：

这绝对是完美的！你救了我！它运作良好。谢谢。

【参考方案3】：

按照以下步骤操作：

外部布局需要在相关方向上固定或百分比大小（例如，VerticalLayout 需要固定或百分比高度） 内部布局需要在那个方向上未定义的大小 外部布局需要stylenamev-scrollable

例如

public class SomeView extends CustomComponent implements View

        this.addStyleName("v-scrollable");
        this.setHeight("100%");
        VerticalLayout content = new VerticalLayout();
        // content has undefined height by default - just don't set one
        setCompositionRoot(content);
...

这将使CustomComponent 显示一个滚动条，而content 根据需要增长。