我在 ScrollView 中的 WebView 被裁剪答案

【问题标题】：My WebView inside ScrollView being cropped我在 ScrollView 中的 WebView 被裁剪
【发布时间】：2021-09-10 15:26:44
【问题描述】：

有没有办法将 WebView 高度设置为自动（适合内容）？我的 XAML 代码：

        <ScrollView VerticalScrollBarVisibility="Default" HorizontalScrollBarVisibility="Never" BackgroundColor="Red">
            <Grid BackgroundColor="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <StackLayout Spacing="0">
                    <Image Source="https://streettraining.hu/uploads/slider/street-training-balaton-2020.jpg" HorizontalOptions="FillAndExpand" Margin="0"/>
                    <Grid BackgroundColor="#dcdde1" Margin="0" Padding="0,20,0,20">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <StackLayout Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Center">
<!--My header -->
                        </StackLayout>
                <local:AutoHeightWebView Grid.Row="1" x:Name="webView" Margin="0,20,0,0" VerticalOptions="FillAndExpand" IsEnabled="False" Source="{Binding Leiras}"/>
                <Grid Grid.Row="2" Margin="0,20,0,0" BackgroundColor="#dcdde1" Padding="20">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Label Text="Programs"/>
                    <Grid x:Name="NapInditStack" BackgroundColor="White" Padding="20" Grid.Row="1">
                        <local:AutoHeightWebView x:Name="NapInditWebView" Source="{Binding NapIndit}" IsEnabled="False" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
                    </Grid>
                </Grid>
            </Grid>
        </ScrollView>

我在安卓上试过这个渲染器：

public class AutoHeightWebViewRenderer : WebViewRenderer
    {
        static AutoHeightWebView _xwebView = null;

        public AutoHeightWebViewRenderer(Android.Content.Context context) : base(context)
        {
        }

        class DynamicSizeWebViewClient : WebViewClient
        {
            public async override void OnPageFinished(Android.Webkit.WebView view, string url)
            {
                try
                {
                    if (_xwebView != null)
                    {
                        view.Settings.JavaScriptEnabled = true;
                        view.Settings.DomStorageEnabled = true;
                        _xwebView.HeightRequest = 0d;

                        await Task.Delay(500);

                        string result = await _xwebView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                        _xwebView.HeightRequest = Convert.ToDouble(result);
                    }
                    base.OnPageFinished(view, url);
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"{ex.Message}");
                }
            }
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);
            _xwebView = e.NewElement as AutoHeightWebView;

            if (e.OldElement == null)
            {
                Control.SetWebViewClient(new DynamicSizeWebViewClient());
            }
        }
    }

IOS：

    public class AutoHeightWebViewRenderer : WkWebViewRenderer
    {
        public bool added = false;
        protected override async void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            var webView = e.NewElement as WebView;
            if (webView != null)
            {
                
                webView.HeightRequest = 0d;
                await Task.Delay(1000);
                var x = await webView.EvaluateJavaScriptAsync("(function(){return document.body.scrollHeight;})()");
                webView.HeightRequest = Convert.ToDouble(x);
            }
        }
    }

第一个 Webview 在 android 上运行完美，但在 IOS 上我有一个非常大的空白。
安卓：
IOS：

第二个 WebView，在 Android 上我看到了这个：红色背景是主Scrollview的背景
我在 iOS 中看到了整个 webview，但是有一个相同的空白区域（但大小不同）
HTML 代码：第一：

<html><head><link rel=\"stylesheet\" href=\"https://streettraining.hu/design/style_web0431.css\"><meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'/></head><body>
<div class=\"wrapper\"><h4 class=\"savkiscim\">Ilyen témákra és élményekre számíthatsz:</h4><div class=\"cimkebox\"><p><span class=\"k1\"> asszertív viselkedés</span>, beszélgetés, beszélgetésvezetés, <span class=\"k3\">egymás megértése</span>, erőforrás feltárás, erősségeim, érzelmi intelligencia, <span class=\"k1\">fejlődés</span>, gyakorlás, intuíció, jelen, jövő, karrierút, kommunikáció, korlátainkat átlépni, közösségépítés, lámpaláz, learning by doing, <span class=\"k2\">megértetni magamat</span>, megoldáskeresés, <span class=\"k5\">önismeret</span>, önmenedzselés, panaszkodás, saját igényeimet képviselni, saját út, stresszcsökkentés, támogató vezetés, tanulás, társak, <span class=\"k4\">tudatosság</span>, <span class=\"k3\">változás</span>, visszajelzés</p></div></div>
</body></html>

第二：

<html><head><link rel=\"stylesheet\" href=\"https://streettraining.hu/design/style_web0431.css\"><meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'/></head><body>
<h1>Napindítás</h1><p>Közös virtuális nyitás FB live, illetve ZOOM-on.<br><br>Kedves Résztvevőnk! A Grand Opening-re, vagyis a Street Training Online (STO) Napindításra egy közös ZOOM szobában várunk itt:<br><br>Topic: STO_Napindítás<br>Join Zoom Meeting<br>https://us02web.zoom.us/j/83673948809?pwd=SDliK3ZZZUt6V0FDMDNKaE9POC9jdz09<br><br>Meeting ID: 836 7394 8809<br>Passcode: 842607<br><br>Érkezz meg 9.25-re, hogy együtt kezdhessünk!<br>Ugyanekkor a Street Training Online 2021 facebook eseménynél indítunk majd egy live bejelentkezést is, figyeld az oldalt!<br><br>One tap mobile<br>+3617010488,,83673948809#,,,,*842607# Hungary<br>+3617799126,,83673948809#,,,,*842607# Hungary<br>Dial by your location<br>       +36 1 701 0488 Hungary<br>        +36 1 779 9126 Hungary<br>        +36 1 408 8456 Hungary<br>Meeting ID: 836 7394 8809<br>Passcode: 842607<br>Find your local number: https://us02web.zoom.us/u/kc4GXRFLkv<br><br></p>
</body></html>

【问题讨论】：

标签： c# xamarin xamarin.forms webview xamarin.forms.webview

【解决方案1】：

我建议您使用RelativeLayout 来显示Webview，它将允许创建在不同设备尺寸之间按比例缩放的UI。有关更多信息，您可以在以下链接中找到您需要的内容： https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/relativelayout

【讨论】：

【解决方案2】：

我找到了答案。 This 是 XF android BUG.

但是当我们将 ScrollView 包装在 ContentView 中时，我们可以胜过。（我们不需要RelativeLayout来显示Webview）

代码：

       <ContentView>
       <ScrollView VerticalScrollBarVisibility="Default" HorizontalScrollBarVisibility="Never" BackgroundColor="Red">
            <Grid BackgroundColor="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
             <local:AutoHeightWebView Grid.Row="1" x:Name="webView" Margin="0,20,0,0" VerticalOptions="FillAndExpand" IsEnabled="False" Source="{Binding Leiras}"/>
             <local:AutoHeightWebView x:Name="NapInditWebView" Source="{Binding NapIndit}" IsEnabled="False" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
        </Grid>
    </ScrollView>
    </ContentView>

在 IOS 渲染器中更改：

webView.HeightRequest = Convert.ToDouble(x);

到这里：

webView.HeightRequest = Convert.ToDouble(x) * 0.365;

我找到了答案here

【讨论】：