android - Xamarin Forms，Android，Segmented Control在切换到另一个标签栏页面然后再次返回它的标签页后变得混乱

Question

我搜索了我面临的相同问题，但找不到。

我的应用程序有 5 个页面： 1- 具有带有 5 个选项卡的选项卡栏的外壳页面，我使用<ShellContent ContentTemplate="{DataTemplate local:PageName}/>. 2- 第一个标签。3- 第二个选项卡，它具有带 3 个子项的分段控制（选项 1、选项 2、选项 3）。4- 第三个标签。5-第四选项卡。6-第五标签。

当我点击（第二个标签）并选择（option2）或（option3）时，它工作并且看起来很好，但是当我点击（第一个标签）或（第三个标签）然后点击（第二个标签）并选择（ option1）或（option2）或（option3），分段控件看起来很乱，格式松散，并将文本放在开始而不是中心，如下面的屏幕截图所示。

仅当我在具有任何 Android 版本的任何 Android 模拟器上运行解决方案时才会发生这种情况，iOS 可以在相同的 Xaml 上正常工作。

这是 Shell 页面的 Xaml：

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:d="http://xamarin.com/schemas/2014/forms/design"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:myApp"
   mc:Ignorable="d"
   x:Class="myApp.AppShell">
<Shell.Resources>
    <Style x:Key="BaseStyle"
           TargetType="Element">
        <Setter Property="Shell.BackgroundColor"
                Value="#f4f3f3" />
        <Setter Property="Shell.ForegroundColor"
                Value="#000000" />
        <Setter Property="Shell.UnselectedColor"
                Value="#808080" />
        <Setter Property="Shell.TabBarBackgroundColor"
                Value="#f4f3f3" />
        <Setter Property="Shell.TabBarTitleColor"
                Value="#000000" />
        <Setter Property="Shell.TabBarUnselectedColor"
                Value="#808080" />
    </Style>
    <Style TargetType="ShellItem"
           BasedOn="{StaticResource BaseStyle}" />

    <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
</Shell.Resources>

<TabBar x:Name="MyTabBar" >
    <Tab Title="first" 
         >
        <ShellContent ContentTemplate="{DataTemplate local:firstPage}" />
    </Tab>
    <Tab Title="second"
         >
        <ShellContent ContentTemplate="{DataTemplate local:secondPage}" Title="second" />
    </Tab>
    <Tab Title="third"
         >
        <ShellContent ContentTemplate="{DataTemplate local:thirdPage}" Title="third" />
    </Tab>
    <Tab Title="forth"
         >
        <ShellContent ContentTemplate="{DataTemplate local:forthPage}" Title="forth" />

    </Tab>
    <Tab Title="fifth"
          >
        <ShellContent ContentTemplate="{DataTemplate local:fifthPage}" Title="fifth" />
    </Tab>
</TabBar>

这是第二页的 Xaml：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:Plugin.Segmented.Control;assembly=Plugin.Segmented"
         x:Class="myApp.secondPage"
         >
<ContentPage.Content>
    <ScrollView>
        <StackLayout Margin="20">
            <Grid BackgroundColor="White" RowSpacing="15" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <controls:SegmentedControl Grid.Row="0" Grid.ColumnSpan="4" x:Name="NewAdSegmentedControl" 
                    TintColor="Black" SelectedTextColor="White" SelectedSegment="0" >
                    <controls:SegmentedControl.Children>
                        <controls:SegmentedControlOption x:Name="firstOption"  Text="1st option" />
                        <controls:SegmentedControlOption x:Name="secondOption" Text="2nd option" />
                        <controls:SegmentedControlOption x:Name="thirdOption" Text="3rd option" />
                    </controls:SegmentedControl.Children>
                </controls:SegmentedControl>
            </Grid>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

这是第三页的 Xaml：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="myApp.thirdPage">
<ContentPage.Content>
    <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text=""/>
</ContentPage.Content>

这是一个代表问题的gif。

请协助...

Answer 1

根据我的测试，我猜这可能是由文本的边框大小引起的。我改变了网格中的位置，太棒了。

 <controls:SegmentedControl
                    x:Name="NewAdSegmentedControl"
                    Grid.Row="0"
                    Grid.Column="3"
                    Grid.ColumnSpan="4"
                    SelectedSegment="0"
                    SelectedTextColor="White"
                    TintColor="Black">
                    <controls:SegmentedControl.Children>
                        <controls:SegmentedControlOption x:Name="firstOption" Text="1st option" />
                        <controls:SegmentedControlOption x:Name="secondOption" Text="2nd option" />
                        <controls:SegmentedControlOption x:Name="thirdOption" Text="3rd option" />
                    </controls:SegmentedControl.Children>
                </controls:SegmentedControl>