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

Question

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

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

看起来节点没有设置宽度，Horizo​​ntalLayout 的整个宽度取自节点而不是整个单元格的宽度。

作为一个有点老套的解决方法，您可以使用 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 级别的基本填充添加到计算中。