syncfusion-blazor-listview

实现 Syncfusion Blazor ListView 组件

Syncfusion Blazor ListView 组件是一款功能丰富的控件，用于显示和交互操作数据列表。它支持数据绑定、自定义模板、分组、筛选、虚拟化和高级选择模式。

何时使用此技能

• 设置 ListView - 安装、命名空间、服务注册、主题设置
• 绑定数据 - 本地数据数组、远程 DataManager 数据源、Entity Framework
• 创建模板 - 自定义项模板、页眉、页脚、分组页眉、设备专属渲染
• 选择与交互 - 复选框选择、获取所选项、单击处理程序
• 筛选与搜索 - 实时搜索、文本筛选、自定义筛选逻辑
• 整理数据 - 按类别分组、分组页眉、分层分组
• 性能 - 大型数据集的虚拟滚动、容器滚动与窗口滚动
• 高级布局 - 网格布局、双列表模式、聊天 UI、移动端响应式设计
• 样式与自定义 - CSS 类、主题、HTML 属性、响应式设计
• 事件处理 - 项选择、导航、超链接集成、列表事件

快速入门示例

@using Syncfusion.Blazor.Lists

<SfListView DataSource="@ListData">
    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>
</SfListView>

@code {
    List<DataModel> ListData = new List<DataModel>();

    protected override void OnInitialized()
    {
        ListData.Add(new DataModel { Text = "Item 1", Id = "1" });
        ListData.Add(new DataModel { Text = "Item 2", Id = "2" });
        ListData.Add(new DataModel { Text = "Item 3", Id = "3" });
    }

    public class DataModel
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }
}

常用属性与事件

基本属性

• DataSource - 用于绑定的项数组或 DataManager
• HeaderTitle - 可选的页眉文本
• ShowHeader - 显示/隐藏页眉（布尔值）
• EnableCheckbox - 启用复选框选择（布尔值）
• EnableVirtualization - 大型列表的虚拟滚动（布尔值）
• Height - 容器高度（虚拟滚动必需）
• ShowCheckBox - 显示用于选择的复选框
• SortOrder - 对项进行排序（Ascending/Descending）

模板属性

• HeaderTemplate - 自定义页眉外观
• Template - 自定义项渲染
• GroupTemplate - 自定义分组页眉
• FooterTemplate - 自定义页脚

选择与数据

• ListViewFieldSettings - 映射数据属性：
  • Id - 项标识符
  • Text - 显示文本
  • GroupBy - 分组字段
  • Child - 嵌套项
  • IconCss - 图标类
  • Tooltip - 悬停提示

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 在 WebAssembly、Web App 和 Server App 项目中安装
• 安装程序包（NuGet）
• 导入命名空间并注册服务
• 主题样式表和脚本引用
• 设置首个 ListView 组件
• 最小可运行示例

数据绑定与数据源

📄 阅读： references/data-binding-and-source.md

• 本地数据数组和 JSON 绑定
• 使用 DataManager 处理远程数据
• OData、OData V4、Web API 集成
• Entity Framework 绑定
• 使用 ListViewFieldSettings 映射字段
• 动态数据更新与刷新

模板与渲染

📄 阅读： references/templating-and-rendering.md

• 自定义项模板
• 页眉和页脚模板
• 分组页眉模板
• 设备专属模板（响应式渲染）
• 模板元素类（e-list-template、e-list-wrapper 等）
• 头像和徽章模板
• 多行项

项选择与操作

📄 阅读： references/item-selection-and-actions.md

• GetCheckedItemsAsync 方法
• 使用复选框进行选择
• 单选和多选模式
• 获取所选项数据和索引
• 自定义模板选择处理
• 单击事件处理程序

筛选与搜索

📄 阅读： references/filtering-and-searching.md

• 实现实时搜索
• 文本输入筛选
• 筛选逻辑和谓词
• 字符串匹配策略
• 不区分大小写的筛选
• 自定义筛选条件

分组与组织

📄 阅读： references/grouping-and-organization.md

• GroupBy 字段配置
• 分组标题样式
• 可折叠分组
• 基于类别的组织方式
• 层级分组模式

虚拟化与性能

📄 阅读： references/virtualization-and-performance.md

• EnableVirtualization 属性
• 窗口滚动与容器滚动
• 高度配置
• 大型数据集处理（1000+ 项）
• 性能优化技巧
• 虚拟滚动的局限与约束

高级布局

📄 阅读： references/advanced-layouts.md

• 网格布局自定义
• 双列表／多选模式
• 适用于移动设备的响应式联系人布局
• 聊天窗口 UI 实现
• 特定布局的 CSS 类
• 响应式设计模式

样式与自定义

📄 阅读： references/styling-and-customization.md

• CSS 类自定义（e-listview、e-list-item、e-list-header）
• 主题集成与颜色
• 悬停状态样式
• 选中项样式
• 分组标题样式
• HTML 属性支持
• CSS 结构与选择器

事件与导航

📄 阅读： references/events-and-navigation.md

• ListViewItem 事件处理
• 点击与选择事件
• 导航模式
• 超链接集成与路由
• 事件方法签名
• 事件上下文与数据

高级模式

📄 阅读： references/advanced-patterns.md

• 嵌套列表实现
• 动态添加／移除项目
• ListData 上的 CRUD 操作
• 复杂数据场景
• 多层嵌套
• 层级数据最佳实践

API 参考

📄 阅读： references/api-reference.md

• 完整的属性文档，包含类型和默认值
• 所有组件方法及其参数和返回类型
• 事件签名与事件参数
• 字段设置与字段映射配置
• 模板定义与用法
• 支持的枚举（SortOrder、CheckBoxPosition、ListViewEffect）
• 包含所有功能的完整可运行示例

关键属性参考

属性	类型	用途
DataSource	Array/DataManager	要显示的项目
HeaderTitle	string	标题文本
ShowHeader	bool	显示／隐藏标题
ShowCheckBox	bool	启用复选框
EnableVirtualization	bool	虚拟滚动
Height	string	组件高度（px）
SortOrder	SortOrder	升序／降序
CssClass	string	自定义 CSS 类
Template	RenderFragment	项目模板
HeaderTemplate	RenderFragment	标题模板

常见用例

1. 简单列表显示 — 使用基本的 DataSource 绑定和 ListViewFieldSettings
2. 可选择列表 — 添加 ShowCheckBox="true"，并使用 GetCheckedItemsAsync()
3. 可搜索列表 — 在 OnInput 事件中将 TextBox 输入绑定到用于筛选的 DataSource
4. 分组列表 — 在 ListViewFieldSettings 中映射 GroupBy 字段
5. 大型数据集 — 使用 EnableVirtualization="true" 和 Height 启用虚拟化
6. 自定义 UI — 使用 Template 属性创建多行布局、头像和徽章
7. 嵌套列表 — 映射 Child 字段并使用递归模板
8. 响应式设计 — 使用针对不同设备的模板，或根据视口动态选择模板

---

此技能为所有 ListView 场景提供架构与模式。有关详细实现和代码示例，请参阅相应的指南文件。