mcpField
S
syncfusion-maui-busy-indicator

syncfusion-maui-busy-indicator

github.com/syncfusion开发61211 次安装2 周前更新
代码仓库

关于 syncfusion-maui-busy-indicator

这项技能面向在应用中添加加载和处理反馈的开发者,介绍如何实现 Syncfusion 的 .NET MAUI Busy Indicator。内容涵盖动画类型、样式、标题、遮罩及程序化状态控制。

主要功能

  1. 01七种内置动画类型
  2. 02自定义颜色、尺寸和速度
  3. 03配置标题与字体
  4. 04程序化控制动画
  5. 05可选背景遮罩

适用场景

  1. 01数据获取时显示加载状态
  2. 02文件上传时提示处理进度
  3. 03处理期间阻止用户交互
  4. 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.md
controlling-state.md
customization.md
getting-started.md
title-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