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

Xamarin.Forms - Strange height issue with my responsive WebViews on iOS

我有一个 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 将被添加到高度。

此处 post 的代码很多,但这里是 github 项目的 link: https://github.com/SlimboTimbo/MultipleWebViews

检查项目后,发现无法在 iOS 设备中工作的原因。

原因webView.ScrollView.ContentSizewidth不正确,太小了就是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 值,例如 return (double)sizeF.Height + 10 以适应屏幕。