.NET MAUI中VerticalStackLayout内WebView尺寸异常问题求助

问题分析 #

核心问题在于：WebView默认不会根据加载的HTML内容自动调整自身高度，嵌套在ScrollView的VerticalStackLayout中时，它只会占用最小显示空间；同时WebView自带的滚动会和外层ScrollView的滚动冲突，无法实现整体滚动的需求。

实现步骤 #

1. 禁用WebView内部滚动 #

先通过HTML样式和平台配置，彻底禁用WebView的内部滚动：

• HTML调整：给test.html添加全局样式，强制内容不产生内部滚动：

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
    body { margin: 0; overflow: hidden; }
</style>
<div>
<!-- 原有HTML内容 -->
</div>

2. 动态设置WebView高度 #

通过WebView的Navigated事件，调用JavaScript获取HTML页面的实际高度，再将该值赋值给WebView的HeightRequest，让WebView自适应内容高度。

修改后的XAML代码

<ScrollView>
    <VerticalStackLayout>
        <WebView x:Name="ContentWebView" 
                 Source="test.html" 
                 Background="Red"
                 Navigated="ContentWebView_Navigated"/>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
    </VerticalStackLayout>
</ScrollView>

后台代码后置文件

private async void ContentWebView_Navigated(object sender, WebNavigatedEventArgs e)
{
    if (sender is WebView webView)
    {
        // 调用JS获取页面实际高度
        var heightStr = await webView.EvaluateJavaScriptAsync("document.body.scrollHeight.toString()");
        if (double.TryParse(heightStr, out double contentHeight))
        {
            // 给WebView设置高度，可根据需求添加少量偏移量
            webView.HeightRequest = contentHeight;
        }
    }
}

3. 平台兼容性增强可选 #

如果Android/iOS上仍存在滚动冲突，可通过自定义Handler禁用平台级WebView的滚动：

Android平台Platforms/Android/Handlers/WebViewHandler.cs

using Android.Webkit;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Platforms.Android.Handlers;

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(Android.Webkit.WebView platformView)
    {
        base.ConnectHandler(platformView);
        platformView.ScrollEnabled = false;
    }
}

在MauiProgram.cs注册：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<WebView, Platforms.Android.Handlers.CustomWebViewHandler>();
#endif
});

iOS平台Platforms/iOS/Handlers/WebViewHandler.cs

using WebKit;
using Microsoft.Maui.Handlers;

namespace YourAppNamespace.Platforms.iOS.Handlers;

public class CustomWebViewHandler : WebViewHandler
{
    protected override void ConnectHandler(WKWebView platformView)
    {
        base.ConnectHandler(platformView);
        platformView.ScrollView.ScrollEnabled = false;
        platformView.ScrollView.Bounces = false;
    }
}

在MauiProgram.cs注册：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS
    handlers.AddHandler<WebView, Platforms.iOS.Handlers.CustomWebViewHandler>();
#endif
});

效果说明 #

完成配置后：

• WebView会根据HTML内容的实际高度自动拉伸，不再占用最小空间
• WebView内部滚动被完全禁用，所有滚动操作由外层ScrollView接管
• Label会被推到WebView内容的底部，只有滚动到WebView最下方时才会显示

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