Vaadin 14 - 使用嵌套布局时网格消失

Question

实现嵌套布局后，我遇到了渲染包含网格的组件的问题。分析表明它存在于 html 中，但它具有显示块属性，并且网格永远不可见。

我读了类似的问题（Vaadin 14 - Grid not Displaying/Populate When Useed in Nested Layout），但那里列出的建议没有给我带来任何结果。

这是我的代码：

主布局.kt：

@Theme(value = Material::class, variant = Material.DARK)
class MainLayout : Composite<Div>(), RouterLayout {

    //Component to delegate content through.
    private val mainContent: Div = Div()
    private val layout = VerticalLayout(
            Span("from MainLayout top"),
            mainContent,
            Span("from MainLayout bottom"))


    override fun showRouterLayoutContent(hasElement: HasElement) {

        Objects.requireNonNull(hasElement)
        Objects.requireNonNull(hasElement.element)
        mainContent.removeAll()
        mainContent.element.appendChild(hasElement.element)
    }

    init {
        content.add(layout)
    }
}

LayoutWithMenuBar.kt：

@ParentLayout(value = MainLayout::class)
class LayoutWithMenuBar : Composite<Div>(), RouterLayout {

    private val mainContent: Div = Div()

    private val menuBar = HorizontalLayout(
            RouterLink("Home", MainView::class.java),
            RouterLink("Tprojects", TProjectDashboard::class.java),
            RouterLink("ViewA", ViewA::class.java),
            RouterLink("ViewB", ViewB::class.java))


    private val root = VerticalLayout(menuBar, mainContent)

    override fun showRouterLayoutContent(hasElement: HasElement) {

        Objects.requireNonNull(hasElement)
        Objects.requireNonNull(hasElement.element)
        mainContent.removeAll()
        mainContent.element.appendChild(hasElement.element)
    }


    init {

        content.add(root)
    }
}

和一个包含网格的组件 - TProjectDashboard：

@Route("dashboard/tproject", layout = LayoutWithMenuBar::class)
class TProjectDashboard(@Autowired val tprojectService: TProjectService): VerticalLayout() {

    var tprojectGrid = Grid<TProject>(TProject::class.java)

    init {
        //tprojectGrid
        tprojectGrid.setColumns(
                TProject::tprojectUuid.name,
                TProject::tprojectClass.name,
                TProject::tprojectState.name,
                TProject::tentityState.name,
                TProject::size.name)

        tprojectGrid.setItems(tprojectService.findAll())

        tprojectGrid.setSizeFull()
        tprojectGrid.setWidthFull()
        tprojectGrid.setHeightFull()

        add(tprojectGrid)

        setSizeFull()
        setHeightFull()
        setWidthFull()
    }
}

当我将 TProjectDashboard 父级从 VerticalLayout 更改为 Composite 时，结果相同。嵌套布局方法适用于像 Span 这样的简单组件，如果我从 @Route 注释中删除布局引用，我将看到我的网格。

这是屏幕现在的样子： 在此处输入图像描述

如果有任何提示或解决方案，我们将不胜感激。

提前致谢。

Answer 1

不幸的是，这可能是一个经常发生的尺寸问题。setSizeFull()我将从调用div开始mainContent。如果这没有帮助，请浏览浏览器开发工具中的元素并尝试查看大小消失的位置，例如第一个宽度或高度为 0 的元素是什么。

编辑：所有组件上的设置setSizeFull()都有效。不过，我会通过将组合更改为 类型来稍微简化您的布局VerticalLayout。然后你就可以摆脱很多电话了setSizeFull()。

下面的代码是用Java编写的，因为我没有设置Kotlin，如果你想让它占据页面的完整高度，你可以getContent().setSizeFull()调用它。MainLayout

MainLayout

@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();

    public MainLayout() {
        getContent().add(
                new Span("from MainLayout top"),
                mainContent,
                new Span("from MainLayout bottom"));
        mainContent.setSizeFull();
    }

    @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();

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

    public LayoutWithMenuBar() {
        getContent().add(menuBar, mainContent);
        mainContent.setSizeFull();
    }

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

TProjectDashboard

@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);
    }
}