为什么此 Vaadin 11.0.0 应用程序中未显示网格？答案

【问题标题】：Why is the grid not shown in this Vaadin 11.0.0 application?为什么此 Vaadin 11.0.0 应用程序中未显示网格？
【发布时间】：2018-11-12 21:20:18
【问题描述】：

我想在 Vaadin 页面中显示两个选项卡（Providers 和 Products）。 Providers 应该包含一个带有一条记录的网格。

我为此编写了以下代码：

import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        final Text header = new Text("Header");
        add(header);

        final Tab productsTab = new Tab("Products");
        final Tab providersTab = new Tab("Providers");
        final Grid<LoanProvider> providersGrid = new Grid<>();
        providersGrid.addColumn(LoanProvider::getName).setHeader("Name");
        providersGrid.addColumn(LoanProvider::getRegions).setHeader("Regions");
        providersGrid.addColumn(LoanProvider::getUrl).setHeader("URL");
        providersGrid.setSizeFull();
        providersTab.add(providersGrid);
        final Tabs tabs = new Tabs(providersTab, productsTab);
        add(tabs);
        providersGrid.setItems(getLoanProviders());
    }

    private List<LoanProvider> getLoanProviders() {
        final List<LoanProvider> coll = new ArrayList<>();
        final LoanProvider sample = new LoanProvider();
        sample.setName("Provider name");
        sample.setRegions("Region1");
        sample.setUrl("http://www.someserver.com");
        coll.add(sample);
        return coll;
    }
}

public class LoanProvider {
    private String name;
    private String regions;
    private String url;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getRegions() {
        return regions;
    }

    public void setRegions(String regions) {
        this.regions = regions;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

当我运行应用程序时，我在Products 选项卡中看不到任何数据：

如何更改代码以显示网格内容？

调用setSizeFull 并设置高度没有帮助。

【问题讨论】：

我建议编辑标题以更好地反映问题与标签有关。我在升级到 flow 时也遇到了这个问题，如果标题合适，这篇文章将帮助更多的用户。也许是“为什么我的标签内容没有显示在 Vaadin Flow 中？”。谢谢:)

标签： java grid vaadin

【解决方案1】：

Flow 中的选项卡不应包含页面内容，您现在正在做的是将网格添加到选项卡本身（就在 Providers 文本之后）。

在这个页面上有一个例子Tabs with pages
https://vaadin.com/components/vaadin-tabs/java-examples

基本上，您应该将SelectedChangeListener 添加到选项卡组件，并根据单击的选项卡显示或隐藏网格（通过setVisible 或将其删除并重新添加到父级）。

Vaadin 目录中还有一个插件，它包装了与上述示例类似的逻辑 https://vaadin.com/directory/component/paged-tabs

【讨论】：