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

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

Answer 2

您需要应用主题 e.g。

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