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 之后，contentInsetAdjustmentBehaviorscrollView 中添加了一个名为的属性。

从文件：

此属性指定如何使用安全区域插入来修改滚动视图的内容区域。

因此，您需要使用 acustom renderer来配置此属性：

在代码隐藏中：

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

自定义渲染器