Vaadin 14 - 在嵌套布局中使用时网格不显示/填充

Question

我正在尝试构建一个 Vaadin/Spring 应用程序。我正在使用 Spring Security，并基于此 tutorial 中的示例和信息来构建应用程序的安全部分。我的主/主页视图是一个非常简单的带有 Vaadin Grid 的视图：

@SpringComponent
@UIScope
@Route(value = "", layout = MainLayout.class)
public class MainView extends HorizontalLayout {

    private ItemService itemService;

    private Grid<ItemDTO> itemGrid;

    @Autowired
    public MainView(ItemService itemService) {
        this.itemService = itemService;
        var items = this.itemService.getItems();
        this.itemGrid = new Grid<>(ItemDTO.class);
        this.itemGrid.addColumn(ItemDTO::getName).setHeader("Name");
        this.itemGrid.addColumn(ItemDTO::getUnitId).setHeader("Unit");
        this.itemGrid.setItems(items);
        add(itemGrid);
    }

}

上面引用的MainLayout类也很简单：

@SpringComponent
@UIScope
public class MainLayout extends VerticalLayout implements RouterLayout, HasComponents {
    private Div childWrapper = new Div();

    public MainLayout() {
        H1 heading = new H1("Price List");
        MenuBar menu = new MenuBar();
        MenuItem vendor = menu.addItem("Vendor");
        vendor.getSubMenu().addItem(new RouterLink("Wal-Mart", VendorView.class, "WMRT"));
        HorizontalLayout header = new HorizontalLayout(heading, menu);
        header.setSizeFull();
        add(header);
        add(childWrapper);

    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        childWrapper.getElement().appendChild(content.getElement());
    }
}

但是，在登录并被重定向到 MainView 后，Grid 根本无法加载：

但是，如果我从 MainView 中删除 layout = MainLayout.class，它会加载罚款。项目中的另一个视图，类似地使用 Vaadin Grid 并引用 MainView，加载得很好：

@SpringComponent
@UIScope
@Route(value = "vendor", layout = MainLayout.class)
public class VendorView extends VerticalLayout implements HasUrlParameter<String> {

    private String prop;
    private Grid<VendorItemDTO> itemGrid;
    private VendorItemService vendorService;

    public VendorView(VendorItemService vendorService) {
        this.vendorService = vendorService;

    }

    @Override
    public void setParameter(BeforeEvent event, String parameter) {
        this.prop = parameter;
        this.setUpUI();
    }

    private void setUpUI() {
        var items = this.vendorService.findByVendor(prop);
        var h2 = new H2("Items for " + this.prop);

        this.itemGrid = new Grid<>();
        this.itemGrid.addColumn(VendorItemDTO::getItemName).setHeader("Item");
        this.itemGrid.addColumn(VendorItemDTO::getTotalPrice).setHeader("Total Price");
        this.itemGrid.addColumn(VendorItemDTO::getUnitString).setHeader("Units");
        this.itemGrid.setItems(items);

        add(h2, itemGrid);
    }

}

这是我第一次使用 Vaadin，如果这是一个明显的错误，我深表歉意，但我参考了该项目的文档和视频，但尚未解决问题。

谢谢。

Answer 1

我遇到了几乎相同的问题，只是设置有点不同，这里是正确代码示例的答案链接，感谢@Erik Lumme - Vaadin 14 - grid disappearing when using nested layout

在我的情况下，自从我开始使用嵌套布局引擎后，网格就消失了。浏览器工具的使用表明网格存在于 html 中，但具有样式参数“位置：相对”，并且被布局的底部元素溢出。

解决方案几乎相同 - 我将 .setFullSize() 添加到包含网格的“容器”元素中。之后我制作了 maven:clean 然后重建项目以使其工作。

这里是代码引用（完整示例可以通过提供的链接找到）：

主布局：

@Theme(value = Material.class, variant = Material.DARK)
public class MainLayout extends Composite<VerticalLayout> implements RouterLayout {

    //Component to delegate content through.
    private Div mainContent = new Div();           //**!!!the "conteiner" element**

    public MainLayout() {
        getContent().add(
                new Span("from MainLayout top"),
                mainContent,
                new Span("from MainLayout bottom"));
        mainContent.setSizeFull();                  //**!!!.setFullSize applied**
    }

    @Override
    public void showRouterLayoutContent(HasElement hasElement) {
        Objects.requireNonNull(hasElement);
        Objects.requireNonNull(hasElement.getElement());
        mainContent.removeAll();
        mainContent.getElement().appendChild(hasElement.getElement());
    }
}

LayoutWithMenuBar：

@ParentLayout(value = MainLayout.class)
public class LayoutWithMenuBar extends Composite<VerticalLayout> implements RouterLayout {

    private Div mainContent = new Div();   //**!!! the container element**

    private HorizontalLayout menuBar = new HorizontalLayout(
            new RouterLink("Tprojects", TProjectDashboard.class));

    public LayoutWithMenuBar() {
        getContent().add(menuBar, mainContent);
        mainContent.setSizeFull();              //**!!! .setFullSize() applied**
    }

    @Override
    public void showRouterLayoutContent(HasElement hasElement) {
        Objects.requireNonNull(hasElement);
        Objects.requireNonNull(hasElement.getElement());
        mainContent.removeAll();
        mainContent.getElement().appendChild(hasElement.getElement());
    }
}

最后是网格本身：

@Route(value = "dashboard/tproject", layout = LayoutWithMenuBar.class)
public class TProjectDashboard extends VerticalLayout {

    private Grid<TProject> tprojectGrid = new Grid<>(TProject.class);

    public TProjectDashboard() {

        tprojectGrid.setItems(
                new TProject("Erik", "Software Engineer"),
                new TProject("Fia", "Kindergarden teacher"),
                new TProject("Jack", "All trades")
        );

        add(tprojectGrid);
    }
}

@Erik Lumme 在这里提供了解决方案 - Vaadin 14 - grid disappearing when using nested layout