fix(ui): 骨架屏扫光收窄压淡

This commit is contained in:
Zhou Weidong committed 2026-10-27 11:12:31 +08:00
1 parent a5dbae7fff
commit bd826a9236
2 files changed
+57 -36

No files matched your search

+34 -27
View File
@@ -12,7 +12,7 @@ const double _shimmerTravel = 2.4;
const double _shimmerStart = -1.2;
const double _subtitleWidthFactor = 0.62;
const double _shimmerPhaseStep = 0.13;
const Color _shimmerHighlight = Color(0x12FFFFFF);
const Color _shimmerHighlight = Color(0x0DFFFFFF);
/// 首页短剧网格的占位。行数至少铺满可视高度,并带一道扫光。
class DramaGridSkeleton extends StatefulWidget {
@@ -116,41 +116,48 @@ class _SkeletonCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final phase = (shimmerValue + index * _shimmerPhaseStep) % 1.0;
return ShaderMask(
blendMode: BlendMode.srcATop,
shaderCallback: (bounds) => _cardShader(bounds, phase),
child: Column(
key: Key('drama-grid-skeleton-$index'),
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AspectRatio(
aspectRatio: AppDimens.cardCoverAspectRatio,
child: const _SkeletonBlock(),
return Stack(
key: Key('drama-grid-skeleton-$index'),
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AspectRatio(
aspectRatio: AppDimens.cardCoverAspectRatio,
child: const _SkeletonBlock(),
),
const SizedBox(height: AppDimens.cardCoverTitleGap),
const _SkeletonBar(),
const SizedBox(height: AppDimens.skeletonTitleBarGap),
const FractionallySizedBox(
widthFactor: _subtitleWidthFactor,
child: _SkeletonBar(),
),
],
),
Positioned.fill(
child: IgnorePointer(
child: ClipRRect(
borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
child: DecoratedBox(
decoration: BoxDecoration(gradient: _cardHighlight(phase)),
),
),
),
const SizedBox(height: AppDimens.cardCoverTitleGap),
const _SkeletonBar(),
const SizedBox(height: AppDimens.skeletonTitleBarGap),
const FractionallySizedBox(
widthFactor: _subtitleWidthFactor,
child: _SkeletonBar(),
),
],
),
),
],
);
}
}
Shader _cardShader(Rect bounds, double shimmerValue) {
LinearGradient _cardHighlight(double shimmerValue) {
final shift = _shimmerStart + _shimmerTravel * shimmerValue;
return LinearGradient(
begin: Alignment(shift, -0.3),
end: Alignment(shift + 1, 0.3),
colors: const [
AppColors.skeletonSurface,
_shimmerHighlight,
AppColors.skeletonSurface,
],
).createShader(bounds);
colors: const [Colors.transparent, _shimmerHighlight, Colors.transparent],
stops: const [0.42, 0.5, 0.58],
);
}
class _SkeletonBlock extends StatelessWidget {