Вкладки слегка перемещаются вверх в Xamarion Forms IOS при прокрутке

#xamarin #xamarin.forms #xamarin.android #xamarin.ios

#xamarin #xamarin.forms #xamarin.android #xamarin.ios

Вопрос:

У меня возникла проблема с вкладками при прокрутке страниц содержимого внутри вкладок. У меня есть страница с вкладками с тремя страницами содержимого. При прокрутке страниц содержимого вкладки немного перемещаются вверх на платформе IOS, в то время как в Android это выглядит нормально. Все страницы содержимого реагируют одинаково. Это моя первая страница содержимого, но остальные имеют обычную сетку / вид таблицы без прокрутки.

 <FlexLayout Direction="Column">
            <FlexLayout FlexLayout.Grow="1">
                <ScrollView>
                <Grid Padding="5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                        <StackLayout Orientation="Vertical" Grid.Row="0">
                            <StackLayout x:Name="listView" Padding="0,10,0,10"
                             BindableLayout.ItemsSource="{Binding TopPages}"
                             BindableLayout.ItemTemplate="{StaticResource PageListItemTemplate}">
                        </StackLayout>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Grid.Row="1" HeightRequest="350">
                        <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                            <Label Text="Reciters" HorizontalOptions="StartAndExpand" Style="{StaticResource DesLabel}"/>
                            <Label Text="Show All" FontSize="Medium" 
                                    TextColor="{DynamicResource PrimaryTextColor}" HorizontalOptions="End">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding RecitersListCommand}" CommandParameter="{StaticResource TypeOne}"/>
                                </Label.GestureRecognizers>
                            </Label>
                        </StackLayout>
                        <Frame Style="{StaticResource DefaultFrame}" Padding="5">
                            <CollectionView x:Name="reciterItemView" ItemsSource="{Binding Reciters}"
                                SelectionMode="Single" ItemTemplate="{StaticResource ItemTemplate}">
                                    <CollectionView.ItemsLayout>
                                        <GridItemsLayout Orientation="Horizontal" VerticalItemSpacing="5" 
                                                 HorizontalItemSpacing="5" Span="2" />
                                    </CollectionView.ItemsLayout>
                                </CollectionView>
                        </Frame>
                    </StackLayout>
                    <StackLayout Orientation="Vertical" Grid.Row="2" HeightRequest="350">
                        <StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                            <Label Text="Translations" HorizontalOptions="StartAndExpand" Style="{StaticResource DesLabel}"/>
                            <Label Text="Show All" FontSize="Medium" TextColor="{DynamicResource PrimaryTextColor}" HorizontalOptions="End">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding RecitersListCommand}" CommandParameter="{StaticResource TypeTwo}"/>
                                </Label.GestureRecognizers>
                            </Label>
                        </StackLayout>
                        <Frame Style="{StaticResource DefaultFrame}">
                            <CollectionView x:Name="translationItemView" ItemsSource="{Binding RecitersWithTranslation}"
                                SelectionMode="Single" ItemTemplate="{StaticResource ItemTemplate}" >
                                    <CollectionView.ItemsLayout>
                                        <GridItemsLayout Orientation="Horizontal"  Span="2" />
                                    </CollectionView.ItemsLayout>
                                </CollectionView>
                        </Frame>
                    </StackLayout>
                </Grid>
                </ScrollView>
            </FlexLayout>
            <StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand" 
                             BackgroundColor ="{AppThemeBinding Light={StaticResource LightPageBackgroundSecondaryColor},
                                    Dark={StaticResource DarkPageBackgroundSecondaryColor}}">
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding NavigateToPlayerPageCommand}"/>
                </StackLayout.GestureRecognizers>
            </StackLayout>
        </FlexLayout>
  

Темное пространство в области вкладок появляется при прокрутке вниз

Ресурсы на странице

 <DataTemplate x:Key="PageListItemTemplate">
            <StackLayout Orientation="Vertical">
                <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
                    <Label Style="{StaticResource DesLabel}" HorizontalOptions="Start" VerticalOptions="Center" Text="{Binding Title}"/>
                </StackLayout>
                <BoxView Style="{StaticResource HorizentalLine}"></BoxView>
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding BindingContext.TopPageCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}"/>
                </StackLayout.GestureRecognizers>
            </StackLayout>
        </DataTemplate>
        <DataTemplate x:Key="ItemTemplate">
            <StackLayout Orientation="Vertical" HorizontalOptions="Center" Padding="0,5,0,0">
                <FFImage:CachedImage HeightRequest="100" WidthRequest="100" Source="{Binding ImagePath}" Style="{StaticResource FFImageDefaultStyleWithoutBinding}">
                    <FFImage:CachedImage.Transformations>
                        <FFimageTransformation:CircleTransformation></FFimageTransformation:CircleTransformation>
                    </FFImage:CachedImage.Transformations>
                </FFImage:CachedImage>
                <Label Text="{Binding Name}" FontSize="Small" WidthRequest="150" HorizontalTextAlignment="Center" LineBreakMode="WordWrap" />
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding BindingContext.OpenReciterChapterCommand, 
                                                    Source={x:Reference reciterItemView}}" CommandParameter="{Binding .}">
                    </TapGestureRecognizer>
                </StackLayout.GestureRecognizers>
            </StackLayout>
        </DataTemplate>
  

Комментарии:

1. Не могли бы вы поделиться с нами минимальным, воспроизводимым примером? Я не могу воспроизвести проблему с кодом, который вы публикуете.

2. @JackHua-MSFT Я добавил ресурсы, при необходимости я также могу добавить модель, но я думаю, что это простая привязка

3. Нет, это не будет вызвано привязкой. Это может быть вызвано расположением панели вкладок, пока я не могу воспроизвести ее на своей стороне, поэтому я спрашиваю вас, можете ли вы поделиться с нами примером проекта.

4. @JackHua-MSFT Здесь я загрузил пример проекта в Github. github.com/arahmancsd/SampleAudio

Ответ №1:

Изучив каждый фрагмент моего кода, наконец, я нашел проблему. На самом деле проблема не в дизайне или XAML. Это связано с приведенным ниже заявлением, которое я использовал в App.cs.

 public App()
{
     InitializeComponent();

     var navigationPage = new Xamarin.Forms.NavigationPage(new MainPage());
     navigationPage.On<iOS>().SetPrefersLargeTitles(true); // This line caused the problem.
     MainPage = navigationPage;
}
  

Удаление этой строки решило проблему.