如何实现带嵌套可展开子评论的CollectionView评论区？

问题场景 #

需要实现支持嵌套回复的评论区，点击评论可展开/折叠下属所有子评论，当前用CollectionView仅能显示顶级评论，想确认是否该动态添加控件，以及最优实现方式。

最优实现：递归数据模板 + 绑定展开状态 #

不推荐动态添加控件，这种方式会带来布局复杂度高、性能差、维护困难等问题。更合理的方案是利用递归DataTemplate结合ViewModel的状态绑定来实现嵌套展开效果。

1. 定义评论数据模型

首先需要一个包含子评论集合和展开状态的模型：

public class CommentModel : INotifyPropertyChanged
{
    public string Comment { get; set; }
    public List<CommentModel> ChildComments { get; set; } = new List<CommentModel>();

    private bool _isExpanded;
    public bool IsExpanded
    {
        get => _isExpanded;
        set
        {
            _isExpanded = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 递归XAML模板实现嵌套布局

在页面资源中定义可递归复用的评论模板，子评论区域通过IsVisible绑定展开状态：

<ContentPage.Resources>
    <DataTemplate x:Key="CommentTemplate">
        <Grid Margin="0,4">
            <!-- 主评论点击区域 -->
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Tapped="Comment_Tapped" CommandParameter="{Binding .}"/>
            </Grid.GestureRecognizers>
            <Label Text="{Binding Comment}"
                   FontSize="15"
                   Margin="25,1,25,0"
                   HorizontalTextAlignment="Start"
                   FontFamily="Font_11"
                   TextColor="White" 
                   BackgroundColor="Green"/>
            
            <!-- 子评论列表：仅展开时显示，递归引用模板 -->
            <CollectionView 
                ItemsSource="{Binding ChildComments}"
                Margin="40,0,0,0"
                IsVisible="{Binding IsExpanded}"
                ItemTemplate="{StaticResource CommentTemplate}">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout Orientation="Vertical"/>
                </CollectionView.ItemsLayout>
            </CollectionView>
        </Grid>
    </DataTemplate>
</ContentPage.Resources>

<!-- 顶级评论列表 -->
<CollectionView x:Name="lvComments" 
                BackgroundColor="#25405E" 
                Grid.Column="0" 
                Grid.ColumnSpan="2" 
                Grid.Row="1"
                ItemsSource="{Binding TopLevelComments}"
                ItemTemplate="{StaticResource CommentTemplate}">
</CollectionView>

3. 实现展开/折叠逻辑

在后台代码中处理点击事件，切换对应评论的展开状态：

private void Comment_Tapped(object sender, EventArgs e)
{
    if (e is TappedEventArgs tappedArgs && tappedArgs.Parameter is CommentModel comment)
    {
        comment.IsExpanded = !comment.IsExpanded;
    }
}

现成组件推荐 #

如果不想手动实现，可选择成熟的第三方组件：

• Syncfusion Xamarin.Forms TreeView：支持嵌套层级展开折叠，可高度自定义模板，适配评论线程场景
• Telerik UI for Xamarin TreeView：提供完整的嵌套列表交互能力，支持样式定制和状态管理

为什么不推荐动态添加控件？ #

• 性能损耗：动态增删控件会频繁触发布局重绘，大量评论时会出现明显卡顿
• 维护成本高：手动管理控件生命周期和数据绑定容易引发BUG，后续迭代难度大
• 状态丢失风险：页面刷新或回收时，动态添加的控件状态难以持久化

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