MAUI自定义WebView无法完整显示HTML内容求助

核心排查与修复方案 #

1. 修正布局约束，避免底部控件挤压 #

确保WebView所在的布局能占据除底部栏之外的全部可用空间，推荐使用Grid布局明确分配行高：

<Grid>
    <!-- 背景图 -->
    <Image Source="Background.png" Aspect="AspectFill" Grid.RowSpan="3"/>
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/> <!-- WebView占满剩余空间 -->
        <RowDefinition Height="Auto"/> <!-- 音频控制栏自适应高度 -->
        <RowDefinition Height="Auto"/> <!-- 页脚图片自适应高度 -->
    </Grid.RowDefinitions>

    <!-- 自定义WebView -->
    <local:DailyReadingAndroidWebView 
        Grid.Row="0"
        HorizontalOptions="Fill"
        VerticalOptions="Fill"/>

    <!-- 底部音频控制栏 -->
    <StackLayout Grid.Row="1" BackgroundColor="#F0F0F0" Padding="10">
        <!-- 音频控件内容 -->
    </StackLayout>

    <!-- 页脚图片 -->
    <Image Grid.Row="2" Source="Footer.png" HorizontalOptions="Fill" Aspect="AspectFit"/>
</Grid>

2. 自定义渲染器中动态计算内容高度 #

在Android渲染器中监听页面加载完成事件，通过JS获取HTML实际高度并调整WebView布局：

[assembly: ExportRenderer(typeof(DailyReadingAndroidWebView), typeof(DailyReadingAndroidRenderer))]
namespace YourAppNamespace.Platforms.Android
{
    public class DailyReadingAndroidRenderer : WebViewRenderer
    {
        public DailyReadingAndroidRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Microsoft.Maui.Controls.WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.SetWebViewClient(new ContentHeightWebViewClient(Control));
                Control.Settings.JavaScriptEnabled = true;
            }
        }

        private class ContentHeightWebViewClient : Android.Webkit.WebViewClient
        {
            private readonly Android.Webkit.WebView _webView;

            public ContentHeightWebViewClient(Android.Webkit.WebView webView)
            {
                _webView = webView;
            }

            public override void OnPageFinished(Android.Webkit.WebView view, string url)
            {
                base.OnPageFinished(view, url);
                // 注入JS获取文档滚动高度
                view.EvaluateJavascript("document.body.scrollHeight;", new HeightCallback(_webView));
            }
        }

        private class HeightCallback : Java.Lang.Object, IValueCallback
        {
            private readonly Android.Webkit.WebView _webView;

            public HeightCallback(Android.Webkit.WebView webView)
            {
                _webView = webView;
            }

            public void OnReceiveValue(Java.Lang.Object value)
            {
                if (int.TryParse(value.ToString().Replace("\"", ""), out int height))
                {
                    _webView.LayoutParameters.Height = height;
                    _webView.RequestLayout();
                }
            }
        }
    }
}

3. 避免滚动嵌套与固定高度限制 #

• 不要将WebView嵌套在ScrollView中，WebView自身具备滚动能力，嵌套会导致高度计算异常。
• 检查自定义WebView是否重写了MeasureOverride，若有需确保返回的尺寸是内容的实际高度，而非固定值。

4. 排查HTML自身问题 #

在桌面浏览器中打开目标HTML内容，确认是否存在overflow:hidden、固定高度容器等导致内容截断的样式，如有则调整HTML的CSS规则。

内容的提问来源于stack exchange，提问作者Matthew Pans