Vaadin - 中心自定义组件 [英] Vaadin - center custom component

问题描述

使用 Grails 2.3.9 和 Vaadin 插件 7.3.9

Using Grails 2.3.9 and Vaadin plugin 7.3.9

class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout layout = new VerticalLayout()
        layout.setMargin(true)

        SignInForm signInForm = new SignInForm()

        layout.addComponent(signInForm)

        layout.setComponentAlignment(signInForm, Alignment.MIDDLE_CENTER)

        layout.setSizeFull()
        setContent(layout)

    }
}

自定义组件

class SignInForm extends CustomComponent {
    Panel p = new Panel()

    public SignInForm() {
        p.setSizeUndefined()

        Label label = new Label("test");
        p.setContent(label);

        setCompositionRoot(p);
    }
}

这是它的样子:

如何将自定义组件水平居中?

How can I center the custom component horizontally?

推荐答案

将自定义组件放置在垂直布局内.设置自定义组件的大小未定义.设置垂直布局的大小完整 &将其与中心对齐.

Place the custom component inside a vetical layout. Set the size of the custom component undefined. Set the size of the vertical layout full & align it to the centre.

public void init(VaadinRequest request) {

    VerticalLayout vLayout = new VerticalLayout();
    SignInComponent signInComponent = new SignInComponent();
    vLayout.addComponent(signInComponent);
    vLayout.setSizeFull();
    vLayout.setComponentAlignment(signInComponent, Alignment.MIDDLE_CENTER);
    this.setContent(vLayout);

class SignInComponent extends CustomComponent  {

    public SignInComponent() {
        Panel p = new Panel();
        p.setSizeUndefined();
        Label label = new Label("test");
        p.setContent(label);
        this.setSizeUndefined();
        this.setCompositionRoot(p);
    }
}

或

使用面板而不是自定义布局:

Use a panel instead of custom layout:

public void init(VaadinRequest request) {

    VerticalLayout vLayout = new VerticalLayout();
    SignInPanel signInPanel = new SignInPanel();
    vLayout.addComponent(signInPanel);
    vLayout.setSizeFull();
    vLayout.setComponentAlignment(signInPanel, Alignment.MIDDLE_CENTER);
    this.setContent(vLayout);

}

class SignInPanel extends Panel  {

    public SignInPanel() {
        this.setSizeUndefined();
        Label label = new Label("test");
        this.setContent(label);
    }
}

两者的代码输出:

这篇关于Vaadin - 中心自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！