1

我面临来自 XamarinCommunityToolkit 的 TabView 的问题。

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

启动时，导航栏按预期不可见。单击选项卡“B”，然后单击“详细信息页面”上的后退按钮时，TabView 似乎改变了它的高度并占用了额外的空间。

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

<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());

这是不希望的“金条”的结果： TabView 高度的不希望变化

我已经尝试过：

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

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

编辑/添加： 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>
4

2 回答 2

0

不受欢迎的“金条”是由于 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>
于 2022-02-17T01:30:52.633 回答
0

在社区工具包站点上有一个开放的错误：https ://github.com/xamarin/XamarinCommunityToolkit/issues/625

于 2022-02-21T14:53:22.653 回答