108 lines
3.3 KiB
Dart
108 lines
3.3 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:go_router/go_router.dart';
|
||
|
||
import '../utils/i10n.dart';
|
||
import '../utils/responsive.dart';
|
||
|
||
/// 底部导航栏（配合 [StatefulShellRoute] 使用）。
|
||
///
|
||
/// 五个 tab：首页、设备、门店、管理、我的。
|
||
class AppBottomNav extends StatelessWidget {
|
||
const AppBottomNav({super.key, required this.shell});
|
||
|
||
/// go_router 的导航壳。
|
||
final StatefulNavigationShell shell;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final t = AppLocalizations.of(context);
|
||
|
||
final railDestinations = <NavigationRailDestination>[
|
||
NavigationRailDestination(
|
||
icon: const Icon(Icons.home_outlined),
|
||
selectedIcon: const Icon(Icons.home),
|
||
label: Text(t.home),
|
||
),
|
||
NavigationRailDestination(
|
||
icon: const Icon(Icons.devices_outlined),
|
||
selectedIcon: const Icon(Icons.devices),
|
||
label: Text(t.devices),
|
||
),
|
||
NavigationRailDestination(
|
||
icon: const Icon(Icons.store_outlined),
|
||
selectedIcon: const Icon(Icons.store),
|
||
label: Text(t.stores),
|
||
),
|
||
NavigationRailDestination(
|
||
icon: const Icon(Icons.admin_panel_settings_outlined),
|
||
selectedIcon: const Icon(Icons.admin_panel_settings),
|
||
label: Text(t.admin),
|
||
),
|
||
NavigationRailDestination(
|
||
icon: const Icon(Icons.person_outline),
|
||
selectedIcon: const Icon(Icons.person),
|
||
label: Text(t.profile),
|
||
),
|
||
];
|
||
|
||
void onSelect(int index) => shell.goBranch(
|
||
index,
|
||
// 点击当前 tab 时回到该分支根路由。
|
||
initialLocation: index == shell.currentIndex,
|
||
);
|
||
|
||
// 横屏：改用左侧 NavigationRail，腾出底部 80dp 纵向空间。
|
||
if (context.responsive.isLandscape) {
|
||
return Scaffold(
|
||
body: Row(
|
||
children: [
|
||
NavigationRail(
|
||
selectedIndex: shell.currentIndex,
|
||
onDestinationSelected: onSelect,
|
||
labelType: NavigationRailLabelType.all,
|
||
destinations: railDestinations,
|
||
),
|
||
const VerticalDivider(width: 1, thickness: 1),
|
||
Expanded(child: shell),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
return Scaffold(
|
||
body: shell,
|
||
bottomNavigationBar: NavigationBar(
|
||
selectedIndex: shell.currentIndex,
|
||
onDestinationSelected: onSelect,
|
||
destinations: [
|
||
NavigationDestination(
|
||
icon: const Icon(Icons.home_outlined),
|
||
selectedIcon: const Icon(Icons.home),
|
||
label: t.home,
|
||
),
|
||
NavigationDestination(
|
||
icon: const Icon(Icons.devices_outlined),
|
||
selectedIcon: const Icon(Icons.devices),
|
||
label: t.devices,
|
||
),
|
||
NavigationDestination(
|
||
icon: const Icon(Icons.store_outlined),
|
||
selectedIcon: const Icon(Icons.store),
|
||
label: t.stores,
|
||
),
|
||
NavigationDestination(
|
||
icon: const Icon(Icons.admin_panel_settings_outlined),
|
||
selectedIcon: const Icon(Icons.admin_panel_settings),
|
||
label: t.admin,
|
||
),
|
||
NavigationDestination(
|
||
icon: const Icon(Icons.person_outline),
|
||
selectedIcon: const Icon(Icons.person),
|
||
label: t.profile,
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|