Vaadin 21 和 ApplicationLayout 的滚动问题

Question

我的应用程序布局和需要滚动的视图有一个奇怪的问题：

如果我使用默认的应用程序布局创建应用程序，则抽屉开关位于顶部，并且我添加了一个具有全尺寸的 VerticalLayout 作为视图，一切都按预期工作。但是，如果垂直内容超过了浏览器窗口的高度（即使我将此内容放入滚动条），整个视图都会滚动并消失在切换按钮的后面，直到达到切换按钮的高度，然后滚动停止。 setHeight(100, Unit.Percentage) 似乎没有考虑切换的高度。

有人有类似的问题吗？

编辑

将以下代码作为视图放入 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

setHeight(100, Unit.Percentage) 不考虑切换的高度。

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

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 高度大于视口高度和滚动条出现的东西。相反，您应该这样做。

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);