This commit is contained in:
commit
78a33cd4f1
49 files changed
+3525
-845
No files matched your search
@@ -153,6 +153,10 @@ abstract final class AppColors {
|
||||
/// 列表底部「没有更多了」这类弱提示。
|
||||
static const textHint = Color(0xFF5C5C60);
|
||||
static const textTabInactive = Color(0xFFB0B0B0);
|
||||
|
||||
/// 首页顶部三项导航未选中文字,略暗于选中白色但保持清晰。
|
||||
static const homeTabInactive = Color(0xFFC7C7CC);
|
||||
|
||||
static const textFilterIcon = Color(0xFF7A7A7E);
|
||||
static const searchResultMeta = Color(0xFF9E9E9E);
|
||||
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
// Author: fruit.com.cn
|
||||
// 职责:固定顶部导航文字排版,以绘制缩放和颜色插值实现选中切换。
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../theme/app_colors.dart';
|
||||
import '../theme/app_dimens.dart';
|
||||
|
||||
const double _inactiveScale = 0.9;
|
||||
|
||||
/// 保留最大字号、固定字重与占位,避免选中动画触发相邻标签重新布局。
|
||||
class AnimatedNavLabel extends StatelessWidget {
|
||||
/// [style] 指定选中态字号与颜色;字重固定,未指定时默认加粗。
|
||||
const AnimatedNavLabel({
|
||||
super.key,
|
||||
required this.label,
|
||||
required this.selected,
|
||||
required this.style,
|
||||
this.alignment = Alignment.bottomCenter,
|
||||
this.selectionProgress,
|
||||
this.inactiveColor = AppColors.textTabInactive,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final bool selected;
|
||||
final TextStyle style;
|
||||
final Alignment alignment;
|
||||
|
||||
/// 未选中文字颜色;默认保持通用导航原有灰色。
|
||||
final Color inactiveColor;
|
||||
|
||||
/// 页面拖动时直接使用连续进度,避免再叠加一层延迟动画。
|
||||
final double? selectionProgress;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final target = selected ? 1.0 : 0.0;
|
||||
final reduceMotion = MediaQuery.disableAnimationsOf(context);
|
||||
return Semantics(
|
||||
selected: selected,
|
||||
child: selectionProgress != null
|
||||
? _label(selectionProgress!.clamp(0.0, 1.0))
|
||||
: TweenAnimationBuilder<double>(
|
||||
tween: Tween(begin: target, end: target),
|
||||
duration: reduceMotion
|
||||
? Duration.zero
|
||||
: AppDimens.homePrimaryTabAnimationDuration,
|
||||
curve: Curves.easeOut,
|
||||
builder: (context, progress, _) => _label(progress),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _label(double progress) => Transform.scale(
|
||||
scale: _inactiveScale + (1 - _inactiveScale) * progress,
|
||||
alignment: alignment,
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
textAlign: TextAlign.left,
|
||||
style: style.copyWith(
|
||||
fontWeight: style.fontWeight ?? FontWeight.w700,
|
||||
letterSpacing: 0,
|
||||
color: Color.lerp(
|
||||
inactiveColor,
|
||||
style.color ?? AppColors.textPrimary,
|
||||
progress,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -25,14 +25,14 @@ extension AppRootTabUi on AppRootTab {
|
||||
|
||||
IconData get icon => switch (this) {
|
||||
AppRootTab.home => Icons.home_outlined,
|
||||
AppRootTab.recommend => Icons.celebration_outlined,
|
||||
AppRootTab.recommend => Icons.smart_display_outlined,
|
||||
AppRootTab.following => Icons.bookmark_border_rounded,
|
||||
AppRootTab.mine => Icons.person_outline_rounded,
|
||||
};
|
||||
|
||||
IconData get selectedIcon => switch (this) {
|
||||
AppRootTab.home => Icons.home_rounded,
|
||||
AppRootTab.recommend => Icons.celebration_rounded,
|
||||
AppRootTab.recommend => Icons.smart_display_rounded,
|
||||
AppRootTab.following => Icons.bookmark_rounded,
|
||||
AppRootTab.mine => Icons.person_rounded,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
// Author: fruit.com.cn
|
||||
// 职责:给默认图片加载占位叠加可暂停、局部重绘的轻量扫光。
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
const _sweepDuration = Duration(milliseconds: 1400);
|
||||
const double _bandWidthRatio = 0.65;
|
||||
const _highlight = Color(0x12FFFFFF);
|
||||
const _clear = Color(0x00FFFFFF);
|
||||
|
||||
/// 只用于等待真实图片的占位;减少动画或页面离屏时不运行扫光。
|
||||
class ImagePlaceholderShimmer extends StatefulWidget {
|
||||
/// 在 [child] 上方绘制不影响布局与点击区域的扫光。
|
||||
const ImagePlaceholderShimmer({super.key, required this.child});
|
||||
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
State<ImagePlaceholderShimmer> createState() =>
|
||||
_ImagePlaceholderShimmerState();
|
||||
}
|
||||
|
||||
class _ImagePlaceholderShimmerState extends State<ImagePlaceholderShimmer>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late final AnimationController _controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: _sweepDuration,
|
||||
);
|
||||
bool _active = false;
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
_active =
|
||||
TickerMode.valuesOf(context).enabled &&
|
||||
!MediaQuery.disableAnimationsOf(context);
|
||||
if (_active) {
|
||||
_controller.repeat();
|
||||
} else {
|
||||
_controller.stop();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (!_active) return widget.child;
|
||||
return RepaintBoundary(
|
||||
child: ClipRect(
|
||||
child: CustomPaint(
|
||||
foregroundPainter: _SweepPainter(_controller),
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _SweepPainter extends CustomPainter {
|
||||
_SweepPainter(this.progress) : super(repaint: progress);
|
||||
|
||||
final Animation<double> progress;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
if (size.isEmpty) return;
|
||||
final bandWidth = size.width * _bandWidthRatio;
|
||||
final left = -bandWidth + (size.width + bandWidth) * progress.value;
|
||||
final rect = Rect.fromLTWH(left, 0, bandWidth, size.height);
|
||||
final paint = Paint()
|
||||
..shader = const LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [_clear, _highlight, _clear],
|
||||
).createShader(rect);
|
||||
canvas.drawRect(rect, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant _SweepPainter oldDelegate) =>
|
||||
oldDelegate.progress != progress;
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
|
||||
|
||||
import '../config/app_config.dart';
|
||||
import '../theme/app_colors.dart';
|
||||
import 'image_placeholder_shimmer.dart';
|
||||
|
||||
const int _minImageDecodePixels = 96;
|
||||
const int _maxImageDecodePixels = 2048;
|
||||
@@ -102,13 +103,19 @@ class RemoteImage extends StatelessWidget {
|
||||
errorBuilder: (_, _, _) => _fallback(brand: showFallbackIcon),
|
||||
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
|
||||
if (wasSynchronouslyLoaded || frame != null) return child;
|
||||
return _fallback(brand: showFallbackIcon);
|
||||
return _loadingFallback();
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _loadingFallback() {
|
||||
final custom = fallbackWidget;
|
||||
if (custom != null) return custom;
|
||||
return ImagePlaceholderShimmer(child: _fallback(brand: showFallbackIcon));
|
||||
}
|
||||
|
||||
Widget _fallback({required bool brand}) {
|
||||
final custom = fallbackWidget;
|
||||
if (custom != null) return custom;
|
||||
|
||||
Reference in new issue
Block a user