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

我想在Vaadin页面中显示两个选项卡（

提供者

和

产品

）。

提供程序

应包含一个带有一条记录的网格

我为此编写了以下代码：

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

import java.util.ArrayList；
导入java.util.List；
导入com.vaadin.flow.component.Text；
导入com.vaadin.flow.component.grid.grid；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.component.tabs.Tab；
导入com.vaadin.flow.component.tabs.tabs；
导入com.vaadin.flow.router.Route；
@路线（“”）
公共类主视图扩展了垂直布局{
公共主视图（）{
最终文本标题=新文本（“标题”）；
添加（标题）；
最终选项卡productsTab=新选项卡（“产品”）；
最终制表符提供者STAB=新制表符（“提供者”）；
最终网格提供者网格=新网格（）；
providersGrid.addColumn（LoanProvider:：getName）.setHeader（“名称”）；
providersGrid.addColumn（LoanProvider:：getRegions）.setHeader（“Regions”）；
providersGrid.addColumn（LoanProvider:：getUrl）.setHeader（“URL”）；
providersGrid.SetSizeAll（）；
providersTab.add（providersGrid）；
最终选项卡=新选项卡（providersTab、productsTab）；
添加（选项卡）；
setItems（getLoanProviders（））；
}
私有列表getLoanProviders（）{
最终列表coll=新的ArrayList（）；
最终贷款提供者样本=新贷款提供者（）；
sample.setName（“提供商名称”）；
样本集区域（“区域1”）；
sample.setUrl（“http://www.someserver.com");
coll.add（样本）；
返回coll；
}
}
公共类贷款提供者{
私有字符串名称；
私有字符串区域；
私有字符串url；
公共字符串getName（）{
返回名称；
}
公共void集合名（字符串名）{
this.name=名称；
}
公共字符串getRegions（）{
返回区；
}
公共void集合区域（字符串区域）{
这个区域=区域；
}
公共字符串getUrl（）{
返回url；
}
公共void setUrl（字符串url）{
this.url=url；
}
}

当我运行应用程序时，在

产品

选项卡中看不到任何数据：

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

---

调用

setSizeFull

和设置高度没有帮助。

Flow中的选项卡不应该包含页面内容，您现在要做的是将网格添加到选项卡本身（就在提供程序文本之后）

在此页面上有一个示例

带有页面的选项卡



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

Vaadin目录中还有一个插件，它封装了上面示例的类似逻辑
Flow中的选项卡不应包含页面内容，您现在要做的是将网格添加到选项卡本身（就在提供者文本之后）

在此页面上有一个示例
带有页面的选项卡



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

Vaadin目录中还有一个插件，它封装了上面示例的类似逻辑
我建议编辑标题，以便更好地反映问题是关于选项卡的。我在升级到flow时也遇到了这个问题，如果标题恰当，这篇文章将帮助更多用户。可能是“为什么我的选项卡内容没有显示在Vaadin Flow中？”。谢谢：）我建议编辑标题以更好地反映问题是关于标签的。我在升级到flow时也遇到了这个问题，如果标题恰当，这篇文章将帮助更多用户。可能是“为什么我的选项卡内容没有显示在Vaadin Flow中？”。谢谢：）