MAUI中iOS与MacCatalyst底部按钮无法点击问题求助

问题复现场景 #

页面由ScrollView包裹VerticalStackLayout，包含Picker、Label、Entry控件，底部设Cancel/Save按钮；当绑定值WordTypeText为"Verb"时，动态显示额外控件。在iOS和MacCatalyst上，需滚动才能可见的Save按钮点击无响应，MacCatalyst调整窗口大小后恢复正常；已尝试监听VerticalStackLayout.SizeChanged调用ScrollView.InvalidateMeasure、添加底部透明BoxView，均无效，且无法升级至.NET8。

可行修复方案 #

方案1：动态控件显隐后强制异步更新布局 #

在WordTypeText值变更时，通过Dispatcher异步触发布局重计算，确保ScrollView的内容尺寸和触摸区域同步更新：

// 在ViewModel的WordTypeText属性变更回调，或页面的PropertyChanged事件中实现
private void OnWordTypeTextChanged(string oldValue, string newValue)
{
    // 原有控件显隐逻辑...
    
    // 异步触发布局更新
    Dispatcher.DispatchAsync(() =>
    {
        // 假设scrollView是页面中的ScrollView实例，mainStack是内部的VerticalStackLayout
        scrollView.InvalidateMeasure();
        scrollView.ForceLayout();
        mainStack.InvalidateMeasure();
        mainStack.ForceLayout();
    });
}

方案2：用CollectionView替代ScrollView #

CollectionView在iOS/MacCatalyst上的布局计算逻辑更稳定，直接替换ScrollView可避免触摸区域错位问题：

<!-- 替换原ScrollView为CollectionView -->
<CollectionView x:Name="mainCollection" VerticalOptions="FillAndExpand">
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type View}">
            <!-- 原ScrollView内的所有控件 -->
            <Picker Title="Select Word Type" SelectedItem="{Binding WordTypeText}" />
            <Label Text="Word" />
            <Entry Text="{Binding WordText}" />
            
            <!-- 动态显示的Verb专属控件 -->
            <StackLayout x:Name="VerbControls" IsVisible="{Binding WordTypeText, Converter={StaticResource StringEqualsConverter}, ConverterParameter=Verb}">
                <Label Text="Past Tense" />
                <Entry Text="{Binding PastTenseText}" />
            </StackLayout>
            
            <!-- 底部按钮栏 -->
            <StackLayout Orientation="Horizontal" HorizontalOptions="End" Padding="16,10" Spacing="10">
                <Button Text="Cancel" Clicked="buttonCancel_Clicked" />
                <Button Text="Save" Clicked="buttonSave_Clicked" />
            </StackLayout>
        </x:Array>
    </CollectionView.ItemsSource>
</CollectionView>

方案3：自定义ScrollView平台渲染器 #

针对iOS/MacCatalyst原生UIScrollView的触摸区域问题，自定义渲染器强制同步内容尺寸和布局：

1. 在Platforms/iOS和Platforms/MacCatalyst项目中添加渲染器类：

using Microsoft.Maui.Handlers;
using UIKit;

namespace YourAppNamespace.Platforms.iOS; // MacCatalyst对应Platforms.MacCatalyst
public class FixScrollViewHandler : ScrollViewHandler
{
    protected override void ConnectHandler(UIScrollView platformView)
    {
        base.ConnectHandler(platformView);
        platformView.ContentSizeChanged += OnContentSizeChanged;
    }

    protected override void DisconnectHandler(UIScrollView platformView)
    {
        platformView.ContentSizeChanged -= OnContentSizeChanged;
        base.DisconnectHandler(platformView);
    }

    private void OnContentSizeChanged(object sender, EventArgs e)
    {
        if (sender is UIScrollView scrollView)
        {
            scrollView.SetNeedsLayout();
            scrollView.LayoutIfNeeded();
        }
    }
}

2. 在MauiProgram.cs中注册渲染器：

builder.ConfigureMauiHandlers(handlers =>
{
#if IOS || MACCATALYST
    handlers.AddHandler<ScrollView, FixScrollViewHandler>();
#endif
});

方案优先级建议 #

优先尝试方案1和方案2，无需额外平台代码，实现简单；若仍无效再使用方案3的自定义渲染器。

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