feat(nav): 底部导航改为首页推荐追剧我的
This commit is contained in:
1 parent
ec3cb8f163
commit
91e869d589
34 files changed
+359
-263
No files matched your search
@@ -1,7 +1,5 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../theme/app_colors.dart';
|
||||
@@ -26,12 +24,12 @@ class AppBottomNavItem {
|
||||
final bool selected;
|
||||
}
|
||||
|
||||
/// 四槽底部导航:所有页面统一深色底与浅色图标。
|
||||
/// 四槽底部导航:纯黑背景,白色选中态,灰色未选中态。
|
||||
class AppBottomNav extends StatelessWidget {
|
||||
const AppBottomNav({
|
||||
super.key,
|
||||
required this.items,
|
||||
this.backgroundColor = AppColors.bar,
|
||||
this.backgroundColor = AppColors.navBackground,
|
||||
this.barKey,
|
||||
this.dark = false,
|
||||
});
|
||||
@@ -47,8 +45,10 @@ class AppBottomNav extends StatelessWidget {
|
||||
key: barKey,
|
||||
height: AppDimens.navHeight,
|
||||
decoration: BoxDecoration(
|
||||
color: dark ? AppColors.bar : backgroundColor.withValues(alpha: 0.96),
|
||||
border: const Border(top: BorderSide(color: AppColors.border)),
|
||||
color: dark ? AppColors.navBackground : backgroundColor,
|
||||
border: const Border(
|
||||
top: BorderSide(color: AppColors.navDivider, width: 0.5),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
@@ -60,17 +60,9 @@ class AppBottomNav extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
);
|
||||
if (dark) {
|
||||
return ColoredBox(
|
||||
color: AppColors.bar,
|
||||
child: SafeArea(top: false, child: bar),
|
||||
);
|
||||
}
|
||||
return ClipRect(
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||
child: SafeArea(top: false, child: bar),
|
||||
),
|
||||
return ColoredBox(
|
||||
color: AppColors.navBackground,
|
||||
child: SafeArea(top: false, child: bar),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -102,7 +94,9 @@ class _NavDestination extends StatelessWidget {
|
||||
child: Icon(
|
||||
item.selected ? item.selectedIcon : item.icon,
|
||||
size: AppDimens.navIcon,
|
||||
color: item.selected ? AppColors.blue : unselectedColor,
|
||||
color: item.selected
|
||||
? AppColors.navSelected
|
||||
: unselectedColor,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
@@ -112,8 +106,10 @@ class _NavDestination extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: AppDimens.navLabel,
|
||||
fontWeight: item.selected ? FontWeight.w700 : FontWeight.w500,
|
||||
color: item.selected ? AppColors.blue : unselectedColor,
|
||||
fontWeight: item.selected ? FontWeight.w600 : FontWeight.w400,
|
||||
color: item.selected
|
||||
? AppColors.navSelected
|
||||
: unselectedColor,
|
||||
letterSpacing: 0,
|
||||
),
|
||||
),
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../l10n/app_localizations.dart';
|
||||
|
||||
/// 客户端根导航的固定顺序。
|
||||
enum AppRootTab { home, recommend, following, mine }
|
||||
|
||||
extension AppRootTabUi on AppRootTab {
|
||||
Key get tabKey => switch (this) {
|
||||
AppRootTab.home => const Key('tab-home'),
|
||||
AppRootTab.recommend => const Key('tab-recommend'),
|
||||
AppRootTab.following => const Key('tab-follow'),
|
||||
AppRootTab.mine => const Key('tab-mine'),
|
||||
};
|
||||
|
||||
IconData get icon => switch (this) {
|
||||
AppRootTab.home => Icons.home_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.smart_display_rounded,
|
||||
AppRootTab.following => Icons.bookmark_rounded,
|
||||
AppRootTab.mine => Icons.person_rounded,
|
||||
};
|
||||
|
||||
String label(AppLocalizations l10n) => switch (this) {
|
||||
AppRootTab.home => l10n.homeTab,
|
||||
AppRootTab.recommend => l10n.recommendedTab,
|
||||
AppRootTab.following => l10n.followingTab,
|
||||
AppRootTab.mine => l10n.myTab,
|
||||
};
|
||||
}
|
||||
@@ -120,6 +120,7 @@ class AppSubpageHeader extends StatelessWidget {
|
||||
this.actions,
|
||||
this.onBack,
|
||||
this.dark = false,
|
||||
this.showBack = true,
|
||||
});
|
||||
|
||||
final String title;
|
||||
@@ -128,6 +129,7 @@ class AppSubpageHeader extends StatelessWidget {
|
||||
final Widget? actions;
|
||||
final VoidCallback? onBack;
|
||||
final bool dark;
|
||||
final bool showBack;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -140,8 +142,14 @@ class AppSubpageHeader extends StatelessWidget {
|
||||
padding: const EdgeInsets.symmetric(horizontal: _horizontal),
|
||||
child: Row(
|
||||
children: [
|
||||
AppSubpageBackButton(backKey: backKey, dark: dark, onBack: onBack),
|
||||
const SizedBox(width: _backGap),
|
||||
if (showBack) ...[
|
||||
AppSubpageBackButton(
|
||||
backKey: backKey,
|
||||
dark: dark,
|
||||
onBack: onBack,
|
||||
),
|
||||
const SizedBox(width: _backGap),
|
||||
],
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
|
||||
Reference in new issue
Block a user