如何让.NET MAUI中WebView仅占内容高度？跨平台适配问题

针对你遇到的跨平台布局矛盾，有两种可行的解决方案，分别适配不同场景：

方案一：平台差异化布局（推荐） #

直接针对Android和Windows使用不同的布局结构，避免不必要的嵌套：

修改XAML代码，用OnPlatform为两端分别设置RefreshView的子元素：

<AbsoluteLayout x:Name="AbsoluteLayoutFrame" Padding="0" Margin="0">
    <RefreshView x:Name="RefreshView" RefreshColor="#2680ff"
                 AbsoluteLayout.LayoutFlags="All"
                 AbsoluteLayout.LayoutBounds="0,0,1,1"
                 Margin="0">
        <OnPlatform x:TypeArguments="View">
            <!-- Android端直接用WebView作为RefreshView子元素，原生支持滚动和下拉刷新 -->
            <On Platform="Android">
                <WebView x:Name="DigifaiWebView" Margin="0"
                         VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                         Navigating="OnNavigating"
                         Navigated="OnNavigated"/>
            </On>
            <!-- Windows端保留ScrollView包裹WebView，解决手势和点击事件问题 -->
            <On Platform="Windows">
                <ScrollView x:Name="WebScrollView">
                    <WebView x:Name="DigifaiWebView" Margin="0"
                             VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                             Navigating="OnNavigating"
                             Navigated="OnNavigated"/>
                </ScrollView>
            </On>
        </OnPlatform>
    </RefreshView>
    <!-- 你的ProgressBar代码 -->
</AbsoluteLayout>

为什么这样有效： #

• Android的WebView本身属于可滚动控件，完全符合RefreshView对"可滚动子元素"的要求，不需要额外嵌套ScrollView；
• Windows端的WebView在RefreshView下需要外层ScrollView来正确响应下拉刷新手势，同时避免顶部区域的点击事件被吞噬。

方案二：动态调整Android端WebView高度（保留ScrollView场景） #

如果因为业务需求必须保留ScrollView跨平台嵌套，可通过JavaScript获取HTML实际高度，动态设置WebView的高度：

1. 修改XAML中WebView的VerticalOptions为Start，取消FillAndExpand：

<ScrollView x:Name="WebScrollView">
    <WebView x:Name="DigifaiWebView" Margin="0"
             VerticalOptions="Start" HorizontalOptions="FillAndExpand"
             Navigating="OnNavigating"
             Navigated="OnNavigated"/>
</ScrollView>

2. 在后台代码的OnNavigated事件中，执行JS获取内容高度并调整：

private async void OnNavigated(object sender, WebNavigatedEventArgs e)
{
    if (DeviceInfo.Platform == DevicePlatform.Android)
    {
        // 执行JavaScript获取页面内容的实际滚动高度
        var heightStr = await DigifaiWebView.EvaluateJavaScriptAsync("document.body.scrollHeight");
        if (double.TryParse(heightStr, out double contentHeight))
        {
            // 设置WebView的高度为内容高度，避免多余空白
            DigifaiWebView.HeightRequest = contentHeight;
        }
    }
    // 这里添加隐藏ProgressBar等后续逻辑
}

Android端出现空白的原因： #

当ScrollView和WebView嵌套时，Android的WebView默认会尝试填充ScrollView的可用空间，而不是自适应内容高度。同时两者的滚动事件嵌套会导致高度计算逻辑混乱，最终让WebView被拉伸至超出实际内容的高度，滚动时就会出现大量空白区域。

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