Vaadin 14-使用嵌套布局时网格消失 [英] Vaadin 14 - grid disappearing when using nested layout
问题描述
实现嵌套布局后，我遇到了渲染包含网格的组件的问题.分析表明该元素存在于html中，但具有显示块属性，并且网格从不可见.
After implementing nested layouts i faced the problem with rendering component containing grid. The analysis shows that is present in html but it has display-block attributes and the grid is never visible.
我阅读了类似的问题( Vaadin 14-在嵌套布局中使用时，网格不显示/填充)，但是其中列出的建议没有给我带来任何结果.
I read the similar question (Vaadin 14 - Grid not Displaying/Populating When Used in Nested Layout) but the suggestions listed there brought me no result.
这是我的代码:
MainLayout.kt:
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:
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:
and a component containing grid - 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注释中删除布局引用，我将看到我的网格.
The same result i have when changing TProjectDashboard parent from VerticalLayout to Composite. The nested layouts approach works well for simple components like Span and if i remove layout reference from @Route annotation i will see my grid.
这是现在的屏幕: 在此处输入图片描述
对于任何提示或解决方案，我们将不胜感激.
Would appreciate for any hints or solutions.
谢谢.
推荐答案
这可能是一个大小调整问题，不幸的是经常发生.我将从在mainContent div上调用setSizeFull()开始.如果这样做没有帮助，请浏览浏览器devtools中的元素，然后尝试查看大小消失的位置，例如宽度或高度为0的第一个元素是什么.
It's probably a sizing issue that unfortunately happens too often. I would start with calling setSizeFull() on the mainContent div. If that doesn't help, go through the elements in the browser devtools and try to see where the size disappears, e.g. what is the first element that has 0 width or height.
编辑:在所有组件上设置setSizeFull()均有效.但是，通过将复合材料更改为VerticalLayout类型，我将略微简化您的布局.然后，您可以摆脱很多setSizeFull()调用.
Setting setSizeFull() on all components works. I would simplify your layouts slightly, though, by changing the composites to be of type VerticalLayout. Then you can get rid of a lot of the setSizeFull() calls.
下面的代码是Java语言，因为我没有设置Kotlin，如果希望它占据页面的整个高度，则可以在MainLayout中调用getContent().setSizeFull().
The code below is in Java as I don't have Kotlin set up, you can call getContent().setSizeFull() in MainLayout if you want it to take the full height of the page.
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-使用嵌套布局时网格消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
