Flutter：基于SfDataGrid实现可展开、可排序筛选的关联数据表可行吗？

需求说明 #

• 主数据表行支持折叠/展开，展开后显示与主表行ID匹配的副数据表
• 主、副表列数不同，各有独立表头
• 主表表头需支持排序与筛选

实现遇到的问题 #

使用SfDataGrid开发时，尝试过以下方案但均不符合需求：

• 将副表内容挤压至单列或合并为单行，无法保留副表独立表头和多列结构
• 使用分组功能后，分组标题不支持排序、筛选，且表头布局混乱

解答 #

该设计完全合理，且可以通过SfDataGrid的**细节模板（Detail Template）**功能实现，无需依赖分组功能。

核心实现思路 #

1. 主表配置：常规配置SfDataGrid，开启AllowSorting和AllowFiltering属性，确保主表表头的排序、筛选功能正常工作。
2. 细节模板嵌入副表：为主表设置DetailTemplate，在模板内部嵌入一个独立的SfDataGrid作为副表，绑定与当前主表行关联的副表数据源。
3. 副表独立配置：副表可根据自身需求设置独立的列、表头，无需与主表列数保持一致，只需确保数据源与主表当前行ID匹配即可。

关键注意点 #

• 分组功能的设计目标是聚合同类数据，而非展示关联的独立子表，因此之前用分组导致的问题属于场景不匹配，并非设计不合理。
• 副表数据源需与主表当前行关联，可通过在ViewModel中为每个主表数据项绑定对应的SubData集合，或使用转换器根据主表行ID动态过滤副表数据。

示例代码片段 #

<SfDataGrid x:Name="MainDataGrid" 
            ItemsSource="{Binding MainDataSource}" 
            AllowSorting="True" 
            AllowFiltering="True">
    <!-- 主表列定义 -->
    <SfDataGrid.Columns>
        <GridTextColumn MappingName="MainId" Header="主表ID" />
        <GridTextColumn MappingName="MainName" Header="主表名称" />
        <!-- 其他主表列 -->
    </SfDataGrid.Columns>

    <!-- 细节模板：嵌入副表 -->
    <SfDataGrid.DetailTemplate>
        <DataTemplate>
            <SfDataGrid ItemsSource="{Binding SubDataSource}"
                        AutoGenerateColumns="False">
                <!-- 副表独立列定义 -->
                <SfDataGrid.Columns>
                    <GridTextColumn MappingName="SubId" Header="副表ID" />
                    <GridTextColumn MappingName="SubContent" Header="副表内容" />
                    <GridTextColumn MappingName="CreateTime" Header="创建时间" />
                    <!-- 其他副表列 -->
                </SfDataGrid.Columns>
            </SfDataGrid>
        </DataTemplate>
    </SfDataGrid.DetailTemplate>
</SfDataGrid>

（注：ViewModel中需确保MainDataSource的每个数据对象包含SubDataSource属性，该属性存储与当前主表行匹配的副表数据集合）

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