SuperAPI AI 工具集

syncfusion-maui-toolkit-expander

前端与建站

查看项目

更新于 10-16 02:08

技能介绍

用途

Syncfusion .NET MAUI Expander(SfExpander)控件用于创建可折叠和可展开的内容区域,实现节省空间的布局。用户点击标题即可显示或隐藏内容,并带有平滑动画,适合手风琴布局、FAQ 以及组织化的数据展示。

主要能力

  • 点击标题即可交互式展开/折叠
  • 完全可自定义的标题和内容视图布局
  • 平滑动画,可配置持续时间和缓动效果
  • 事件系统:Expanding、Expanded、Collapsing、Collapsed 状态
  • 通过 IsExpanded 属性进行编程控制
  • 支持 Visual State Manager 动态样式
  • 标题外观自定义(背景、图标位置、颜色)
  • 可取消 Expanding 和 Collapsing 操作
  • 平台优化的渲染和动画

使用方式

入门

阅读 references/getting-started.md,适用于首次设置、安装和基本实现,包括:

  • 安装 Syncfusion.Maui.Toolkit NuGet 包
  • 注册 Syncfusion 处理程序(ConfigureSyncfusionToolkit)
  • 创建基本 SfExpander 实例
  • 定义 Header 和 Content 视图
  • 使用 IsExpanded 属性控制初始状态
  • 包含多个 expander 的完整发票示例
  • 运行第一个 expander 应用

标题与内容自定义

阅读 references/header-content-customization.md,适用于自定义标题和内容区域,包括:

  • 在 Header 和 Content 属性中加载任意 UI 视图
  • 使用 Grid 布局配合图标和标签
  • 图标与字体族集成
  • 多 expander 布局(包含多个部分的发票)
  • 内容结构最佳实践
  • 避免常见陷阱(容器中的 Label 换行)

动画与事件

阅读 references/animation-events.md,适用于控制动画行为和处理展开/折叠事件,包括:

  • AnimationDuration 属性(默认:300ms)
  • AnimationEasing 属性(Linear、SinOut 等)
  • 通过 IsExpanded 属性进行编程控制
  • Expanding 事件:展开前触发(可取消)
  • Expanded 事件:展开完成后触发
  • Collapsing 事件:折叠前触发(可取消)
  • Collapsed 事件:折叠完成后触发
  • 带取消逻辑的事件处理程序示例

外观与样式

阅读 references/appearance-styling.md,适用于自定义标题外观、颜色、图标和 Visual State Manager 样式,包括:

  • HeaderIconPosition 属性(Start、End)
  • HeaderBackground 颜色自定义
  • HeaderIconColor 自定义
  • Visual State Manager(VSM)状态:Expanded、Collapsed、PointerOver、Normal
  • 基于 expander 状态的动态外观变化
  • 包含颜色过渡的完整 VSM 示例

适用场景

  • 实现节省空间布局和组织化内容展示的可折叠区域
  • 为 FAQ、设置面板或分组数据创建手风琴式界面
  • 构建带有可展开区域(日期、项目、付款、地址)的发票或收据视图
  • 设计动态标题/内容布局,用户点击即可显示更多信息
  • 添加可自定义持续时间和缓动效果的动画展开/折叠功能
  • 处理展开/折叠事件以控制用户交互和状态管理
  • 使用背景、图标位置和 Visual State Manager 样式自定义标题外观

限制

资料中未提供关于平台支持范围、版本兼容性、授权或收费模式的具体说明,暂未提供。