Java 在vaadin如何向右按按钮？

所以我知道我可以用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;
}

}

@SpringComponent
@范围（ConfigurableBeanFactory.Scope\u原型）
类CharacterEditDialog扩展了垂直布局{
私有静态最终长serialVersionUID=-2755765492408272282L；
私有最终临时积存库；
private final TextField name=new TextField（）；
私有最终文本字段概念=新文本字段（）；
私有最终TextField apparentAge=new TextField（）；
private final RichTextArea description=新RichTextArea（）；
私有最终RichTextArea传记=新的RichTextArea（）；
私有最终RichTextArea外观=新的RichTextArea（）；
私有最终按钮保存=新按钮（FontAwesome.save）；
私有最终按钮取消=新建按钮（）；
私人最终按钮删除=新按钮（FontAwesome.TRASH_O）；
私有最终水平布局操作=新建水平布局（保存、取消、删除）；
@自动连线
CharacterEditDialog（最终积垢储存库）{
this.repository=存储库；
此.setMargin（true）；
此.setspace（true）；
this.save.setStyleName（ValoTheme.BUTTON_PRIMARY）；
this.save.setClickShortcut（ShortcutAction.KeyCode.ENTER）；
此.description.setWidth（100，单位百分比）；
本.传记.设定宽度（100，单位百分比）；
此.appearance.setWidth（100，单位：百分比）；
}
组件编辑（最终字符实体）{
BeanFieldGroup.bindFieldsUnbuffered（实体，this）；
this.save.addClickListener（ComponentUtils.runAndCloseWindow（（）->repository.save（entity））；
this.delete.addClickListener（ComponentUtils.runAndCloseWindow（（）->repository.delete（entity））；
归还这个；
}
@施工后
void init（）{
FormLayout=新的FormLayout（）；
layout.addComponent（createTopRow（））；
布局。添加组件（外观、说明、传记）；
HorizontalLayout actionBarWrapper=新的HorizontalLayout（操作）；
actionBarWrapper.setWidth（100，单位：百分比）；
actionBarWrapper.setDefaultComponentAlignment（Alignment.MIDDLE_RIGHT）；
这个.addComponents（actionBarWrapper，布局）；
}
组件createTopRow（）{
HorizontalLayout topRow=新的HorizontalLayout（名称、概念、装置）；
topRow.setDefaultComponentAlignment（Alignment.MIDDLE_RIGHT）；
topRow.setSpacing（真）；
顶行设置宽度（100，单位百分比）；
返回顶行；
}
}

---

我希望

操作

栏中的所有按钮在布局中右对齐。当查看dom时，我可以看到

actionBarWrapper

是全宽的，组件被分组在一起，但是对齐似乎没有完成它的工作

解决方案是在第一个元素之前添加一个间隔符

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