feat(home): 顶部导航随翻页联动并把推荐更名为精选
This commit is contained in:
1 parent
2f4593a46e
commit
335e5dc286
27 files changed
+1095
-214
No files matched your search
@@ -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,
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user