Xamarin.Forms中ScrollView嵌套CollectionView的iOS双滚动问题解决方案

针对你遇到的iOS端双滚动问题，不用重构整个页面的话，可以通过以下两种方式解决：

方法一：自定义iOS渲染器（推荐） #

这种方式可以全局控制自定义CollectionView的滚动行为，适合多个页面有相同需求的场景。

1. 在共享项目中创建自定义CollectionView控件：

using Xamarin.Forms;

namespace YourAppName
{
    public class NonScrollCollectionView : CollectionView
    {
        // 无需额外逻辑，仅作为标记控件
    }
}

2. 在iOS项目中添加渲染器：

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourAppName;
using YourAppName.iOS.Renderers;

[assembly: ExportRenderer(typeof(NonScrollCollectionView), typeof(NonScrollCollectionViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class NonScrollCollectionViewRenderer : CollectionViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<GroupableItemsView> e)
        {
            base.OnElementChanged(e);
            
            if (Control != null)
            {
                // 禁用CollectionView自身的垂直滚动
                Control.ScrollEnabled = false;
                // 关闭iOS默认的弹性回弹效果
                Control.AlwaysBounceVertical = false;
                // 清除内边距避免多余空白
                Control.ContentInset = UIEdgeInsets.Zero;
            }
        }
    }
}

3. 在XAML中替换原CollectionView：

<ScrollView>
    <StackLayout>
        <!-- 页面其他元素 -->
        
        <local:NonScrollCollectionView ItemsSource="{Binding FirstDataSource}"
                                       ItemSizingStrategy="MeasureFirstItem">
            <!-- 你的ItemTemplate布局 -->
        </local:NonScrollCollectionView>
        
        <local:NonScrollCollectionView ItemsSource="{Binding SecondDataSource}"
                                       ItemSizingStrategy="MeasureFirstItem">
            <!-- 你的ItemTemplate布局 -->
        </local:NonScrollCollectionView>
        
        <!-- 页面其他元素 -->
    </StackLayout>
</ScrollView>

方法二：代码后台针对iOS平台设置 #

如果只需要在单个页面处理，直接在页面代码后台添加平台特定配置即可：

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

public partial class YourPage : ContentPage
{
    public YourPage()
    {
        InitializeComponent();
        
        // 针对页面中的两个CollectionView分别设置
        FirstCollectionView.On<iOS>().SetScrollEnabled(false);
        FirstCollectionView.On<iOS>().SetAlwaysBounceVertical(false);
        
        SecondCollectionView.On<iOS>().SetScrollEnabled(false);
        SecondCollectionView.On<iOS>().SetAlwaysBounceVertical(false);
    }
}

关键注意事项 #

• 确保CollectionView的HeightRequest不设置固定值，让它自动根据内容计算高度；
• 建议设置ItemSizingStrategy为MeasureFirstItem或MeasureAllItems，保证CollectionView能准确计算整体高度，避免内容截断或滚动异常。

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