feat(home): 使用胶片盘图片导航图标
This commit is contained in:
1 parent
c24518c1a4
commit
f47e4dd298
6 files changed
+132
-47
No files matched your search
@@ -14,11 +14,13 @@ class AppBottomNavItem {
|
||||
required this.label,
|
||||
required this.onTap,
|
||||
this.selected = false,
|
||||
this.assetPath,
|
||||
});
|
||||
|
||||
final Key tabKey;
|
||||
final IconData icon;
|
||||
final IconData selectedIcon;
|
||||
final String? assetPath;
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
final bool selected;
|
||||
@@ -61,49 +63,66 @@ class _NavDestination extends StatelessWidget {
|
||||
final Color unselectedColor;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => Expanded(
|
||||
child: Semantics(
|
||||
button: true,
|
||||
selected: item.selected,
|
||||
label: item.label,
|
||||
child: InkWell(
|
||||
key: item.tabKey,
|
||||
onTap: item.onTap,
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: AppDimens.navHeight),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
AnimatedScale(
|
||||
duration: const Duration(milliseconds: 160),
|
||||
curve: Curves.easeOut,
|
||||
scale: item.selected ? 1 : 0.96,
|
||||
child: Icon(
|
||||
item.selected ? item.selectedIcon : item.icon,
|
||||
size: AppDimens.navIcon,
|
||||
color: item.selected
|
||||
? AppColors.navSelected
|
||||
: unselectedColor,
|
||||
Widget build(BuildContext context) {
|
||||
final color = item.selected ? AppColors.navSelected : unselectedColor;
|
||||
final fallbackIcon = item.selected ? item.selectedIcon : item.icon;
|
||||
return Expanded(
|
||||
child: Semantics(
|
||||
button: true,
|
||||
selected: item.selected,
|
||||
label: item.label,
|
||||
child: InkWell(
|
||||
key: item.tabKey,
|
||||
onTap: item.onTap,
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: AppDimens.navHeight),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
AnimatedScale(
|
||||
duration: const Duration(milliseconds: 160),
|
||||
curve: Curves.easeOut,
|
||||
scale: item.selected ? 1 : 0.96,
|
||||
child: item.assetPath == null
|
||||
? Icon(
|
||||
fallbackIcon,
|
||||
size: AppDimens.navIcon,
|
||||
color: color,
|
||||
)
|
||||
: ColorFiltered(
|
||||
colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
|
||||
child: Image.asset(
|
||||
item.assetPath!,
|
||||
width: AppDimens.navIcon,
|
||||
height: AppDimens.navIcon,
|
||||
fit: BoxFit.contain,
|
||||
errorBuilder: (_, _, _) => Icon(
|
||||
item.icon,
|
||||
size: AppDimens.navIcon,
|
||||
color: color,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.navLabelGap),
|
||||
Text(
|
||||
item.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: AppDimens.navLabel,
|
||||
fontWeight: item.selected ? FontWeight.w600 : FontWeight.w400,
|
||||
color: item.selected
|
||||
? AppColors.navSelected
|
||||
: unselectedColor,
|
||||
letterSpacing: 0,
|
||||
const SizedBox(height: AppDimens.navLabelGap),
|
||||
Text(
|
||||
item.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: AppDimens.navLabel,
|
||||
fontWeight: item.selected
|
||||
? FontWeight.w600
|
||||
: FontWeight.w400,
|
||||
color: color,
|
||||
letterSpacing: 0,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,16 @@ import '../../l10n/app_localizations.dart';
|
||||
import 'app_bottom_nav.dart';
|
||||
|
||||
/// 客户端根导航的固定顺序。
|
||||
enum AppRootTab { home, recommend, following, mine }
|
||||
enum AppRootTab {
|
||||
home(assetPath: 'assets/icon/film_reel.png'),
|
||||
recommend(),
|
||||
following(),
|
||||
mine();
|
||||
|
||||
const AppRootTab({this.assetPath});
|
||||
|
||||
final String? assetPath;
|
||||
}
|
||||
|
||||
extension AppRootTabUi on AppRootTab {
|
||||
Key get tabKey => switch (this) {
|
||||
@@ -62,6 +71,7 @@ class AppRootBottomNav extends StatelessWidget {
|
||||
tabKey: tab.tabKey,
|
||||
icon: tab.icon,
|
||||
selectedIcon: tab.selectedIcon,
|
||||
assetPath: tab.assetPath,
|
||||
label: tab.label(l10n),
|
||||
selected: tab == selected,
|
||||
onTap: () => onSelected(tab),
|
||||
|
||||
Reference in new issue
Block a user