iOS滚动时WebView内容穿透透明状态栏问题求助

我之前在Xamarin.Forms开发时也遇到过一模一样的iOS状态栏问题，给你几个实用的解决思路：

方案1：调整页面布局，让WebView避开状态栏区域 #

在你的MainPage构造函数里，给页面添加顶部内边距，对应iOS状态栏的高度。这样WebView会从状态栏下方开始布局，内容就不会跑到状态栏后面了：

public partial class MainPage : ContentPage 
{ 
    public MainPage() 
    { 
        InitializeComponent();
        var browser = new WebView(); 
        browser.Source = "https://xxxxxxxxxxxxxxxx.net/"; 
        // 针对iOS设置顶部内边距，Android会自动适配
        if (DeviceInfo.Platform == DevicePlatform.iOS)
        {
            Padding = new Thickness(0, DeviceInfo.StatusBarHeight, 0, 0);
        }
        Content = browser; 
    } 
}

方案2：修改iOS项目的状态栏样式（强制不透明） #

如果状态栏本身是透明的，就算WebView布局调整了，视觉上还是可能有问题。你可以在iOS项目的Info.plist里添加以下设置，把状态栏改成不透明：

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleDarkContent</string> <!-- 或者UIStatusBarStyleLightContent，根据你的需求 -->
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

另外，也可以在AppDelegate.cs的FinishedLaunching方法里设置状态栏背景：

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    // 设置状态栏背景为不透明（比如白色）
    UIView statusBar = new UIView(UIApplication.SharedApplication.StatusBarFrame);
    statusBar.BackgroundColor = UIColor.White;
    UIApplication.SharedApplication.KeyWindow?.AddSubview(statusBar);
    
    global::Xamarin.Forms.Forms.Init();
    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

方案3：使用自定义WebView渲染器（更灵活的控制） #

如果上面的方法不够，你可以给iOS写一个自定义渲染器，直接调整WebView的Frame，确保它避开安全区域：

// 在iOS项目中创建CustomWebViewRenderer.cs
[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            
            if (e.NewElement != null)
            {
                // 获取安全区域顶部高度
                var safeAreaTop = UIApplication.SharedApplication.KeyWindow?.SafeAreaInsets.Top ?? 0;
                // 调整WebView的Frame，顶部加上安全区域高度
                NativeView.Frame = new CGRect(0, safeAreaTop, UIScreen.MainScreen.Bounds.Width, UIScreen.MainScreen.Bounds.Height - safeAreaTop);
            }
        }
    }
}

为什么之前的CSS没生效？ #

因为WebView本身的布局是从屏幕最顶部开始的（包括状态栏的透明区域），网页里的margin/padding只会调整网页内容的位置，但WebView的可视区域还是覆盖了状态栏，所以滚动时内容还是会跑到状态栏后面。先调整WebView的布局位置，再结合CSS的env(safe-area-inset-top)会更稳妥：

body {
    padding-top: env(safe-area-inset-top);
}

内容的提问来源于stack exchange，提问作者Sumit0501