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

Question

我有一个包含 2 个组件列的 TreeGrid。第一个组件列包含一个带有标签和按钮的 Horizo​​ntalLayout。第二个组件列包含一个带有按钮的 Horizo​​ntalLayout。我无法在第一个组件列中右对齐按钮。可行吗？如果不可行，您有任何解决方法建议吗？我的约束是 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

看起来节点没有设置宽度，并且 Horizo​​ntalLayout 的完整宽度采用节点而不是整个单元格的宽度。

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

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

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