按钮在使用 vaadin 的页面上显示为奇数

Question

我想在页面上显示简单的按钮我的代码看起来像这样

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

}

但最终结果是这样的

此块的 HTML 标记如下所示

<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>

有什么问题？

Answer 1

您需要应用主题例如

@Theme("testvaadin")
public class VaadinBasicUi extends UI {

Answer 2

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

按钮在使用 vaadin 的页面上显示为奇数

button is displayed odd on the page using vaadin

vaadin