Xamarin 社区工具包 TabView 高度

Posted 2023-04-13

【中文标题】Xamarin 社区工具包 TabView 高度

【英文标题】：Xamarin Community Toolkit TabView height

【发布时间】：2021-09-21 10:27:53

【问题描述】：

我有一个顶部有图像和文本的视图。在底部，我有一个带有不同 TabViewItems 的 TabView。每个 TabViewItem 都有不同的高度，因为每个都有不同的内容。

我想让 TabView 的高度与更高的 TabViewItem 的高度相匹配，但我做不到。

如果我不指定 TabContentHeight 属性，则只显示 TabView 标题，如果我为其设置大小，则 TabViewItems 的内容将被截断。 正确的做法是什么？

【问题讨论】：

您能发布您的 xaml 代码吗？ “不同的内容”是指标签长度或图标大小或其他？

我有 4 个 TabViewItems。一个有一个包含多张图像的画廊（您只能拥有一张或多张）。另一个 TabViewItem 有文本，它可能很少或很多，有很多行和其他类似的 TabViewItems。每个人都可以在内容上成长，因此我也需要 TabView 来成长。

【参考方案1】：

如果您想要底部标签 UI，请查看此文章的 TabView。

https://devblogs.microsoft.com/xamarin/xamarin-community-toolkit-tabview/ https://www.sharpnado.com/pure-xamarin-forms-tabs/

但是你提到你想要根据内容增加标签大小而不是我认为你不需要 tabview，你必须为此创建自己的 CustomView。

您也可以为此使用 Syncfusion 控制：https://www.syncfusion.com/kb/11007/how-to-reduce-or-increase-the-tab-header-height-in-xamarin-forms-sftabview

TabView 只是为 UI 提供：

图标和标签 只有图标 仅文本

而且它的大小是固定的。

您可以更改其活动/非活动状态的背景颜色。

【参考方案2】：

如果我不指定 TabContentHeight 属性，则只显示 TabView 标题，如果我为其设置大小，则 TabViewItems 的内容将被截断。正确的做法是什么？

也许您可以尝试在TabViewItem 中添加ScrollView 以包含内容。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Image Source="waterfront.jpg" />
    <Label Grid.Row="1" Text="this is test" />
    <Grid Grid.Row="2">
        <xct:TabView
            TabContentBackgroundColor="Yellow"
            TabIndicatorColor="Yellow"
            TabStripBackgroundColor="Blue"
            TabStripHeight="60"
            TabStripPlacement="Bottom">

            <xct:TabViewItem
                FontSize="12"
                Icon="triangle.png"
                Text="Tab 1"
                TextColor="White"
                TextColorSelected="Yellow">
                <ScrollView>
                    <StackLayout BackgroundColor="Gray">

                        <Label
                            HorizontalOptions="Center"
                            Text="TabContent1"
                            VerticalOptions="Center" />
                        <Image  Source="waterfront.jpg" />
                        <Image  Source="internet.png" />
                    </StackLayout>
                </ScrollView>
            </xct:TabViewItem>

            <xct:TabViewItem
                FontSize="12"
                Icon="circle.png"
                Text="Tab 2"
                TextColor="White"
                TextColorSelected="Yellow">
                <Grid>
                    <Label
                        HorizontalOptions="Center"
                        Text="TabContent2"
                        VerticalOptions="Center" />
                </Grid>
            </xct:TabViewItem>
        </xct:TabView>
    </Grid>
</Grid>

【讨论】：

是的，这是我找到的唯一解决方案。我还研究了绘画事件，但我无法在运行时更改 TabView 的大小，尽管我可以确定最大 TabViewItem 的大小并将其应用于 TabContentHeight 属性它不会改变大小。

如果不清楚，我添加这个链接。 iherb.com/pr/country-life-natural-omega-3-1-000-mg-300-softgels/…我要达到的效果就是这个网站的效果，APP版也是一样的。每个产品都有一个带有不同 TabItems 的选项卡，并且该选项卡始终占据整个屏幕。每个选项卡中没有滚动条。

@Rocoso 它看起来和tabview不一样，也许你可以尝试在按标签时创建自定义对话框。

Iherb手机版（用Chorme模拟手机打开网页），APP底部有一个TabView，有不同的页面（Overview，Details，Reviews ...）每个产品都有那些大小不同的 TabItems，根据产品的不同，Tabs 的高度会有所调整。我想通过 TabView 获得类似的功能，但我做不到。

@Rocoso 也许你可以尝试搜索一些第三方来实现它。