如何在 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;
}

如何在 vaadin 中将我的按钮向右推？

How to push my buttons to the right in vaadin?

java

vaadin

vaadin7