.NET MAUI同一Content Page中WebView与其他控件共存问题

问题分析 #

你当前使用VerticalStackLayout的布局中，WebView的HorizontalOptions="EndAndExpand"属性可能导致布局计算异常，再加上线性布局的特性，当WebView加载渲染时，会挤压上方控件的显示空间。同时固定的WidthRequest和HeightRequest在不同设备上的适配问题，也会加剧布局冲突。另外目标服务器要求启用JavaScript的需求，也需要针对性配置WebView。

修复方案 #

1. 改用Grid布局替代VerticalStackLayout

Grid布局能精准控制控件的位置与占比，彻底避免线性布局的挤压问题。将页面分为上下两个区域：上方放置日期选择器和按钮，下方放置WebView。

修改后的XAML代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
             xmlns:dxco="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"
             xmlns:dxcv="clr-namespace:DevExpress.Maui.CollectionView;assembly=DevExpress.Maui.CollectionView"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:models="clr-namespace:Pcal.Models"
             x:Class="Pcal.Views.GetCal"
             Title="GetCal">

    <Grid Padding="10" Background="White">
        <!-- 定义两行：第一行自适应内容高度，第二行占剩余空间 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 上方区域：日期选择器和按钮 -->
        <VerticalStackLayout Grid.Row="0" Spacing="10" Margin="0,0,0,20">
            <dxe:DateEdit x:Name="CalMonth"
                          PickerActiveViewType="Month"
                          BackgroundColor="White"
                          LabelText="Select Month"
                          LabelFontSize="18"
                          IsLabelFloating="False"
                          IsDateIconVisible="True"
                          ClearIconVisibility="Auto"
                          Margin="10"
                          DisplayFormat="MMMyy" 
                          UseNativePicker="true"/>
            <HorizontalStackLayout HorizontalOptions="Center">
                <Button Text="Get Calendar" WidthRequest="380"
                        HorizontalOptions="Fill" 
                        Clicked="OnClicked" 
                        BackgroundColor="Purple" 
                        TextColor="White"/>
            </HorizontalStackLayout>
        </VerticalStackLayout>

        <!-- 下方区域：WebView -->
        <WebView Grid.Row="1"
                 x:Name="PFCWV1"
                 Source="https://pilot.fedex.com"
                 IsVisible="true"
                 HorizontalOptions="Fill"
                 VerticalOptions="Fill"
                 Navigating="WebViewNavigating"/>
    </Grid>
</ContentPage>

2. 启用WebView的JavaScript支持

针对目标服务器的要求，在后台代码中为各平台配置WebView的JavaScript启用选项：

protected override void OnAppearing()
{
    base.OnAppearing();
    // 跨平台启用JavaScript
#if ANDROID
    PFCWV1.Handler.PlatformView.SetSettingsJavaScriptEnabled(true);
#elif IOS
    PFCWV1.Handler.PlatformView.Configuration.Preferences.JavaScriptEnabled = true;
#elif WINDOWS
    PFCWV1.Handler.PlatformView.IsJavaScriptEnabled = true;
#endif
}

3. 移除不必要的固定尺寸约束

去掉WebView的WidthRequest和HeightRequest，改用HorizontalOptions="Fill"和VerticalOptions="Fill"让其自适应Grid分配的空间，同时保证上方控件始终处于可见状态。

关键优化点 #

• 用Grid的Auto和*行定义，确保上方控件仅占用自身所需高度，WebView填充剩余全部空间。
• 调整WebView的布局属性，避免EndAndExpand这类易引发布局偏移的设置。
• 统一配置各平台的JavaScript支持，满足目标服务器的访问要求。

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