Xamarin.Forms - 我在 iOS 上的响应式 WebView 出现奇怪的高度问题答案

【问题标题】：Xamarin.Forms - Strange height issue with my responsive WebViews on iOSXamarin.Forms - 我在 iOS 上的响应式 WebView 出现奇怪的高度问题
【发布时间】：2020-06-04 11:30:21
【问题描述】：

我有一个 ListView，在里面我想绑定多个高度不同的 webview。我想根据它的内容计算每个 webview 的高度并相应地显示它。

它适用于 Android - 在 iOS 上，所有 WebView 都太大了

       await System.Threading.Tasks.Task.Delay(100);
       var result = (double)webView.ScrollView.ContentSize.Height;
       _webView.HeightRequest = result;

奇怪的是：webview 的 html 字符越多，它就越大。所以我可以只添加一个字符，另外 50px 将添加到高度。

这里有很多代码要发布，但这里是 github 上项目的链接： https://github.com/SlimboTimbo/MultipleWebViews

【问题讨论】：

您好，感谢您在此处分享示例项目链接。这将有助于找到解决方案。我将在我的本地站点中检查：-)

标签： xamarin.forms wkwebview

【解决方案1】：

检查项目后，发现不能在iOS设备上运行的原因。

原因是webView.ScrollView.ContentSize的width不正确，太小就是27。因此，它无法正确显示。

System.Console.WriteLine("----" + resultWidth + "-----"+ resultHeight + "----"+ _webView.Width);

输出：

2020-06-04 11:19:58.066542+0800 MultipleWebViews.iOS[50674:1690400] ----27-----642----375

解决方案：

您可以通过HybridWebView的宽度计算height，并将计算后的height设置为HybridWebView。

DidFinishNavigation方法代码如下：

public override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
{

    try
    {
        var _webView = webViewRenderer.Element as HybridWebView;
        if (_webView != null)
        {
            await System.Threading.Tasks.Task.Delay(100);
            var resultWidth = (double)webView.ScrollView.ContentSize.Width;
            var resultHeight = (double)webView.ScrollView.ContentSize.Height;
            System.Console.WriteLine("----" + resultWidth + "-----"+ resultHeight + "----"+ _webView.Width);

            double result = MeasureTextHeightSize(_webView.messageContent, _webView.Width, UIFont.LabelFontSize, null);

            _webView.HeightRequest = result;

            MessagingCenter.Send<Object, PassModel>(this, "LoadFinished", new PassModel(_webView.Id, Convert.ToDouble(result)));
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine("Error at HybridWebViewRenderer LoadingFinished: " + ex.Message);
    }
}

MeasureTextHeightSize（计算高度的方法）

private double MeasureTextHeightSize(string text, double width, double fontSize, string fontName = null)
{
    var nsText = new NSString(text);
    var boundSize = new SizeF((float)width, float.MaxValue);
    var options = NSStringDrawingOptions.UsesFontLeading | NSStringDrawingOptions.UsesLineFragmentOrigin;

    if (fontName == null)
    {
        fontName = "HelveticaNeue";
    }

    var attributes = new UIStringAttributes
    {
        Font = UIFont.FromName(fontName, (float)fontSize)
    };

    var sizeF = nsText.GetBoundingRect(boundSize, options, attributes, null).Size;

    //return new Xamarin.Forms.Size((double)sizeF.Width, (double)sizeF.Height);
    return (double)sizeF.Height;
}

效果：

注意：您可以根据您当前的系统字体大小修改此方法的fontSize。也可以自定义返回值，如return (double)sizeF.Height + 10以适应屏幕。

【讨论】：

完美！不幸的是，一旦我开始将 html 内容包装到 div 中，我仍然会遇到问题。它再次增加了大量不必要的间距。如果需要，我可以将其全部重新检查到 github
@TJP Okey，你可以在 github 中更新它，我会检查的。另外，记得采纳为答案（点击此答案左上角的✔），对有类似问题的人有帮助！
我现在用更复杂的 HTML 更新了它，它似乎再次对创建的高度产生负面影响。
@TJP 感谢更新，我会检查的。
@TJP 如果包含div，则解决方案并不总是有效。虽然可以使用if ... else ... 来知道是否包含div，但这种方式总是行不通的。因为div的风格可以不同。如果好消息会在这里更新，我将继续寻找最佳解决方案。