MAUI加载新内容后WebView底部出现空白问题求助

问题背景 #

需实现包含标题Label、圣徒图片、WebView（展示HTML内容）的Android布局，要求整体滚动而非仅WebView滚动，底部带音频播放器区域。初始加载正常，但切换不同日期数据后WebView底部出现空白；添加Navigated事件后UI内容不再显示。

布局代码 #

<!-- Android view -->
<Frame 
    Padding="5"
    CornerRadius="20"
    Margin="0,10,0,0" 
    Grid.Row="1" 
    x:Name="android_webview_frame" 
    BackgroundColor="#0091DA"
    IsVisible="False">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <ScrollView
            x:Name="android_scroll_view"
            Grid.Row="0"
            Orientation="Vertical"
            VerticalOptions="FillAndExpand">

            <VerticalStackLayout
                Grid.Row="0"
                Padding="5"
                Spacing="10"
                VerticalOptions="FillAndExpand"
                BackgroundColor="#0091DA">

                <Label
                    <!-- Title label -->
                </Label>

                <!-- Saint image -->
                <Grid 
                    IsVisible="False"
                    x:Name="image_layout">
                    <!-- Saint Image with name on top of saint-->
                    
                </Grid>

                <!-- Main content -->
                <WebView 
                    x:Name="android_webview"
                    BackgroundColor="#0091DA"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                </WebView>
            </VerticalStackLayout>
        </ScrollView>

        <!-- Audio border -->
        <Border
            x:Name="android_audio_border"
            Grid.Row="1"
            BackgroundColor="#014F78"
            StrokeThickness="0"
            Padding="0"
            Margin="15"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="EndAndExpand">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="30"/>
            </Border.StrokeShape>
        </Border>
    </Grid>
</Frame>

HTML内容设置代码 #

string description = Details.description;
// Define custom CSS to set font and text color
string htmlContent = $@"
    <html>
    <head>
        <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
        <style>
            @font-face {{
                font-family: 'Poppins';
                src: url('file:///android_asset/fonts/Poppins-Regular.ttf'); /* For Android */
            }}
            body {{
                background-color: #0091DA; /* Match WebView background */
                color: white; /* Set text color */
                font-family: 'Poppins', sans-serif;
                padding: 10px;
                font-size: 20px; /* Increase font size */
                line-height: 1.6; /* Improve readability */
            }}
            h4, h5, p {{
                color: white;
            }}
        </style>
    </head>
    <body>
        {description}
    </body>
    </html>";

var htmlSource = new HtmlWebViewSource();
htmlSource.Html = htmlContent;
android_webview.Source = htmlSource;

解决方案 #

1. 修复WebView高度自适应问题 #

WebView嵌套在ScrollView中时，默认无法正确计算内容高度，需动态调整：

• 修改布局中WebView的属性，让它根据内容自适应高度：

<WebView 
    x:Name="android_webview"
    BackgroundColor="#0091DA"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="Start"
    HeightRequest="0" />

• 加载HTML后通过JS获取内容高度，动态设置WebView高度（替代易出问题的Navigated事件）：

android_webview.Source = htmlSource;
// 注入JS获取页面实际高度
android_webview.EvaluateJavaScriptAsync("document.body.scrollHeight").ContinueWith(t =>
{
    if (t.Result != null && int.TryParse(t.Result.ToString(), out int height))
    {
        MainThread.BeginInvokeOnMainThread(() =>
        {
            android_webview.HeightRequest = height;
        });
    }
}, TaskScheduler.FromCurrentSynchronizationContext());

2. 修正HTML的Viewport与样式问题 #

原HTML的meta标签引号错误，且body默认边距可能导致空白：

<!-- 修正引号错误，补充viewport属性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

body {
    background-color: #0091DA;
    color: white;
    font-family: 'Poppins', sans-serif;
    padding: 10px;
    font-size: 20px;
    line-height: 1.6;
    margin: 0; /* 移除默认边距 */
}

3. 避免Navigated事件导致的内容消失 #

若必须使用Navigated事件，确保事件处理中不重置WebView的Source，仅执行高度计算：

private void Android_webview_Navigated(object sender, WebNavigatedEventArgs e)
{
    android_webview.EvaluateJavaScriptAsync("document.body.scrollHeight").ContinueWith(t =>
    {
        if (t.Result != null && int.TryParse(t.Result.ToString(), out int height))
        {
            MainThread.BeginInvokeOnMainThread(() =>
            {
                android_webview.HeightRequest = height;
            });
        }
    });
}

4. 切换数据时清理WebView缓存 #

避免旧内容残留导致高度计算错误：

// 加载新数据前执行
android_webview.ClearCache(true);
android_webview.ClearHistory();

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