Java 垂直布局内的按钮不可单击Vaadin？

大家好，我有这个布局：

以下是班级的主要布局：

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

此布局类扩展垂直布局并构造布局的基本结构，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）都不可点击

问题在哪里

---

谢谢你的关注

你说得对。将样式“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索引。这会将一个组件（DOM中更具体的div）放在前面，覆盖z索引值较小的所有其他组件（通常为0）

如果你真的需要把这个样式应用到你的所有组件（对我来说很奇怪），请考虑添加更多的样式到具有较高Z-索引值的按钮。

---

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

我发现问题是由于在组件中添加了“v-ddwrapper-over”样式造成的。有人能解释一下原因吗？你认为这是由于z-index属性吗？但是，当按钮位于设置了v-ddwrapper-over的z索引布局内时，它们是如何位于布局内的呢？它们不应该是可点击的吗？是的，它们位于布局内。想象一下，厨房里有一张桌子，上面有一个苹果。你的桌子是你的布局，苹果是你的按钮。通常你可以拿你的苹果。但如果将z-index属性应用于表（而不是按钮/苹果），则该表将位于苹果的顶部。您可以使用Firefox开发工具检查这一点。打开vaadin页面并按F12。查找“样式编辑器”选项卡。然后，使用ctrl+f查找引用的样式。将z索引属性更改为-10。看看发生了什么？按钮现在可以点击。