关于 syncfusion-maui-busy-indicator
这项技能面向在应用中添加加载和处理反馈的开发者,介绍如何实现 Syncfusion 的 .NET MAUI Busy Indicator。内容涵盖动画类型、样式、标题、遮罩及程序化状态控制。
主要功能
- 01七种内置动画类型
- 02自定义颜色、尺寸和速度
- 03配置标题与字体
- 04程序化控制动画
- 05可选背景遮罩
适用场景
- 01数据获取时显示加载状态
- 02文件上传时提示处理进度
- 03处理期间阻止用户交互
- 04设计品牌化加载界面
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-busy-indicator安装后在 Claude Code 中输入/syncfusion-maui-busy-indicator确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/animation-types.mdcontrolling-state.mdcustomization.mdgetting-started.mdtitle-configuration.md详细介绍
实现忙碌指示器
Syncfusion .NET MAUI 忙碌指示器(SfBusyIndicator)可在应用加载、数据处理及其他耗时操作期间提供视觉反馈。它提供 7 种内置动画类型、丰富的自定义选项,以及用于控制加载状态的简洁 API。
何时使用此技能
在以下情况下使用此技能:
- 显示加载状态,用于数据获取、API 调用或初始化
- 显示处理反馈,用于长时间运行的操作
- 实现活动指示器,支持自定义动画和样式
- 添加忙碌覆盖层,以便在处理期间阻止用户交互
- 打造品牌化的加载体验,支持自定义颜色、大小和标题
- 根据应用逻辑动态控制动画状态
- 提供视觉反馈,提升用户对性能的感知
**常见场景:**登录界面、数据同步、文件上传、搜索操作、报告生成、异步操作,以及任何需要用户等待的任务。
组件概述
主要功能:
- **7 种动画类型:**CircularMaterial、LinearMaterial、Cupertino、SingleCircle、DoubleCircle、Globe、HorizontalPulsingBox
- **全面自定义:**颜色、大小、速度、覆盖层背景
- **支持标题:**可配置文本,并支持自定义字体和位置选项
- **状态控制:**使用 IsRunning 属性以编程方式启动/停止动画
- **响应式设计:**字体自动缩放,大小自适应
- **覆盖层支持:**可选背景覆盖层,并支持渐变
文档与导航指南
入门
📄 阅读:references/getting-started.md
**何时阅读:**首次实现、项目设置、安装软件包
你将了解:
- 安装 Syncfusion.Maui.Core NuGet 软件包
- 在 MauiProgram.cs 中注册处理程序
- 创建你的第一个忙碌指示器
- 基本的 XAML 和 C# 实现
动画类型
📄 阅读:references/animation-types.md
**何时阅读:**选择视觉样式、实现特定动画类型
你将了解:
- 全部 7 种内置动画类型及示例
- CircularMaterial(Android Material Design 风格)
- LinearMaterial(水平进度条风格)
- Cupertino(iOS 风格的旋转指示器)
- SingleCircle、DoubleCircle(同心圆动画)
- Globe(3D 地球旋转效果)
- HorizontalPulsingBox(脉动方框动画)
- 视觉对比和使用场景
自定义
📄 阅读:references/customization.md
**何时阅读:**设置指示器样式、调整颜色/大小、设置动画速度
你将了解:
- 自定义指示器颜色(IndicatorColor)
- 设置覆盖层背景样式(OverlayFill)
- 使用 Brush 类型设置渐变背景
- 控制动画时长(DurationFactor:0-1)
- 设置指示器大小(SizeFactor:0-1)
- 完整的样式示例
标题配置
📄 阅读:references/title-configuration.md
**何时阅读:**添加文本标签、自定义字体、设置标题位置
你将了解:
- 设置标题文本(Title 属性)
- 自定义文本颜色(TextColor)
- 设置标题位置(Top、Bottom、None)
- 控制间距(TitleSpacing)
- 自定义字体(大小、属性、字体系列)
- 自动缩放支持
控制动画状态
📄 阅读:references/controlling-state.md
**何时阅读:**启动/停止动画、管理可见性、动态控制
你将了解:
- IsRunning 属性的用法
- 启动和停止动画
- 默认行为(false)
- 绑定到 ViewModel 属性
- 基于事件的状态管理
评论
支持 Markdown