无法正确对齐组件

Question

我想像这样在 window 中对齐我的组件

问题是，无论我如何尝试使用布局和设置宽度和高度 - 它要么在 window 的顶部（几乎在边界），要么离中心太远。

目前看起来像这样

我的 window 代码如下所示

public MakeChoiceWindow(TextPage page) {
    setHeight("300");
    setWidth("550");

    VerticalLayout windowLayout = new VerticalLayout();
    windowLayout.setSizeFull();


    VerticalLayout wrapped = new VerticalLayout();
    wrapped.setWidth("520");
    wrapped.setHeight("250");

    HorizontalLayout textAndChoiceLayout = new HorizontalLayout();
    textAndChoiceLayout.setWidth("400");

    wrapped.addComponent(new Label(" "));

    choiceMessageArea = new TextArea();
    choiceMessageArea.setValue(page.getTextMessage());
    choiceMessageArea.setWidth("250");
    choiceMessageArea.setHeight("150");
    textAndChoiceLayout.addComponent(choiceMessageArea);
    textAndChoiceLayout.setComponentAlignment(choiceMessageArea, Alignment.TOP_LEFT);

    choiceRadioGroup = new OptionGroup("Your choice");
    for(int i = 0; i < page.numberOfChoices(); i++) {
        choiceRadioGroup.addItem(page.getChoice(i));
    }
    choiceRadioGroup.select(page.getChoice(0));
    choiceRadioGroup.setHeight("100");
    textAndChoiceLayout.addComponent(choiceRadioGroup);
    textAndChoiceLayout.setComponentAlignment(choiceRadioGroup, Alignment.TOP_RIGHT);

    wrapped.addComponent(textAndChoiceLayout);
    wrapped.setComponentAlignment(textAndChoiceLayout, Alignment.MIDDLE_CENTER);

    makeChoiceButton = new Button();
    makeChoiceButton.setWidth("100");
    makeChoiceButton.setIcon(FontAwesome.CHECK);
    makeChoiceButton.addClickListener(new ClickListener() {

        @Override
        public void buttonClick(ClickEvent event) {
            MakeChoiceWindow.this.close();
        }

    });

    wrapped.addComponent(makeChoiceButton);
    wrapped.setComponentAlignment(makeChoiceButton, Alignment.BOTTOM_RIGHT);

    windowLayout.addComponent(wrapped);
    windowLayout.setComponentAlignment(wrapped, Alignment.TOP_CENTER);

    setContent(windowLayout);
    center();
    setModal(true);
    setResizable(false);
}

我应该修复什么？

Answer 1

好吧，我能够以某种方式对齐组件。

因此并不完美（也许我应该调整组件的大小）

public MakeChoiceWindow(TextPage page) {
    setCaption("Suddenly!");
    setHeight("300");
    setWidth("550");

    VerticalLayout windowLayout = new VerticalLayout();
    windowLayout.setWidth("500");
    windowLayout.setHeight("230");

    HorizontalLayout horizontalLayout = new HorizontalLayout();
    horizontalLayout.setWidth("480");
    horizontalLayout.setHeight("200");

    TextArea textMessageArea = new TextArea();
    textMessageArea.setValue(page.getTextMessage());
    textMessageArea.setWidth("360");
    textMessageArea.setHeight("180");
    textMessageArea.setEnabled(false);

    horizontalLayout.addComponent(textMessageArea);
    horizontalLayout.setComponentAlignment(textMessageArea, Alignment.MIDDLE_LEFT);

    OptionGroup choiceRadioGroup = new OptionGroup("Your choice");
    for(int i = 0; i < page.numberOfChoices(); i++) {
        choiceRadioGroup.addItem(page.getChoice(i));
    }
    choiceRadioGroup.select(page.getChoice(0));
    horizontalLayout.addComponent(choiceRadioGroup);
    horizontalLayout.setComponentAlignment(choiceRadioGroup, Alignment.MIDDLE_RIGHT);

    windowLayout.addComponent(horizontalLayout);
    windowLayout.setComponentAlignment(horizontalLayout, Alignment.TOP_CENTER);

    Button makeChoiceButton = new Button();
    makeChoiceButton.setWidth("100");
    makeChoiceButton.setIcon(FontAwesome.CHECK);
    makeChoiceButton.addClickListener(new ClickListener() {

        @Override
        public void buttonClick(ClickEvent event) {
            MakeChoiceWindow.this.close();
        }

    });
    windowLayout.addComponent(makeChoiceButton);
    windowLayout.setComponentAlignment(makeChoiceButton, Alignment.BOTTOM_RIGHT);

    setContent(windowLayout);
    center();
    setModal(true);
    setResizable(false);
}

现在看起来像这样

无法正确对齐组件

unable to align components properly

vaadin7