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

Question

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

我阅读了类似的问题 (Vaadin 14 - Grid not Displaying/Populating When Used in Nested Layout)，但那里列出的建议没有给我任何结果。

这是我的代码：

MainLayout.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 注释中删除布局引用，我将看到我的网格。

这是屏幕现在的样子： enter image description here

感谢任何提示或解决方案。

提前致谢。

Answer 1

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

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

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

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

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

Vaadin 14 - grid disappearing when using nested layout

vaadin

vaadin-grid