为什么返回带有 HasNavigationBar="false" 的页面时 xct:TabView 的高度会发生变化

Question

我遇到 XamarinCommunityToolkit 中的 TabView 问题。

MainPage 有两个选项卡“A”和“B”，“A”显示一些内容，“B”用作到另一个 ContentPage“DetailsPage”的导航。此外，MainPage 已设置 NavigationPage.HasNavigationBar="false"，不应显示任何导航栏。

启动时，导航栏未按预期显示。单击选项卡“B”然后单击“详细信息页面”上的后退按钮时，TabView 似乎会更改其高度并占用额外的 space。

这里基本上是所有的代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="http://xamarin.com/schemas/2020/toolkit"
             x:Class="App1.MainPage"
             NavigationPage.HasNavigationBar="false"
             >
    <StackLayout>
        <views:TabView 
            TabStripPlacement="Bottom"
            BackgroundColor="Gold"
            TabStripHeight="60"
            TabStripBackgroundColor="ForestGreen"
            >
            <views:TabViewItem
                Text="A">
                <Grid BackgroundColor="Cyan"/>
            </views:TabViewItem>
            <views:TabViewItem
                Text="B"
                TabTapped="ShowDetailsPage">
            </views:TabViewItem>
        </views:TabView>
    </StackLayout>
</ContentPage>

在代码隐藏文件中 App.xaml.cs 添加了一行以便导航到“DetailsPage”：

MainPage = new NavigationPage(new MainPage());

这是带有不需要的“金条”的结果： Undesired change in height of TabView

我已经尝试过：

设置NavigationPage.SetHasNavigationBar(this, false);在 MainPage 的构造函数中改为
设置NavigationPage.SetHasNavigationBar(this, false);在 OnAppearing 事件中

非常感谢任何帮助或提示。

EDIT/ADDITION: 正如 Alexander May 所提到的 tabview 布局错误的提示让我们进一步缩小了问题范围。

通过任何导航对象（例如 TabViewItem 内容中的按钮）导航到详细信息页面时也存在此问题。

示例因此可以进一步缩减为一个选项卡：

    <StackLayout>
        <views:TabView 
            TabStripPlacement="Bottom"
            BackgroundColor="Gold"
            TabStripHeight="60"
            TabStripBackgroundColor="ForestGreen"
            >
            <views:TabViewItem
                Text="A">
                <Grid BackgroundColor="Cyan">
                    <Button Clicked="ShowDetailsPage" Text="Click Me" BackgroundColor="LightPink"></Button>
                </Grid>
            </views:TabViewItem>
        </views:TabView>
    </StackLayout>

Answer 1

不受欢迎的“金色条”是由于 tabview 的布局错误，请尝试我的解决方案，效果很好！

下面是xaml中的代码：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:views="http://xamarin.com/schemas/2020/toolkit"
         NavigationPage.HasNavigationBar="False"
         x:Class="AppNavTab.MainPage"
         >
<Grid>
    <views:TabView
            TabStripPlacement="Bottom"
            TabStripBackgroundColor="Green"
            TabStripHeight="60"
            TabContentBackgroundColor="Cyan">

        <views:TabViewItem
                Text="A"
                TextColor="Black"
                FontSize="12">
            <Grid BackgroundColor="Cyan">
                <Label
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        Text="TabContent1" />
            </Grid>
        </views:TabViewItem>

        <views:TabViewItem
                Text="B"
                TextColor="Black"
                FontSize="12"
                TabTapped="TabViewItem_TabTapped">
       
        </views:TabViewItem>
    </views:TabView>
</Grid>

下面是xaml背后的代码：

    public partial class MainPage : ContentPage
    {
        public MainPage()
       {
            InitializeComponent();
       }

        private void TabViewItem_TabTapped(object sender, Xamarin.CommunityToolkit.UI.Views.TabTappedEventArgs e)
        {
            Navigation.PushAsync(new DetailPage());
        }
    }

解决方法 2：

    <Grid RowSpacing="0" ColumnSpacing="0" x:Name="grid" >
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="60"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>


    <StackLayout BackgroundColor="Cyan" Grid.ColumnSpan="2">
        
    </StackLayout>

    <Button Text="item1" Grid.Row="1" Grid.Column="0" Clicked="Button_Clicked1"/>
    <Button Text="item2" Grid.Row="1" Grid.Column="1" Clicked="Button_Clicked2"/>

    </Grid>

Answer 2

社区工具包网站上有一个未解决的错误：https://github.com/xamarin/XamarinCommunityToolkit/issues/625

为什么返回带有 HasNavigationBar="false" 的页面时 xct:TabView 的高度会发生变化

Why does the height of the xct:TabView change when returning to a page with HasNavigationBar="false"

navigationbar

tabview

xamarin

xamarin-community-toolkit