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

【问题标题】：Transparent status bar shows webview content while scrolling IOS滚动IOS时透明状态栏显示webview内容
【发布时间】：2020-02-16 02:27:52
【问题描述】：

我放了一个 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;
    }
}

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

【问题讨论】：

嗨，你解决了吗？

标签： c# ios .net xamarin webview

【解决方案1】：

这个原因是由 IOS 设备中的 Safe Area 造成的。参考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;
}

最终效果：

【讨论】：