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

星降

发布时间：2025-12-27 08:39:07

761人浏览过

来源于php中文网

原创

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

maui怎么实现shimmer加载效果 maui骨架屏教程

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 的矩形“擦出”高亮区域

关键代码片段（简化）：

Live PPT

一款AI智能化生成演示内容的在线工具。只需输入一句话、粘贴一段内容、或者导入文件，AI生成高质量PPT。

下载

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。

.NET 8有哪些新特性？一份给开发者的全面功能解读

.NET开发者薪资水平报告：你在行业中处于什么位置？

C#进行机器学习开发有哪些工具？ML.NET框架入门与实例

Unity游戏开发：C#实现3D物理引擎与AI行为树

c#可以做哪些项目

相关标签:

ai microsoft .net 绝对定位重绘 canva 循环继承线程多线程 canvas microsoft

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Avalonia如何使用Fluent主题 Avalonia主题切换方法下一篇：ASP.NET Core怎么配置跨域CORS ASP.NET Core启用CORS方法

作者最新文章

一立方米水等于多少吨一立方米水是一吨吗

2026-01-16 17:09

哔哩轻小说搜索入口_全网轻小说资源

2026-01-16 17:09

一个抖音一号多少钱送一个抖音一号要1001块吗

2026-01-16 17:16

视力5.0是多少度视力5.0就是不近视吗

2026-01-16 17:20

交管12123驾驶证照片怎么上传 12123照片要求及上传步骤【教程】

2026-01-16 17:21

漫蛙manwa3最新入口_2026蛙漫3漫画在线看入口

2026-01-16 17:32

漫蛙3网页版登录入口_manwa漫蛙3官方防封地址

2026-01-16 17:32

红果短剧网页版页面入口红果短剧免费网页入口

2026-01-16 17:34

包子漫画永久回家入口包子漫画2026最新发布页入口

2026-01-16 17:38

包子漫画免会员入口包子漫画无限在线看入口

2026-01-16 17:39

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

线程和进程的区别

线程和进程的区别：线程是进程的一部分，用于实现并发和并行操作，而线程共享进程的资源，通信更方便快捷，切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

481

2023.08.10

Python 多线程与异步编程实战

本专题系统讲解 Python 多线程与异步编程的核心概念与实战技巧，包括 threading 模块基础、线程同步机制、GIL 原理、asyncio 异步任务管理、协程与事件循环、任务调度与异常处理。通过实战示例，帮助学习者掌握如何构建高性能、多任务并发的 Python 应用。

143

2025.12.24

html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容，可以阅读本专题下面的文章。

505

2023.10.23

vsd文件打开方法

vsd文件打开方法有使用Microsoft Visio软件、使用Microsoft Visio查看器、转换为其他格式等。想了解更多vsd文件相关内容，可以阅读本专题下面的文章。

480

2023.10.30

高德地图升级方法汇总

本专题整合了高德地图升级相关教程，阅读专题下面的文章了解更多详细内容。

2026.01.16

全民K歌得高分教程大全

本专题整合了全民K歌得高分技巧汇总，阅读专题下面的文章了解更多详细内容。

2026.01.16

C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法，包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程，以及常见代码质量问题的发现与修复。通过工程化示例，帮助开发者建立可测试、可维护、高质量的 C++ 项目体系。

2026.01.16