MAUI怎么实现Shimmer加载效果 MAUI骨架屏教程

MAUI需通过自定义控件+SkiaSharp+定时动画实现Shimmer效果：用线性渐变遮罩在灰色占位图上做平移模拟光扫，安装SkiaSharp.Views.Maui，重写OnPaintSurface绘制，用DispatcherQueue更新offsetX并重绘，XAML中绑定IsVisible控制显隐，注意卸载时释放动画资源。

MAUI 本身不内置 Shimmer（闪光/骨架屏）动画效果，但可以通过 自定义控件 + SkiaSharp 渲染 + 定时动画 实现接近原生的 Shimmer 加载效果。核心思路是：用渐变色遮罩在灰色占位图上做平移动画，模拟光线扫过的效果。

1. 安装必要 NuGet 包

在 MAUI 项目中安装以下两个基础包：

• SkiaSharp.Views.Maui（用于自定义绘制）
• Microsoft.Maui.Controls.Compatibility（非必需，仅当需旧版兼容时）

推荐使用最新稳定版 SkiaSharp（如 2.88.8 或更高），它已原生支持 .NET MAUI。

2. 创建 ShimmerView 自定义控件

新建一个类 ShimmerView.cs，继承 SkiaSharp.Views.Maui.SKCanvasView：

• 重写 OnPaintSurface 方法，用 SKShader.CreateLinearGradient 创建从左到右的透明-白-透明渐变
• 用 SKPaint.Shader 将渐变应用到矩形区域（即“光束”）
• 通过 DeviceTimer 或 DispatcherQueue 每 30~50ms 更新偏移量（offsetX），实现平滑右移
• 在 Canvas 上先画灰色背景（模拟骨架），再用带渐变 Shader 的矩形“擦出”高亮区域

关键代码片段（简化）：

private float offsetX = -200;
private void StartAnimation() => 
    DispatcherQueue.TryEnqueue(() => {
        offsetX += 8;
        if (offsetX > Width + 200) offsetX = -200;
        InvalidateSurface(); // 触发重绘
        StartAnimation(); // 递归调用（实际建议用 Timer 防卡顿）
    });

3. 在 XAML 中使用并控制显隐

将 ShimmerView 放进布局，配合数据加载状态切换：

• 用 IsVisible="{Binding IsLoading}" 控制显示/隐藏
• 建议包裹在 Grid 中，与真实内容层叠（ZIndex 或绝对定位）
• 可设置 HeightRequest 和 WidthRequest 匹配目标区域尺寸
• 支持圆角？加 CornerRadius 属性并在绘制时用 SKPath 裁剪

示例结构：

4. 进阶优化建议

让效果更自然、性能更稳：

• 用 SKImageFilter 做轻微模糊，避免光束边缘太硬
• 动画频率设为 60fps（间隔 ~16ms），但注意低端设备降帧
• 多个 Shimmer 区域？复用同一动画计时器，避免多线程开销
• 深色模式适配：骨架色改用 Colors.Grey.MultiplyAlpha(0.12) 动态计算
• 想免写底层？可用开源库 Sharpnado.MaterialFrame（含 ShimmerFrame）

基本上就这些。不复杂但容易忽略的是动画循环的资源释放——页面卸载时记得取消 DispatcherQueue 任务或停掉 Timer。