java - 菜单布局+一些静态和可切换内容

Question

我的目标是拥有一个左侧有一个菜单、右侧有内容区域的用户界面。菜单应该始终可见，并且滚动内容区域不应滚动菜单。在内容区域中， View 应该是可切换的，并根据菜单中选择的内容进行更改。

但是，这对我来说很棘手:我还希望该区域中的一些“静态”内容保持不变，无论用户在菜单中选择哪个 View 。基本上，我希望在内容区域顶部显示一些文本，并在内容区域下方显示一些文本(但是，只有当用户向下滚动内容区域时，这不应该始终可见)。这是一张可能有助于理解我想要实现的目标的图片:

这是相关代码。基本上我有一个包含菜单和内容部分的水平布局。内容部分是一个垂直布局，我试图在其中堆积内容。此代码当前的问题是内容部分不可滚动，如果有内容不适合用户的窗口，它就会被忽略并且无法访问。请注意，我正在寻找的最终解决方案还必须有一个可以正常工作的菜单，这意味着即使用户滚动内容区域，菜单也应该保持可见且完整。

@Theme("valo")
public class ValoThemeUI extends UI {
ValoMenuLayout root = new ValoMenuLayout();
ComponentContainer viewDisplay = root.getContentContainer();
CssLayout menu = new CssLayout();
CssLayout menuItemsLayout = new CssLayout();

private Navigator navigator;
private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>();

@Override
protected void init(VaadinRequest request) {
    setContent(root);
    root.setWidth("100%");
    root.addMenu(buildMenu());
    addStyleName(ValoTheme.UI_WITH_MENU);
    navigator = new Navigator(this, viewDisplay);
    navigator.addView("textfields", TextFields.class);

}

CssLayout buildMenu() {
    // Add items
    menuItemsLayout.setPrimaryStyleName("valo-menuitems");
    menu.addComponent(menuItemsLayout);

    Button b = new Button("Text Fields", new ClickListener() {
        @Override
        public void buttonClick(ClickEvent event) {
        }
    });
    b.setPrimaryStyleName(ValoTheme.MENU_ITEM);
    menuItemsLayout.addComponent(b);
    return menu;
}

实际的“根”布局创建代码。请注意，仅使用 setSizeUndefine() 并不是解决方案。它确实使内容区域可滚动，但破坏了菜单。

public class ValoMenuLayout extends HorizontalLayout {

CssLayout contentArea = new CssLayout();

CssLayout menuArea = new CssLayout();

public ValoMenuLayout() {
    setSizeFull();  //if this is setSizeUndefined it breaks the menu.

    VerticalLayout ver = new VerticalLayout();

    menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);

    contentArea.setPrimaryStyleName("valo-content");
    contentArea.addStyleName("v-scrollable");
    contentArea.setSizeFull();

    ver.addComponent(new Label("yyyyyyyyyyyyyyyyy"));
    ver.addComponent(contentArea);
    ver.addComponent(new Label("xxxxxxxxxxxxx"));
    addComponents(menuArea, ver);
    setExpandRatio(ver, 1);
}

public ComponentContainer getContentContainer() {
    return contentArea;
}

public void addMenu(Component menu) {
    menu.addStyleName(ValoTheme.MENU_PART);
    menuArea.addComponent(menu);
}

Answer 1

这是通过将菜单旁边的右侧组件包装在面板组件中来解决的。