垂直布局 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 方法在左侧菜单列中添加了一个按钮，并为其添加了一个点击监听器，这样当用户点击该按钮时，右侧的内容布局应该将其内容从当前切换到与按钮绑定的内容，现在在 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。