feat(home): 顶部导航随翻页联动并把推荐更名为精选

This commit is contained in:
Vicky authored and trae-solo-agent committed 2026-10-30 22:53:15 +08:00
1 parent 2f4593a46e
commit 335e5dc286
27 files changed
+1095 -214

No files matched your search

+71
View File
@@ -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,
),
),
),
);
}
+2 -2
View File
@@ -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,
};