vaadin - Vaadin 21 和 ApplicationLayout 上的滚动问题

Question

我对需要滚动的应用程序布局和 View 有一个奇怪的问题:
如果我使用默认的应用程序布局创建一个应用程序，则抽屉切换位于顶部，我添加了一个全尺寸的 VerticalLayout 作为 View ，一切都按预期工作。但是，如果垂直内容超过浏览器窗口的高度(即使我将此内容放入滚动条)，整个 View 将滚动并在切换后消失，直到达到切换的高度，而不是滚动停止。
它接缝setHeight(100, Unit.Percentage)不考虑切换的高度。
有人有类似的问题吗？
编辑
将以下代码作为 View 放入 AppLayout 并在您的移动设备上打开它，例如iPhone，您将看到垂直滚动条:

@Route(value = "application/test", layout = ApplicationLayout.class)
@PageTitle("Test")
@RolesAllowed({"ROLE_NEWSLETTER_ADMIN", "ROLE_ORGANIZATION_ADMIN"})
public class TestView extends VerticalLayout implements BeforeEnterObserver {

    private MenuBar menu;
    private Grid<Person> grid;
    private Label footerLabel;

    public TestView() {
        this.setSizeFull();

        menu = new MenuBar();
        menu.addItem("New");
        menu.addItem("Edit");
        menu.addItem("Delete");
        this.add(menu);

        grid = new Grid<>(Person.class);
        this.add(grid);
        this.expand(grid);
        
        footerLabel = new Label("Number of objetcs: #");
        this.add(footerLabel);
    }

    @Override
    public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {

    }
}

应用布局:

public class ApplicationLayout extends AppLayout implements AfterNavigationObserver {

    private ApplicationService applicationService;
    private H1 headerTitle;

    public ApplicationLayout(ApplicationService applicationService) {
        this.applicationService = applicationService;

        createHeader();
        createDrawer();

        this.setPrimarySection(Section.DRAWER);
    }

    private void createHeader() {
        // Define the header
        HorizontalLayout header = new Header(new H1("Header"));
        addToNavbar(header);
    }
    
    private void createDrawer() {
        ....
    }
}

Answer 1

It seams that setHeight(100, Unit.Percentage) does not considers the height of the toggle.

正确的。 100% 是视口(viewport)的大小。所以如果你有例如下列

VerticalLayout vLayout = new VerticalLayout();
Button button = new Button();
button.setHeight(50, Unit.Pixels);
HorizontalLayout hLayout = new HorizontalLayout();
hLayout.setHeight(100, Unit.Percentage);
vLayout.add(button,hLayout);

这将产生 vLayout 高度大于视口(viewport)高度和滚动条出现的东西。相反，你应该这样做。

VerticalLayout vLayout = new VerticalLayout();
Button button = new Button();
button.setHeight(50, Unit.Pixels);
HorizontalLayout hLayout = new HorizontalLayout();
hLayout.setHeight(200, Unit.Pixels);
vLayout.add(button,hLayout);
vLayout.expand(hLayout); // or vLayout.setFlexGrow(1.0d, hLayout);