如何在vaadin中將按鈕向右推？

Question

所以我知道我可以用css來做到這一點，但我試圖不寫任何與主題一起發佈的css，因爲我正在構建原型。

@SpringComponent 
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE) 
class CharacterEditDialog extends VerticalLayout { 


private static final long serialVersionUID = -2755765492408272282L; 
private final transient CrudRepository<Character, Long> repository; 

private final TextField name = new TextField(); 
private final TextField concept = new TextField(); 
private final TextField apparentAge = new TextField(); 
private final RichTextArea description = new RichTextArea(); 
private final RichTextArea biography = new RichTextArea(); 
private final RichTextArea appearance = new RichTextArea(); 

private final Button save = new Button(FontAwesome.SAVE); 
private final Button cancel = new Button(); 
private final Button delete = new Button(FontAwesome.TRASH_O); 
private final HorizontalLayout actions = new HorizontalLayout(save, cancel, delete); 

@Autowired 
CharacterEditDialog(final CrudRepository<Character, Long> repository) { 
    this.repository = repository; 
    this.setMargin(true); 
    this.setSpacing(true); 
    this.save.setStyleName(ValoTheme.BUTTON_PRIMARY); 
    this.save.setClickShortcut(ShortcutAction.KeyCode.ENTER); 

    this.description.setWidth(100, Unit.PERCENTAGE); 
    this.biography.setWidth(100, Unit.PERCENTAGE); 
    this.appearance.setWidth(100, Unit.PERCENTAGE); 
} 

Component edit(final Character entity) { 
    BeanFieldGroup.bindFieldsUnbuffered(entity, this); 

    this.save.addClickListener(ComponentUtils.runAndCloseWindow(() -> repository.save(entity))); 
    this.delete.addClickListener(ComponentUtils.runAndCloseWindow(() -> repository.delete(entity))); 
    return this; 
} 

@PostConstruct 
void init() { 
    FormLayout layout = new FormLayout(); 
    layout.addComponent(createTopRow()); 
    layout.addComponents(appearance, description, biography); 

    HorizontalLayout actionBarWrapper = new HorizontalLayout(actions); 
    actionBarWrapper.setWidth(100, Unit.PERCENTAGE); 
    actionBarWrapper.setDefaultComponentAlignment(Alignment.MIDDLE_RIGHT); 

    this.addComponents(actionBarWrapper, layout); 
} 

Component createTopRow() { 
    HorizontalLayout topRow = new HorizontalLayout(name, concept, apparentAge); 
    topRow.setDefaultComponentAlignment(Alignment.MIDDLE_RIGHT); 
    topRow.setSpacing(true); 
    topRow.setWidth(100, Unit.PERCENTAGE); 
    return topRow; 
} 

} 

我希望所有的action欄中的按鈕的佈局中的右對齊。當在DOM的樣子，我可以看到actionBarWrapper是全寬和部件組合在一起，但對準似乎並沒有做它的工作

Answer 1

一種解決方案是第一個元素之前加一個墊片。

Component createTopRow() { 
    Label spacer = new Label(); 
    spacer.setWidthUndefined(); 
    HorizontalLayout topRow = new HorizontalLayout(spacer, name, concept, apparentAge); 
    topRow.setExpandRatio(spacer, 1); 
    topRow.setSpacing(true); 
    topRow.setWidth(100, Unit.PERCENTAGE); 
    return topRow; 
}