java - 垂直布局 Vaadin 中的按钮不可点击？

Question

大家好，我有这个布局:

这是 MainLayout 类:

public class MainLayout extends VerticalLayout {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    private VerticalLayout upperSection = new VerticalLayout();
    private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
    private VerticalLayout menuLayout = new VerticalLayout();
    private VerticalLayout contentLayout = new VerticalLayout();

    public MainLayout() {
        upperSection.addComponent(new Label("Header"));
        menuLayout.addComponent(new Label("Menu"));
        contentLayout.addComponent(new Label("Content"));
        lowerSection.addComponent(menuLayout);
        lowerSection.addComponent(contentLayout);
        addComponent(upperSection);
        addComponent(lowerSection);
        showBorders();

        setSizeFull();
        lowerSection.setSizeFull();
        // menuLayout.setSizeFull();
        contentLayout.setSizeFull();
        setExpandRatio(lowerSection, 1);

        //lowerSection.setSplitPosition(30);
    }

    private void showBorders() {
        String style = "v-ddwrapper-over";
        setStyleName(style);
        upperSection.setStyleName(style);
        lowerSection.setStyleName(style);
        menuLayout.setStyleName(style + "-menu");
        contentLayout.setStyleName(style + "-content");
    }

    @SuppressWarnings("serial")
    public void addMenuOption(String caption, final Component component) {
        Button button = new Button(caption);
        menuLayout.addComponent(button);

        button.addClickListener(new ClickListener() {

            @Override
            public void buttonClick(ClickEvent event) {
                contentLayout.removeAllComponents();
                contentLayout.addComponent(component);
            }
        });
    }
}

该布局类扩展了VerticalLayout并构建了布局的基本结构，addMenuOption方法在左侧菜单栏中添加了一个按钮和一个点击监听器，当用户点击按钮时右侧的内容布局应该将其内容从当前内容切换到与按钮绑定(bind)的内容，现在在 UI 的 init 方法中:

protected void init(VaadinRequest request) {
        MainLayout layout = new MainLayout();
        layout.addMenuOption("Option 1", new Label("Component 1"));
        layout.addMenuOption("Option 2", new Label("Component 2"));

        setContent(layout);
}

其实我得到的结果是这样的:

但我的问题是两个按钮(选项 1、选项 2)都不可点击。

问题出在哪里？

感谢关注!

Answer 1

你是对的。向组件之一添加样式“v-ddwrapper-over”会使按钮不可点击。让我们看一下 style.css 文件中这个样式的定义。

.appName .v-ddwrapper-over:before, .so5 .v-ddwrapper-over:after {
content: "";
position: absolute;
z-index: 10;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 0 solid #197de1;
}

重要的是第四行有z-index。这会将一个组件(在 DOM 中更具体地说是 div)带到前面，覆盖所有其他具有较小 z-index 值(通常为 0)的组件。

如果您真的需要将此样式应用于所有组件(对我来说似乎很奇怪)，请考虑为具有更高 z-index 值的按钮添加额外的样式。

了解有关 z-index 属性的更多信息 here .