如何在 Vaadin 14 中将 HeaderRow 居中？

Question

我有一个Headerrow分组名称和状态列。 Headerrow被命名为用户，目前位于网格的左侧。这就是现在的样子：

        | User |
        | Name | |Status|

我希望用户标头像这样：

             | User |
        | Name | |Status|

我当前的代码。请记住，现状标签和Resourscelink方法与问题无关。

public Grid<E> loadGrid(Class<? extends Resource> res) {
        try {
            Grid<E> grid = new Grid<>();
            Column<E> nameColumn = grid.addComponentColumn(E -> resourceLink(E)).setHeader("Name").setWidth("50%")
                    .setFlexGrow(0).setTextAlign(ColumnTextAlign.CENTER);
            Column<E> statusColumn = grid.addComponentColumn(E -> statusLabel(E)).setHeader("Status").setWidth("50%")
                    .setFlexGrow(0).setTextAlign(ColumnTextAlign.CENTER);
            grid.addClassName("availaboard-grid");
            grid.setAllRowsVisible(true);
            grid.setItems((Collection<E>) (db.loadResources(type)));

            grid.addSelectionListener(selection -> {
                grid.getSelectionModel().getFirstSelectedItem().ifPresent(item -> {
                    System.out.println(item.getName());
                });
            });
            
            HeaderRow headerRow = grid.prependHeaderRow();
            headerRow.join(nameColumn, statusColumn).setText(res.getSimpleName());
        
            
            
            return grid;
        } catch (IllegalArgumentException | SecurityException e) {

        }
        return null;

    }

谢谢！

Answer 1

您可以使用 setComponent 并将组件添加到连接的列标题中，而不是使用 setText ，然后您可以轻松地设置该组件的样式。像这样的事情：

Div simpleNameCell = new Div();
simpleNameCell.setText(res.getSimpleName());
simpleNameCell.getElement().getStyle().set("text-align", "center");
headerRow.join(nameColumn, statusColumn).setComponent(simpleNameCell);