.NET Maui中如何在按日期分组的CollectionView组头显示总金额

步骤1：扩展分组模型，添加总金额属性 #

修改ExpensesGroupModel，新增TotalAmount属性，在构造函数中自动计算当前组内所有费用的总和（处理Amount为null的情况，默认按0计算）：

// 费用分组模型，继承自ExpensesDetailModel列表
public class ExpensesGroupModel : List<ExpensesDetailModel>
{
    public DateTime ExpensesDate { get; set; }
    // 新增组内总金额属性
    public double TotalAmount { get; set; }

    public ExpensesGroupModel(DateTime expensesDate, List<ExpensesDetailModel> expensesList) : base(expensesList)
    {
        ExpensesDate = expensesDate;
        // 累加组内所有费用金额，null值按0处理
        TotalAmount = expensesList.Sum(item => item.Amount ?? 0);
    }
}

步骤2：保留原有分组逻辑 #

ViewModel中的分组代码无需修改，因为分组模型的构造函数已经自动完成了总金额计算：

// 在ViewModel中按日期分组
var dic = MonthlyExpensesList.GroupBy(x => x.ExpensesDate.Date).ToDictionary(d => d.Key, d => d.ToList());

foreach (KeyValuePair<DateTime, List<ExpensesDetailModel>> item in dic)
{
    MonthlyGroupExpensesList.Add(new ExpensesGroupModel(item.Key, new List<ExpensesDetailModel>(item.Value)));
}

步骤3：修改XAML组头模板，绑定总金额 #

更新CollectionView的组头模板，添加总金额标签并调整布局，让日期和总金额分别居左、居右：

<CollectionView Margin="10,8" ItemsSource="{Binding MonthlyGroupExpensesList}" IsGrouped="True">
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate x:DataType="models:ExpensesGroupModel">
            <Frame Margin="0,5" Padding="10" HeightRequest="50" BorderColor="Transparent"
                BackgroundColor="Bisque">
                <HorizontalStackLayout HorizontalOptions="FillAndExpand">
                    <!-- 显示分组日期 -->
                    <Label Text="{Binding ExpensesDate,StringFormat='{0:d}'}" FontSize="18"
                        TextColor="Black" FontAttributes="Bold" />
                    <!-- 显示组内总金额，靠右对齐 -->
                    <Label Text="{Binding TotalAmount,StringFormat='Total: {0:n2}'}" 
                        FontSize="18" TextColor="Black" FontAttributes="Bold"
                        HorizontalOptions="EndAndExpand"/>
                </HorizontalStackLayout>
            </Frame>
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>

    <!-- 原有列表项模板保持不变 -->
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:ExpensesDetailModel">
            <Frame Margin="0" Padding="10" CornerRadius="0">
                <VerticalStackLayout>
                    <HorizontalStackLayout HorizontalOptions="Start">
                        <Label Text="{Binding ExpensesDescription}" FontSize="16"
                            FontAttributes="Bold" />
                    </HorizontalStackLayout>
                    <HorizontalStackLayout HorizontalOptions="EndAndExpand">
                        <Label Margin="0,-25" Text="{Binding Amount,StringFormat='{0:n2}'}"
                            FontSize="18" FontAttributes="Bold" TextColor="Red" />
                    </HorizontalStackLayout>
                </VerticalStackLayout>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

完成上述修改后，分组列表的组头会自动显示对应日期的费用总金额，与预期效果一致。

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