模拟 Vaadin 8 窗口标题的 Vaadin 10 对话框

Question

使用 Vaadin Flow Java API 我想模拟 Vaadin 8 窗口功能：特别是我需要模拟 Caption 行为。 我的意思是一个固定的顶部“标题”不能作为对话框的真实内容滚动。任何人都可以告诉我一些我可以学习的例子吗？ 提前致谢

这是我找到的解决方法。

public MainView() {
    Button button = new Button("Click me",
            event -> {
                Dialog dialog = new Dialog();
                HorizontalLayout horizontalLayout = new HorizontalLayout();
                VerticalLayout verticalLayout = new VerticalLayout();
                Div headerDiv = new Div();
                Div bodyDiv = new Div();
                bodyDiv.getElement().getStyle().set("overflow", "auto");
                bodyDiv.getElement().getStyle().set("max-height", "420px"); // !!!
                dialog.add(headerDiv, bodyDiv);
                headerDiv.add(horizontalLayout);
                bodyDiv.add(verticalLayout);
                horizontalLayout.add(new Label("Hi there !"));
                for (int i = 1; i <= 20; i++) {
                    verticalLayout.add(new TextField("TextField_" + i));                        
                }
                dialog.open();                  
            });
    add(button);
}

问题是我必须修复最大高度大小以避免滚动所有包含的组件。所以我不能利用对话框容器的自动大小行为。也尝试使用 setFlexGrow，但我没有找到解决方案。 有什么提示吗？

Answer 1

在 Vaadin 10+ 中没有称为 Window 的组件，但有称为 Dialog 的组件。它没有像窗口那样的标题，但在其他方面它具有相似的基线。 IE。它是弹出窗口。根据您的问题，您已经发现了。

Dialog 本身是组件容器，这意味着您可以在其中添加组件。我只会创建例如两个 Div（Vaadin 10 中最简单的布局组件）。我会将第一个样式设置为具有固定高度并将标题放在那里。然后我会将component.getElement().getStyle().set("overflow", "auto") 应用于另一个，即实际的内容主体。提到的样式将启用可滚动功能。根据您的需要，您也可以使用 VerticalLayout / Horizo​​ntalLayout 而不是 Div。

另请参阅：https://vaadin.com/docs/v10/flow/migration/5-components.html