Vaadin - 中心自定义组件答案

【问题标题】：Vaadin - center custom componentVaadin - 中心自定义组件
【发布时间】：2015-04-18 00:04:11
【问题描述】：

使用 Grails 2.3.9 和 Vaadin 插件 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);
    }
}

看起来是这样的：

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

【问题讨论】：

我的回答有帮助吗？

标签： vaadin vaadin7

【解决方案1】：

将自定义组件放置在垂直布局内。设置自定义组件的大小未定义。将垂直布局的大小设置为 full 并将其对齐到中心。

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

或

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

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

两者的代码输出：

【讨论】：

你使用了自定义组件类吗？我通过将所有代码移动到我的MyUI 类中来让它工作。但是在我的示例中使用自定义组件并没有居中。
啊，我以为你可以对自定义组件做同样的事情，我看到了这个问题。见编辑。
谢谢，Panel 就可以了。现在可以使用了。
没问题！编辑了我的答案以包含一个将自定义组件居中的解决方案。
@cfrick 他们都工作。我最终将setSizeUndefined 添加到我的自定义组件中。

【解决方案2】：

如果有人需要 - 如何以最少的 UI 类使用率居中自定义组件（需要导航器组件）：

组件：

public class LoginPanel extends Panel {

private TextField loginField;

private PasswordField passField;

private Button signInBtn;

public LoginPanel(){
    initComponents();
    buildLoginPanel();
}

private void initComponents(){
<omitted>
}
public void buildLoginPanel(){
<omitted>
}

使用组件的视图：

public class LoginView extends VerticalLayout implements View {

    private LoginPanel loginPanel;

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event) {

    }

    public LoginView(LoginPanel loginPanel){
        setSizeFull();
        addComponent(loginPanel);
        setComponentAlignment(loginPanel,Alignment.MIDDLE_CENTER);
    }
}

界面入口点：

 @Override
 protected void init(VaadinRequest request) {
        Navigator navi = new Navigator(UI.getCurrent(),this);
        navi.addProvider(viewProvider);
        navi.navigateTo("login");
   }

P.S 在这样做之后 - 你的组件将被集中

P.S.S 如果有人在某些方面不喜欢使用 Navigator，只需在所有地方删除 View 而不是 navigator.navaigateTo(...) 使用 setContent(new LoginView()) 或类似的东西

希望这会有所帮助

【讨论】：