SuperAPI AI 工具集

shimmer-skeleton-loaders

前端与建站

查看项目

更新于 10-17 16:16

技能介绍

用途:这个方案用于 Android Jetpack Compose 界面在数据加载期间展示闪烁占位符(shimmer)和骨架屏(skeleton),以模拟真实列表行的形状与布局,避免加载完成时页面跳动。

主要能力:核心只是一个 Modifier.shimmer() 修饰符,它自行测量所在 Box 的尺寸,调用方无需传入宽高,只需给占位 Box 指定宽、高、形状并在末尾接上 shimmer。骨架屏本身也是普通布局:按真实行将要占据的尺寸手工堆叠 Box,并套用与真实内容相同的列表形状,不依赖框架或第三方库。

使用方式:示例代码展示 shimmer 通过 composed {} 按使用处实例化,持有自己的 rememberInfiniteTransition,用 onGloballyPositioned 记录自身尺寸,再用 Brush.linearGradient 绘制从 -2×宽度 到 +2×宽度 的扫描动画;动画时长由 tween(1000) 与 infiniteRepeatable 控制。注意事项包括:clip 应写在 background 之前,否则底色会呈方形;首个组合帧尺寸为零、渐变退化,所以每个调用处都要先画一层纯色底以保证首帧可见;每个占位 Box 的动画彼此独立、不同步,若需要整行一致的波纹,应上提单一 transition 并向下传递相位;扫描带在每个周期约一半时间位于盒外,形成平坦停顿,若想要连续波纹应缩小移动范围而不是加快补间;渐变角度随盒子宽高比呈对角变化,若需统一角度应固定终点 y;骨架内所有惰性列表应设置 userScrollEnabled = false,因为占位行数量是虚构的、没有可滚动内容,且滚动偏移在真实列表替换后会被丢弃;占位尺寸应从真实行读取缩略图尺寸、文本行高与内边距,而不是目测,否则加载完成时会出现可见位移;shimmer 的底色与高光线应放在自有的不可变颜色持有器中并通过 composition local 提供明暗两套,避免在每个调用处判断 isDark。

验证方式:从仓库根目录对骨架文件和修饰符文件运行 grep:列出 clip( 与 background( 的行号逐盒比较顺序;统计 LazyColumn/LazyRow 与 userScrollEnabled = false 出现次数是否一致;在修饰符文件中核对 composed {、onGloballyPositioned 写入以及 size.width 的读取位置;并在同一滚动位置分别截图骨架屏与加载后界面来回切换,任何位移都说明占位尺寸是目测得出的。

适用场景与限制:适用于使用 Kotlin 与 Jetpack Compose 的 Android 界面,在列表加载时以骨架占位替代空白或转圈。资料未提供具体平台版本、安装命令、依赖坐标、性能数据或收费信息,这些内容暂未提供。