Question

我有一个非常简单的类，基本上只是一个AppLayout和一些Tab。

现在是我的问题。我找不到一种聪明的方法来显示Tabs类的不同内容。是否有任何接口或可以调用的东西来改变Tab的内容？

class MainAppView extends AppLayout {

public MainAppView()
{
    createDrawerAndAddToAppView();
}

void createDrawerAndAddToAppView()
{
    Tabs tabs = createTabsForDrawer();
    tabs.setOrientation(Tabs.Orientation.VERTICAL);
    addToDrawer(tabs);

    H1 a = new H1("Test"); // Is displayed as content for every Tab
    tabs.addSelectedChangeListener(selectedChangeEvent ->
            /**
             * How to get the specific content of a Tab here?
             */
            //selectedChangeEvent.getSelectedTab(). //getContent() and put in super.setContent()?
            super.setContent(a)); // Displays 'Test' as content for every Tab
            // The Listener shall display the specific content of the getSelectedTab()
}

private Tabs createTabsForDrawer()
{
    return  new Tabs(
            new Tab("Home"),
            new Tab("Dummy"),
            new Tab("Test"));
}

}

Answer 1

这里是一个示例，使用地图来跟踪哪些内容属于哪个选项卡。实际上，您的标签内容会更加复杂，并且可能是通过自己的方法创建的。

@Route
public class TabTest extends VerticalLayout {

    private Map<Tab, Component> tabComponentMap = new LinkedHashMap<>();

    public TabTest() {
        Tabs tabs = createTabs();
        Div contentContainer = new Div();
        add(tabs, contentContainer);

        tabs.addSelectedChangeListener(e -> {
            contentContainer.removeAll();
            contentContainer.add(tabComponentMap.get(e.getSelectedTab()));
        });
        // Set initial content
        contentContainer.add(tabComponentMap.get(tabs.getSelectedTab()));
    }

    private Tabs createTabs() {
        tabComponentMap.put(new Tab("Show some text"), new H1("This is the text tab"));
        tabComponentMap.put(new Tab("Show a Combo Box"), new ComboBox<String>());
        tabComponentMap.put(new Tab("Show a button"), new Button("Click me and nothing happens"));
        return new Tabs(tabComponentMap.keySet().toArray(new Tab[]{}));
    }
}

您也可以对路由进行类似的操作，但是您可能希望包含的组件为RouterLayout。另外，如果您要在其他地方导航后自动选择正确的标签，则需要更多的逻辑。

@Route
public class TabTest extends VerticalLayout implements RouterLayout {

    private Map<Tab, String> tabToUrlMap = new LinkedHashMap<>();
    private Div contentContainer = new Div();

    public TabTest() {
        Tabs tabs = createTabs();
        Div contentContainer = new Div();
        contentContainer.setSizeFull();
        add(tabs, contentContainer);

        tabs.addSelectedChangeListener(e ->
                UI.getCurrent().navigate(tabToUrlMap.get(e.getSelectedTab())));
    }

    private Tabs createTabs() {
        RouteConfiguration routeConfiguration = RouteConfiguration.forApplicationScope();

        tabToUrlMap.put(new Tab("View 1"), routeConfiguration.getUrl(TestView1.class));
        tabToUrlMap.put(new Tab("View 2"), routeConfiguration.getUrl(TestView2.class));
        tabToUrlMap.put(new Tab("View 3"), routeConfiguration.getUrl(TestView3.class));
        return new Tabs(tabToUrlMap.keySet().toArray(new Tab[]{}));
    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        getElement().appendChild(content.getElement());
    }
}

和示例视图

@Route(layout = TabTest.class)
public class TestView3 extends VerticalLayout {

    public TestView3() {
        add("View 3");
    }
}

如何在Vaadin14中为选项卡设置不同的内容？

1 个答案: