按钮使用vaadin显示在页面上

我试图在页面上显示简单的按钮 我的代码如下所示

@org.springframework.stereotype.Component("vaadinbasic.VaadinBasicUi")
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
public class VaadinBasicUi extends UI {

    @Override
    protected void init(VaadinRequest request) {
        Button button = new Button("Click me!");
        button.setWidth("100");
        button.setHeight("50");
        button.addClickListener(new ClickListener() {
           @Override
           public void buttonClick(ClickEvent event) {
               Notification.show("You clicked me!");
           }
        });

        HorizontalLayout mainLayout = new HorizontalLayout();
        mainLayout.setSizeFull();
        mainLayout.addComponent(button);
        setContent(mainLayout);
    }

}

<div class="v-button v-widget v-has-width v-has-height" tabindex="0" role="button" style="width: 100px; height: 50px;">
    <span class="v-button-wrap">
        <span class="v-button-caption"></span>
    </span>

但最终结果是这样的

@org.springframework.stereotype.Component("vaadinbasic.VaadinBasicUi")
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
public class VaadinBasicUi extends UI {

    @Override
    protected void init(VaadinRequest request) {
        Button button = new Button("Click me!");
        button.setWidth("100");
        button.setHeight("50");
        button.addClickListener(new ClickListener() {
           @Override
           public void buttonClick(ClickEvent event) {
               Notification.show("You clicked me!");
           }
        });

        HorizontalLayout mainLayout = new HorizontalLayout();
        mainLayout.setSizeFull();
        mainLayout.addComponent(button);
        setContent(mainLayout);
    }

}

<div class="v-button v-widget v-has-width v-has-height" tabindex="0" role="button" style="width: 100px; height: 50px;">
    <span class="v-button-wrap">
        <span class="v-button-caption"></span>
    </span>

此块的HTML标记如下所示

@org.springframework.stereotype.Component("vaadinbasic.VaadinBasicUi")
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
public class VaadinBasicUi extends UI {

    @Override
    protected void init(VaadinRequest request) {
        Button button = new Button("Click me!");
        button.setWidth("100");
        button.setHeight("50");
        button.addClickListener(new ClickListener() {
           @Override
           public void buttonClick(ClickEvent event) {
               Notification.show("You clicked me!");
           }
        });

        HorizontalLayout mainLayout = new HorizontalLayout();
        mainLayout.setSizeFull();
        mainLayout.addComponent(button);
        setContent(mainLayout);
    }

}

<div class="v-button v-widget v-has-width v-has-height" tabindex="0" role="button" style="width: 100px; height: 50px;">
    <span class="v-button-wrap">
        <span class="v-button-caption"></span>
    </span>

---

有什么问题吗？

您需要应用主题 e、 g

---

问题是您使用的是默认的驯鹿主题，它假定按钮的高度未定义。在标记中，为按钮定义50px的高度。修复方法是从标记中删除高度属性或使用另一个支持不同高度按钮的主题。

请不要将代码添加为屏幕截图，而是将代码添加到问题中，以供将来参考。这使得人们不可能真正尝试它。你试过不同的主题和浏览器吗？您是否尝试过研究浏览器开发工具的问题？（例如萤火虫）哎呀。我的错。我试过了。在所有浏览器中，我都有相同的问题。请同时说明vaadin版本和您使用的主题。答案并没有真正解释问题的原因。请参阅我的答案以获得解释。