我可以在 Xamarin 表单中有两个标签栏吗？

Posted 2023-03-25

【中文标题】我可以在 Xamarin 表单中有两个标签栏吗？

【英文标题】：Can I have two tab bars in Xamarin forms?

【发布时间】：2022-01-17 17:48:37

【问题描述】：

代码忍者朋友们好！

在 Xamarin 表单中使用“”，我可以轻松地在页面顶部创建一个标签栏。但是，我希望有两个标签栏而不是一个。例如，第一个标签栏行中有 3 个标签按钮，第二行有 3 个标签按钮，用户可以在所有 6 个页面之间导航。

有没有人知道这在 Xamarin 表单中是否可行和/或是否有任何文档可以提供帮助。

【问题讨论】：

听起来很糟糕的体验。但没有什么是不可能的，你可能只需要为它努力一点。你尝试了什么？

AFAIK，现有的自定义标签栏实现都没有处理这个问题。也没有任何文档。 ios 或 android 也没有内置此功能。您需要下载一个自定义 TabBar 存储库，并对其进行修改，以便有两行选项卡。要成功地做到这一点，需要对 Xamarin Forms 有深入的了解。据我所知，从来没有人这样做过。我建议改为使标签足够窄以使它们都适合。如何？ tab items with multi-line text.

【参考方案1】：

除了 TabbedPage ?，您还可以使用 Xamarin Community Toolkit 中的 TabView。以下是它的工作原理：

<Grid>
        <xct:TabView>
                <xct:TabViewItem>
                    <Grid>
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem>
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </Grid>

如果您在每个 TabBar 内容中放置一个 TabView，您将能够获得您想要的结果。 在你的情况下，它会是这样的：

  <ContentPage Title="Tab 1">  
    <xct:TabView>
                <xct:TabViewItem>
                    <Grid>
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem>
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </ContentPage>  
  <ContentPage Title="Tab 2">  
    <xct:TabView>
                <xct:TabViewItem>
                    <Grid>
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem>
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </ContentPage>   

如果您想了解更多关于 TabViews 的信息，Gerald Versluis 发表了一篇很棒的文章，它完美地解释了它：https://devblogs.microsoft.com/xamarin/xamarin-community-toolkit-tabview/

【参考方案2】：

试试James Montemagno youtube 频道

编辑

这里是该视频使用的库的官方 github 链接 https://github.com/roubachof/Sharpnado.Tabs

【讨论】：

请不要发布只是链接到其他内容的答案