.NET MAUI Android端Popup无法滚动问题求助

我用.NET 7 MAUI加MAUI Community Toolkit开发应用，点击按钮弹出的Popup在Windows上能正常滚动，但Android上完全滚不动。试过把ScrollView的VerticalOptions设为FillAndExpand，也指定过高度，问题还是没解决。

相关代码 #

打开Popup的按钮代码 #

<ScrollView Orientation="Both">
    <VerticalStackLayout>
        <Button
            Margin="10"
            Padding="10"
            Command="{Binding NewBuyFormDisplayCommand}"
            Text="Add New Buy Record" />
    </VerticalStackLayout>
</ScrollView>

ViewModel代码 #

[RelayCommand]
public async Task NewBuyFormDisplay()
{
    await ResetForm();
    addBuyPage = new AddBuyPage(this);
    await Shell.Current.ShowPopupAsync(addBuyPage);
}

Popup的XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup
    x:Class="MAUIAPP_BigHop87.Views.AddBuyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:vm="clr-namespace:MAUIAPP_BigHop87.ViewModels"
    x:DataType="vm:BuyViewModel">
    <ScrollView Orientation="Both" VerticalOptions="FillAndExpand">
        <StackLayout
            Padding="20"
            HorizontalOptions="FillAndExpand"
            Spacing="0"
            WidthRequest="300">
            <Label FontSize="Header" Text="Add a New Buy Record" />
            <Frame MinimumWidthRequest="400">
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="No" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry
                        IsReadOnly="True"
                        Text="{Binding DateId}"
                        TextColor="{AppThemeBinding Dark=White,
                                                    Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Vendor" />
                    <Picker
                        Title="Select Your Vendor"
                        ItemsSource="{Binding VendorsList}"
                        SelectedIndex="0"
                        SelectedItem="{Binding VendorName}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Customer" />
                    <Picker
                        Title="Select Your Customer"
                        ItemsSource="{Binding CustomersList}"
                        SelectedIndex="0"
                        SelectedItem="{Binding CustomerName}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Item Name" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding ItemName}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Length" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Length}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Width" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Width}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Height" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Height}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Flut Type" />
                    <Picker
                        Title="Select Your Flut Type"
                        ItemsSource="{Binding FlutTypes}"
                        SelectedIndex="0"
                        SelectedItem="{Binding FlutType}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout>
                    <Label Text="Layer Type" />
                    <Picker
                        Title="Select Your Layer Type"
                        ItemsSource="{Binding LayerTypes}"
                        SelectedIndex="0"
                        SelectedItem="{Binding Layer}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Price" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Price}" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Delivery Date" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <DatePicker Date="{Binding DeliveryDate}" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Status" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Switch IsToggled="{Binding Status}" OnColor="Blue" />
                </StackLayout>
            </Frame>
            <Frame>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Label Text="Note" TextColor="{AppThemeBinding Dark=White, Light=Black}" />
                    <Entry Text="{Binding Note}" />
                </StackLayout>
            </Frame>
            <HorizontalStackLayout Padding="10" Spacing="10">
                <Button
                    Margin="10"
                    Padding="10"
                    Command="{Binding CancelCommand}"
                    Text="Cancel" />
                <Button
                    Margin="10"
                    Padding="10"
                    Command="{Binding SaveBuyCommand}"
                    CommandParameter="{Binding .}"
                    Text="Add" />
            </HorizontalStackLayout>
        </StackLayout>
    </ScrollView>
</toolkit:Popup>

修复方案 #

1. 给Popup设置明确的高度限制 #

Android上MAUI Toolkit的Popup需要明确的尺寸约束，否则ScrollView无法正确计算滚动区域。直接给Popup添加高度限制：

<toolkit:Popup
    ...
    MaximumHeightRequest="600"
    MinimumHeightRequest="400">

2. 优化ScrollView布局属性 #

把ScrollView的VerticalOptions改为Fill，如果不需要横向滚动，将Orientation设为Vertical，减少布局计算压力：

<ScrollView Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill">
    <StackLayout
        Padding="20"
        HorizontalOptions="Fill"
        Spacing="0"
        WidthRequest="300">
        <!-- 表单内容 -->
    </StackLayout>
</ScrollView>

3. 解决Android端手势冲突 #

Android上Popup的触摸事件可能会拦截ScrollView的滚动事件，在Popup后台代码添加平台专属处理：

#if ANDROID
protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
    if (Handler is CommunityToolkit.Maui.Core.Views.PopupHandler handler)
    {
        handler.PlatformView.Touch += (s, e) =>
        {
            e.Handled = false;
        };
    }
}
#endif

4. 替换为VerticalStackLayout #

将内部的StackLayout换成MAUI的VerticalStackLayout，它的布局计算更高效，能避免Android上的布局异常：

<ScrollView Orientation="Vertical" VerticalOptions="Fill">
    <VerticalStackLayout
        Padding="20"
        HorizontalOptions="Fill"
        Spacing="0"
        WidthRequest="300">
        <!-- 表单内容 -->
    </VerticalStackLayout>
</ScrollView>

内容的提问来源于stack exchange，提问作者Muhammad Ashar Bhatti