iOS中ScrollView嵌套Grid内WebView无法自适应高度的问题咨询

嗨，这个问题我之前做跨平台开发的时候也踩过坑，太能理解你那种明明Android端运行正常，iOS却突然掉链子的郁闷了！

先给你说清楚核心原因：Android和iOS的WebView底层实现逻辑差异很大。Android端的WebView会主动把内容的实际高度同步给上层的布局系统，所以Grid和ScrollView能自动调整WebView的高度，让内容完整显示；但iOS现在默认用的WKWebView，它不会主动把内容高度通知给Forms层的布局控件，上层的Grid拿到的只是WebView的最小默认高度，自然就没法自适应，只能靠手动设HeightRequest来“暴力”撑开，这显然不是灵活的长久之计。

接下来给你几个亲测有效的解决办法：

方法一：自定义iOS WebView渲染器，同步内容高度 #

这是最常用的方案，通过原生渲染器打通WKWebView和Forms布局系统的高度同步：

1. 首先在Forms项目里创建一个自定义WebView类（只是用来标记要自定义渲染的控件）：

public class AutoHeightWebView : WebView
{
    public static readonly BindableProperty ContentHeightProperty =
        BindableProperty.Create(nameof(ContentHeight), typeof(double), typeof(AutoHeightWebView), 0.0);

    public double ContentHeight
    {
        get => (double)GetValue(ContentHeightProperty);
        set => SetValue(ContentHeightProperty, value);
    }
}

2. 然后在iOS项目里写自定义渲染器：

[assembly: ExportRenderer(typeof(AutoHeightWebView), typeof(AutoHeightWebViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class AutoHeightWebViewRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null && Control is WKWebView wkWebView)
            {
                wkWebView.NavigationDelegate = new AutoHeightWebViewNavigationDelegate(Element as AutoHeightWebView);
            }
        }
    }

    public class AutoHeightWebViewNavigationDelegate : WKNavigationDelegate
    {
        private readonly AutoHeightWebView _formsWebView;

        public AutoHeightWebViewNavigationDelegate(AutoHeightWebView formsWebView)
        {
            _formsWebView = formsWebView;
        }

        public override void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
        {
            base.DidFinishNavigation(webView, navigation);
            // 注入JS获取内容高度
            webView.EvaluateJavaScriptAsync("document.body.scrollHeight").ContinueWith(task =>
            {
                if (task.Result != null)
                {
                    double contentHeight = double.Parse(task.Result.ToString());
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        _formsWebView.ContentHeight = contentHeight;
                        _formsWebView.HeightRequest = contentHeight;
                    });
                }
            }, TaskScheduler.FromCurrentSynchronizationContext());
        }
    }
}

3. 最后在XAML里替换原来的WebView为自定义的AutoHeightWebView：

<ScrollView HorizontalScrollBarVisibility="Never">
    <Grid RowDefinitions="Auto,*">
        <Label Text="{Binding subject}" Grid.Row="0"/>
        <local:AutoHeightWebView x:Name="WebView" Grid.Row="1">
            <WebView.Source>
                <HtmlWebViewSource Html="{Binding html}"/>
            </WebView.Source>
        </local:AutoHeightWebView>
    </Grid>
</ScrollView>

方法二：利用WebView的Navigated事件直接获取高度（适合简单场景） #

如果不想写自定义渲染器，也可以在Forms层的WebViewNavigated事件里直接执行JS获取高度：

private async void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
    if (Device.RuntimePlatform == Device.iOS && sender is WebView webView)
    {
        var result = await webView.EvaluateJavaScriptAsync("document.body.scrollHeight");
        if (double.TryParse(result, out double height))
        {
            webView.HeightRequest = height;
        }
    }
}

然后在XAML里给WebView加上Navigated="WebView_Navigated"事件绑定就行。

额外注意事项 #

• 要确保你的HTML内容里没有设置固定高度的容器，比如body { height: 100vh; }这种设置会导致JS获取的document.body.scrollHeight不准。
• 如果你的HTML内容是动态加载的（比如AJAX加载内容），那还要在JS里加一个MutationObserver监听DOM变化，当内容更新时重新计算高度，再通知Forms层更新控件高度。

内容来源于stack exchange