MAUI中对List<Words>按Word分组并在ListView展示的实现方案

1. 创建分组模型 #

由于原始Words类中同一单词会对应多条数据，我们需要定义分组模型来整合单词主信息与多组释义：

public class WordGroup
{
    // 主行展示的核心信息
    public string Word { get; set; }
    public string IPAUK { get; set; }
    public string IPAUS { get; set; }
    
    // 该单词对应的所有释义条目
    public List<WordMeaning> Meanings { get; set; } = new List<WordMeaning>();
}

// 单个释义的模型
public class WordMeaning
{
    public string Type { get; set; }
    public string Mainmeaning { get; set; }
    public string Translation { get; set; }
}

2. 对原始列表进行分组处理 #

使用LINQ的GroupBy方法按Word字段分组，将每组数据转换为WordGroup对象：

// 假设原始数据列表为List<Words> originalWordsList
var groupedWords = originalWordsList
    .GroupBy(word => word.Word)
    .Select(group => new WordGroup
    {
        Word = group.Key,
        // 取组内第一条数据的音标（默认同一单词音标一致，若有差异需额外处理）
        IPAUK = group.First().IPAUK,
        IPAUS = group.First().IPAUS,
        Meanings = group.Select(item => new WordMeaning
        {
            Type = item.Type,
            Mainmeaning = item.Mainmeaning,
            Translation = item.Translation
        }).ToList()
    })
    .ToList();

注意：若同一单词存在不同音标，需根据业务逻辑调整（如合并显示、标记异常等）。

3. 在ListView中实现分组展示 #

WPF 实现方式 #

1. 配置ListView的分组模板与条目模板：

<ListView ItemsSource="{Binding GroupedWords}">
    <!-- 分组头模板：展示单词与音标 -->
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="5">
                        <TextBlock Text="{Binding Word}" FontSize="16" FontWeight="Bold" Margin="0 0 15 0"/>
                        <TextBlock Text="UK: " FontSize="14"/>
                        <TextBlock Text="{Binding IPAUK}" FontSize="14" Margin="0 0 15 0"/>
                        <TextBlock Text="US: " FontSize="14"/>
                        <TextBlock Text="{Binding IPAUS}" FontSize="14"/>
                    </StackPanel>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListView.GroupStyle>
    
    <!-- 释义条目模板：展示词性、原意与译文 -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="20 5" Orientation="Horizontal">
                <TextBlock Text="{Binding Type}" Margin="0 0 10 0" FontStyle="Italic"/>
                <TextBlock Text="{Binding Mainmeaning}" Margin="0 0 10 0"/>
                <TextBlock Text="——" Margin="0 0 10 0"/>
                <TextBlock Text="{Binding Translation}" Foreground="Gray"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2. 绑定分组数据并启用分组：

var collectionViewSource = new CollectionViewSource();
collectionViewSource.Source = groupedWords;
collectionViewSource.GroupDescriptions.Add(new PropertyGroupDescription(nameof(WordGroup.Word)));
// 假设ListView的Name为wordListView
wordListView.ItemsSource = collectionViewSource.View;

WinForms 实现方式 #

1. 启用ListView分组并配置列：

wordListView.ShowGroups = true;
wordListView.View = View.Details;
// 添加释义列
wordListView.Columns.Add("词性", 80);
wordListView.Columns.Add("原意", 200);
wordListView.Columns.Add("译文", 200);

2. 遍历分组数据添加到ListView：

foreach (var group in groupedWords)
{
    // 创建分组头
    var listViewGroup = new ListViewGroup($"{group.Word} | UK: {group.IPAUK} | US: {group.IPAUS}");
    wordListView.Groups.Add(listViewGroup);
    
    // 添加该分组下的所有释义条目
    foreach (var meaning in group.Meanings)
    {
        var listItem = new ListViewItem(new[] { meaning.Type, meaning.Mainmeaning, meaning.Translation });
        listItem.Group = listViewGroup;
        wordListView.Items.Add(listItem);
    }
}

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