Vaadin 8：您可以在 TreeGrid 组件列的 HorizontalLayout 组件单元格中右对齐 Button 吗？

Question

我有一个包含 2 个组件列的 TreeGrid。第一个组件列包含一个带有标签和按钮的 HorizontalLayout。第二个组件列包含一个带按钮的 HorizontalLayout。我无法右对齐第一个组件列中的按钮。可行吗？如果不可行，您有任何解决方法建议吗？我的约束是 TreeGrid，2 列，第一列应该包含一个标签和一个右对齐的按钮。到目前为止我尝试了什么

TreeGrid<Object> treeGrid = new TreeGrid<>();
treeGrid.setSizeFull();
treeGrid.addComponentColumn(vp -> {
    Button button = new Button("button");
    HorizontalLayout cell = new HorizontalLayout(new Label("label"), button);
    cell.setSizeFull();
    cell.setExpandRatio(button, 1.0f);
    cell.setComponentAlignment(button, Alignment.MIDDLE_RIGHT);
    return cell;
}).setCaption("st column").setExpandRatio(1).setId("st column");
treeGrid.addComponentColumn(vp -> new HorizontalLayout(new Button("some other button")))
    .setCaption("nd column").setId("nd column").setWidth(200.0d);
TreeData<Object> objectTreeData = new TreeData<>();
objectTreeData.addRootItems(new Object());
treeGrid.setDataProvider(new TreeDataProvider<>(objectTreeData));
window.setContent(treeGrid);
UI.getCurrent().addWindow(window);
window.center();
window.setWidth("40%");
window.setHeight("40%");

输出在附图中。

Answer 1

看起来节点没有设置宽度，HorizontalLayout 的整个宽度采用节点而不是整个单元格的宽度。

作为一种稍微有点老套的解决方法，您可以使用 StyleGenerator 为列指定一个样式名称 (column.setStyleGenerator(item -> "myColumn");)，然后向您的主题添加类似 ".myColumn .v-treegrid-node {width:100%;} 的内容。如果您的主题现在将内容推得太右，您也可以添加一些填充来抵消这种情况：.myColumn .v-horizontallayout {padding-right: 10px;}"

如果添加一些层次结构，您可能需要为每个级别添加更多填充：.myColumn .depth-1 .v-horizontallayout {padding-right: 26px;}、.myColumn .depth-2 .v-horizontallayout {padding-right: 42px;} 等等（实际值取决于您的主题）。使用普通 Valo 会在每个深度级别添加 1em (16px) 的缩进，这是您需要应对的。

有关更复杂的 SASS 解决方案，请参阅 Valo does the indenting。请记住将深度 0 级别的基本填充添加到计算中。

Vaadin 8：您可以在 TreeGrid 组件列的 HorizontalLayout 组件单元格中右对齐 Button 吗？

Vaadin 8: can you right align a Button in a HorizontalLayout component cell of a TreeGrid component column?

vaadin

vaadin8

Vaadin 8：您可以在 TreeGrid 组件列的 Horizo​​ntalLayout 组件单元格中右对齐 Button 吗？

Vaadin 8: can you right align a Button in a HorizontalLayout component cell of a TreeGrid component column?

vaadin

vaadin8

Vaadin 8：您可以在 TreeGrid 组件列的 HorizontalLayout 组件单元格中右对齐 Button 吗？