MAUI iOS端ScrollView内WebView无法扩展的问题求助

问题描述 #

原在Xamarin.Forms中可正常运行的XAML代码：

<ScrollView HorizontalScrollBarVisibility="Never">
    <StackLayout>
        <WebView x:Name="WebView" VerticalOptions="FillAndExpand">
            <WebView.Source>
                <HtmlWebViewSource Html="{Binding html}"/>
            </WebView.Source>
        </WebView>
    </StackLayout>
</ScrollView>

迁移到MAUI后，因FillAndExpand属性过时，替换为Fill并将StackLayout改为VerticalStackLayout，但WebView无法正常调整大小：

<ScrollView HorizontalScrollBarVisibility="Never">
    <VerticalStackLayout>
        <WebView x:Name="WebView" VerticalOptions="Fill">
            <WebView.Source>
                <HtmlWebViewSource Html="{Binding html}"/>
            </WebView.Source>
        </WebView>
    </VerticalStackLayout>
</ScrollView>

疑问：

• 为何过时的FillAndExpand能正常工作，新的Fill却不行？
• 该如何解决MAUI中WebView的尺寸调整问题？

原因分析 #

1. 布局选项逻辑差异：
   Xamarin.Forms中的FillAndExpand同时包含Fill和Expand两个布局标志：Fill让元素填充分配到的空间，Expand让父容器将剩余空间优先分配给该元素。旧的StackLayout会识别Expand标志，给WebView分配足够的可用空间。

2. MAUI布局容器的行为变化：
   MAUI中的Fill仅对应填充已分配的空间，不包含Expand逻辑；而新的VerticalStackLayout默认是根据子元素自身尺寸来排列，不会主动给子元素分配额外剩余空间。再加上外层ScrollView的滚动特性，WebView无法获得足够的拉伸空间，导致尺寸异常。

解决办法 #

方案一：用Grid替代VerticalStackLayout #

Grid默认行高为*，会自动让子元素占满整个可用空间，无需额外设置Expand：

<ScrollView HorizontalScrollBarVisibility="Never">
    <Grid>
        <WebView x:Name="WebView" VerticalOptions="Fill">
            <WebView.Source>
                <HtmlWebViewSource Html="{Binding html}"/>
            </WebView.Source>
        </WebView>
    </Grid>
</ScrollView>

方案二：给WebView添加Expand布局标志 #

保留VerticalStackLayout，同时给WebView的VerticalOptions添加Expand选项，让父容器分配剩余空间：

<ScrollView HorizontalScrollBarVisibility="Never">
    <VerticalStackLayout VerticalOptions="Fill">
        <WebView x:Name="WebView" VerticalOptions="Fill, Expand">
            <WebView.Source>
                <HtmlWebViewSource Html="{Binding html}"/>
            </WebView.Source>
        </WebView>
    </VerticalStackLayout>
</ScrollView>

方案三：动态绑定WebView内容高度（无嵌套滚动） #

如果WebView自身的滚动足以展示内容，可去掉外层ScrollView，避免嵌套滚动导致的尺寸计算问题，同时通过JS获取HTML内容高度并绑定到WebView的HeightRequest：

ViewModel中添加属性（需实现INotifyPropertyChanged）：

private double _webViewContentHeight;
public double WebViewContentHeight
{
    get => _webViewContentHeight;
    set
    {
        _webViewContentHeight = value;
        OnPropertyChanged();
    }
}

XAML代码：

<VerticalStackLayout VerticalOptions="Fill">
    <WebView x:Name="WebView" 
             VerticalOptions="Fill" 
             Navigated="WebView_Navigated"
             HeightRequest="{Binding WebViewContentHeight}">
        <WebView.Source>
            <HtmlWebViewSource Html="{Binding html}"/>
        </WebView.Source>
    </WebView>
</VerticalStackLayout>

后台代码（处理Navigated事件）：

private async void WebView_Navigated(object sender, WebNavigatedEventArgs e)
{
    if (sender is not WebView webView) return;
    
    var heightStr = await webView.EvaluateJavaScriptAsync("document.documentElement.scrollHeight || document.body.scrollHeight");
    if (double.TryParse(heightStr, out double contentHeight))
    {
        ((YourViewModel)BindingContext).WebViewContentHeight = contentHeight;
    }
}

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