syncfusion-maui-chips

实现 .NET MAUI Chips

Syncfusion .NET MAUI Chips 控件提供了多功能且功能丰富的组件（SfChip 和 SfChipGroup），用于在紧凑、交互式的布局中显示信息。Chips 让用户能够通过外观精美且可自定义的 UI 元素查看、选择、筛选信息或触发操作。

何时使用此技能

在用户需要以下功能时使用此技能：

• 将分类数据显示为紧凑、交互式的 chips（标签、标记、类别）
• 实现选择界面，支持单选或多选 chip 组
• 创建输入 chips，让用户能够动态添加或移除
• 构建筛选界面，通过多选指示器筛选数据
• 添加操作 chips，在点击时执行命令
• 自定义 chip 外观，包括颜色、边框、图标、字体和图像
• 处理 chip 交互，包括选择事件、点击处理程序或移除事件
• 使用 ItemsSource 和 DisplayMemberPath 从集合绑定 chip 数据

组件概览

SfChip： 单个 chip 组件，包含文本、图标、关闭按钮和自定义选项。

SfChipGroup： 管理多个 chip 的容器，支持：

• 四种 chip 类型：Input、Choice、Filter、Action
• 使用 ItemsSource 进行数据绑定
• 选择模式和视觉状态
• 布局自定义（FlexLayout、StackLayout 等）
• 选择和移除事件处理

主要功能：

• 动态创建和移除 chip
• 单选和多选模式
• 视觉选择指示器
• 支持图标和背景图像
• 全面的样式选项
• 支持 MVVM 命令
• 事件驱动的交互

文档和导航指南

入门

📄 阅读： references/getting-started.md

用户需要以下功能时：

• 安装并配置 Syncfusion .NET MAUI Chips 包
• 在 MauiProgram.cs 中注册 Syncfusion Core 处理程序
• 创建第一个 SfChip 或 SfChipGroup
• 设置 chip 布局（FlexLayout、StackLayout）
• 了解 chip 的基本设置和配置
• 查看最简可运行示例

Chip 类型和选择模式

📄 阅读： references/chip-types.md

用户需要以下功能时：

• 了解四种 chip 类型：Input、Choice、Filter、Action
• 实现支持动态添加和移除功能的 Input chips
• 创建支持单选的 Choice chips（ChoiceMode: Single、SingleOrNone）
• 构建支持多选和选择指示器的 Filter chips
• 使用可执行命令的 Action chips
• 配置已选中和普通状态的视觉样式
• 为使用场景选择合适的 chip 类型

自定义和样式

📄 阅读： references/customization.md

用户需要以下功能时：

• 自定义单个 SfChip 的外观
  • 显示/隐藏关闭按钮和选择指示器
  • 更改颜色（背景、文本、边框、关闭按钮、选择指示器）
  • 修改边框属性（描边粗细、圆角半径）
  • 设置文本样式（字号、字体系列、字形属性、颜色、对齐方式）
  • 配置图标（显示、来源、大小、对齐方式）
  • 添加背景图像
• 自定义 SfChipGroup 样式
  • 设置 chip 和已选中 chip 的颜色
  • 配置边框和内边距
  • 调整项目高度和文本大小
  • 设置选择指示器样式
• 为 MVVM 模式实现命令
• 在 chip 组中应用一致的主题

填充数据

📄 阅读： references/populating-data.md

用户需要以下功能时：

• 使用 ItemsSource 将业务对象绑定到 chips
• 使用 DisplayMemberPath 指定文本属性
• 使用 ImageMemberPath 绑定图标图像
• 为 chip 数据创建模型和 ViewModel 类
• 使用 Items 集合直接填充 SfChip 项目
• 添加 InputView 以动态创建 chip
• 实现数据绑定最佳实践
• 使用 [Preserve] 特性处理 AOT 发布注意事项

事件和交互

📄 阅读：references/events.md

当用户需要：

• 处理 SelectionChanging 事件（可取消，在选择前触发）
• 处理 SelectionChanged 事件（选择完成后触发）
• 响应 ChipClicked 事件
• 处理 Input 类型芯片的 ItemRemoved 事件
• 捕获 CloseButtonClicked 事件
• 了解事件参数和属性
• 了解每种芯片类型支持哪些事件

高级功能

📄 阅读：references/advanced-features.md

当用户需要：

• 为芯片应用字体图标（自定义图标字体）
• 使用 DataTemplateSelector 创建自定义芯片模板
• 实现 Liquid Glass 视觉效果
• 通过 IsSelected 属性以编程方式控制选择
• 处理 AOT 发布要求
• 应用特定于平台的自定义设置