如何使用 CustomWebViewRenderer 使 WKWebView 的高度适合其在 Xamarin 中的内容？

Question

我为 iOS 制作了一个自定义 webview 渲染器，我手动用 WKWebView 替换了自定义 WebView。但是，我的主要目的是让 WKWebView 根据其内容调整其高度。它的内容由带有正文的预定义 HTML 字符串组成。

现在它切断了 Webview，其余的内容都塞在了滚动视图中。我放在 webview 之前的图像和文本也保持固定不变，同时我也希望它们向下滚动。我不想要 webview 的滚动条，我只希望 webview 与其内容的大小一致，以便用户可以向上滑动以查看整个文本。

自定义WebViewRenderer.cs

[assembly: ExportRenderer(typeof(PostWebView), typeof(Yoors.iOS.CustomWebViewRenderer))]
namespace Yoors.iOS
{
    public class CustomWebViewRenderer : ViewRenderer<PostWebView, WKWebView>
    {
        WKWebView _wkWebView;
        protected override void OnElementChanged(ElementChangedEventArgs<PostWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                WKWebViewConfiguration config = new WKWebViewConfiguration();

                _wkWebView = new WKWebView(Frame, config);


                SetNativeControl(_wkWebView);
            }
            if (e.NewElement != null)
            {

                HtmlWebViewSource source = (Xamarin.Forms.HtmlWebViewSource)Element.Source;
                string headerString = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'></header>";
                string html= headerString + source.Html;
                Console.WriteLine("Height" + Element);
                _wkWebView.LoadHtmlString(html, baseUrl: null);
                _wkWebView.ScrollView.ScrollEnabled = false;
                _wkWebView.SizeToFit();
            }




        }
    }

PostWebView.xaml

<?xml version="1.0" encoding="UTF-8"?>
<WebView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Yoors.Views.Templates.PostWebView" x:Name="WebViewer" BackgroundColor="White" Margin="0, 10, 0, 0" VerticalOptions="FillAndExpand" HeightRequest="1000">
    <WebView.Source>
        <HtmlWebViewSource Html="{Binding Data.Content}" />
    </WebView.Source>
</WebView>

PostView.xaml

 <ContentPage.Content>
        <ScrollView>
            <StackLayout BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <!-- Header of the post-->
                <Image HeightRequest="125" Aspect="AspectFill" Source="{Binding Post.ImageUrl}" />
                <StackLayout BackgroundColor="White" Padding="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="10, 0,10, 0">
                    <Label Text="{Binding Post.Title}" FontFamily="{StaticResource BoldFont}" FontSize="20" />
                    <Label Text="{Binding Post.CreatedOn.DisplayText}" FontSize="12" />
                    <!-- Content of the post in a HTML view-->
                </StackLayout>
                <templates:PostWebView VerticalOptions="FillAndExpand" BindingContext="{Binding Post}">
                </templates:PostWebView>
                <templates:CommentView BindingContext="{Binding CommentsViewModel}">
                    <x:Arguments>
                        <ListViewCachingStrategy>RecycleElement</ListViewCachingStrategy>
                    </x:Arguments>
                </templates:CommentView>
            </StackLayout>
        </ScrollView>
    </ContentPage.Content>

我认为为 PostWebView 放置 VerticalOptions="FillAndExpand" 会使其适合其内容的大小，而无需创建 scollbar，因此不会将其他内容固定到位，但它只是这样做： 有谁知道如何提供帮助？

Answer 1

我通过创建一个 CustomNavigationDelegate 在 Webview 完成加载时注册来回答我自己的问题。

CustomNavigationDelegate.cs

public class CustomWKNavigationDelegate : WKNavigationDelegate
    {

        CustomWebViewRenderer _webViewRenderer;

        public CustomWKNavigationDelegate(CustomWebViewRenderer webViewRenderer)
        {
            _webViewRenderer = webViewRenderer;
        }

        public  override async void DidFinishNavigation(WKWebView webView, WKNavigation navigation)
       {
            var wv = _webViewRenderer.Element as PostWebView;
            if (wv != null)
            {
                await System.Threading.Tasks.Task.Delay(100); // wait here till content is rendered
                wv.HeightRequest = (double)webView.ScrollView.ContentSize.Height;
            }
        }
    }

然后在我上面展示的 CustomWebViewRenderer 的 OnElementChanged 中，我将导航委托分配给 WKWebView。

自定义WebViewRenderer.cs

...
 protected override void OnElementChanged(ElementChangedEventArgs<PostWebView> e)
        {
            base.OnElementChanged(e);


            if (Control == null)
            {
                WKWebViewConfiguration config = new WKWebViewConfiguration();

                _wkWebView = new WKWebView(Frame, config);
                _wkWebView.NavigationDelegate = new CustomNavigationDelegate(this);
...

这将使 WKWebView 具有其内容的大小！