透明状态栏在滚动IOS时显示WebView内容

Question

我放置了一个webview，Anroid运行正常，但是在IOS上，当我滚动时，我看到内容在透明状态栏后面滚动。 Click and see the top left corner of the image

我尝试使用与Safari浏览器相关的css添加边距和填充，但不起作用

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        var browser = new WebView();
        browser.Source = "https://xxxxxxxxxxxxxxxx.net/";
        Content = browser;
    }
}

我希望状态栏变得不透明，并且滚动的内容不会在状态栏后面显示。

Answer 1

此原因是由于IOS设备中的安全区域引起的。参考Safe Area Layout Guide on iOS，您可以在Xamarin Forms中将安全区域设置为true：

<ContentPage ...
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             Title="Safe Area"
             ios:Page.UseSafeArea="true">
    <StackLayout>
        ...
    </StackLayout>
</ContentPage>

我的内容页面如下：

public MainPage()
{
    InitializeComponent();

    var browser = new WebView();
    browser.Source = "https://docs.microsoft.com/en-us/appcenter/test-cloud/starting-a-test-run";
    Content = browser;
}

最终效果：