c# - Xamarin.Forms ScrollView 增加了额外的空间

Question

我的 ScrollView 在我的 iPhone X 上的第一个子项上方和最后一个子项下方添加了额外的空间。它是该图像上方的蓝色间隙。没有填充或边距。

我为 ScrollView 设置了蓝色背景，以便更好地查看它的尺寸。 如果我删除 ScrollView，间距也会消失。这是我正在使用的代码

        <ScrollView>
            <!-- The MenuItems -->
            <Grid RowSpacing="0"
                  ColumnSpacing="0"
                  Margin="0, 0, 0, 0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="200" />
                    <RowDefinition Height="20" />
                    <RowDefinition Height="350" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="200" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <!--<ColumnDefinition Width="*" /> -->
                </Grid.ColumnDefinitions>
<animatedViews:SavannahCanvasView HorizontalOptions="Center"
                                                  Grid.Row="0" />

                <Grid Grid.Row="2"
                      BackgroundColor="#fbc531">
                    <Image HeightRequest="100"
                           VerticalOptions="End"
                           HorizontalOptions="FillAndExpand"
                           Aspect="Fill"
                           Source="{imageExtensions:ImageResource Source=Cheetah.Forms.Assets.Images.Background_Torque.png, TheAssembly=Cheetah.Forms}" />

                    <StackLayout VerticalOptions="Center"
                                 HorizontalOptions="Center"
                                 Margin="0,-100,0,0">

                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding ShowMyPingsPageCommand}" />
                        </StackLayout.GestureRecognizers>

                        <Image Source="{imageExtensions:ImageResource Source=Cheetah.Forms.Assets.Images.Radar@256px.png, TheAssembly=Cheetah.Forms}"
                               HeightRequest="150"
                               WidthRequest="150" />
                        <Label VerticalOptions="Center"
                               HorizontalOptions="Center"
                               Style="{StaticResource WhiteLabel}"
                               Text="My Pings" />
                    </StackLayout>

                </Grid>
....

这可能是一个错误还是由 iOS 状态栏渲染导致的？ 我的 UWP 项目也没有间距

Answer 1

在 iOS 11 之后，scrollView 添加了一个名为 contentInsetAdjustmentBehavior 的属性。

来自 document :

This property specifies how the safe area insets are used to modify the content area of the scroll view.

因此，您需要使用自定义渲染器 来配置此属性:

在代码隐藏中:

public class myScrollView : ScrollView {

}

在自定义渲染器中:

[assembly: ExportRenderer(typeof(myScrollView), typeof(MyScrollviewRender))]

namespace App308.iOS
{
    class MyScrollviewRender : ScrollViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
            {
                this.ContentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentBehavior.Never;
            }
        }
    }
}

在 Xaml 中:

  <local:myScrollView>
        <!-- The MenuItems -->
        <Grid x:Name="myGrid" RowSpacing="0"
                  ColumnSpacing="0"
                  Margin="0, 0, 0, 0">

            ....
        </Grid>
    </local:myScrollView>

引用:uiscrollviewcontentinsetadjustmentbehavior

custom-renderer