.NET MAUI CollectionView项IsVisible变更后滚动高度不更新

在.NET MAUI应用中使用CollectionView展示组件列表，配置代码如下：

<Grid Grid.Row="2" RowDefinitions="*">
    <CollectionView ItemsSource="{Binding Source={x:Reference self}, Path=QuestionComponentList}"
                    ItemSizingStrategy="MeasureAllItems"
                    x:DataType="local:QuestionComponentVM"
                    SelectionMode="None"
                    ItemTemplate="{StaticResource componentSelector}"/>
</Grid>

页面内定义了componentSelector数据模板选择器，各模板均包含IsVisible="{Binding HasOptions}"绑定，示例模板如下：

<DataTemplate x:Key="photo" x:DataType="local:QuestionComponentVM">
    <local:PhotoComponent PhotoAdded="OnPhotoAdded" 
                          PhotoDeleted="OnPhotoDeleted" 
                          ChangeMade="QcLayout_OnChangeRequiresSaving" 
                          IsVisible="{Binding HasOptions}" 
                          QuestionComponent="{Binding .}"/>
</DataTemplate>

<local:QuestionComponentDataTemplateSelector x:Key="componentSelector"
                                             ValueTemplate="{StaticResource value}"
                                             RadioButtonTemplate="{StaticResource radiobutton}"
                                             CheckboxTemplate="{StaticResource checkbox}"
                                             PickerTemplate="{StaticResource picker}"
                                             PhotoTemplate="{StaticResource photo}"
                                             PredefinedTemplate="{StaticResource predefined}" />

问题现象 #

列表初始加载时部分项因HasOptions为false隐藏，符合预期。但当数据变更使HasOptions变为true后，对应项正常显示，CollectionView却未识别到内容尺寸变化，无法滚动到新增显示的项。绑定逻辑无问题，项可正常显示/隐藏，仅需解决滚动高度不更新的问题。

效果对比 #

• IsVisible变为true前（CollectionView滚动至底部）：
  

• IsVisible变为true后：
  

可见项已渲染，但无法滚动至该位置。

解决方案 #

1. 强制刷新CollectionView布局

当HasOptions属性变更时，手动触发CollectionView的布局更新。可通过消息通知或事件机制，在页面主线程调用InvalidateMeasure()方法，还可按需自动滚动到目标项：

在ViewModel的HasOptions属性中添加通知：

private bool _hasOptions;
public bool HasOptions
{
    get => _hasOptions;
    set
    {
        if (_hasOptions != value)
        {
            _hasOptions = value;
            OnPropertyChanged();
            MessagingCenter.Send(this, "RefreshCollectionLayout");
        }
    }
}

在页面中订阅消息并执行刷新：

MessagingCenter.Subscribe<QuestionComponentVM>(this, "RefreshCollectionLayout", (sender) =>
{
    MainThread.BeginInvokeOnMainThread(() =>
    {
        MyCollectionView.InvalidateMeasure();
        // 可选：自动滚动到刚显示的项
        MyCollectionView.ScrollTo(sender, ScrollToPosition.MakeVisible, true);
    });
});

2. 调整ItemSizingStrategy

当前使用的MeasureAllItems会缓存所有项的尺寸，尝试改为MeasureItem让CollectionView实时测量项的尺寸变化：

<CollectionView ItemsSource="{Binding Source={x:Reference self}, Path=QuestionComponentList}"
                ItemSizingStrategy="MeasureItem"
                x:DataType="local:QuestionComponentVM"
                SelectionMode="None"
                ItemTemplate="{StaticResource componentSelector}"/>

3. 用ContentView包装模板组件

将模板内的自定义组件用ContentView包裹，把IsVisible绑定到ContentView上，确保尺寸变化能被CollectionView正确捕获：

<DataTemplate x:Key="photo" x:DataType="local:QuestionComponentVM">
    <ContentView IsVisible="{Binding HasOptions}">
        <local:PhotoComponent PhotoAdded="OnPhotoAdded" 
                              PhotoDeleted="OnPhotoDeleted" 
                              ChangeMade="QcLayout_OnChangeRequiresSaving" 
                              QuestionComponent="{Binding .}"/>
    </ContentView>
</DataTemplate>

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