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

来源:这里教程网 时间:2026-02-21 17:35:44 作者:

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
裁剪

示例结构:

<Grid>
  <local:ShimmerView IsVisible="{Binding IsLoading}" />
  <StackLayout IsVisible="{Binding IsNotLoading}">
    <Label Text="{Binding Title}" />
    <Image Source="{Binding Avatar}" />
  </StackLayout>
</Grid>

4. 进阶优化建议

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

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

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

DispatcherQueue
任务或停掉
Timer

相关推荐