import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../constants/app_constants.dart'; import '../views/home/home_page.dart'; import '../views/discover_page.dart'; import '../views/favorites_page.dart'; import '../views/profile/profile_page.dart'; import '../services/get/main_navigation_controller.dart'; import '../services/get/profile_controller.dart'; import '../services/get/theme_controller.dart'; import '../services/get/tap_liquid_glass_controller.dart'; import 'tap-liquid-glass.dart'; /// 时间: 2025-03-21 /// 功能: 主导航页面,包含底部导航栏和4个主要页面 /// 介绍: 这是应用的主要导航容器,提供底部导航栏来切换主页、发现、收藏和个人页面 /// 最新变化: 使用 Stack 布局实现 Tap 沉浸光感液态玻璃导航栏悬浮效果 class MainNavigation extends StatelessWidget { const MainNavigation({super.key}); @override Widget build(BuildContext context) { // 初始化导航控制器(只初始化一次) Get.lazyPut(() => MainNavigationController()); Get.lazyPut(() => TapLiquidGlassController()); final controller = Get.find(); final themeController = Get.find(); final glassController = Get.find(); final List pages = [ HomePage(), const DiscoverPage(), const FavoritesPage(), const ProfilePage(), ]; final List bottomNavItems = [ const BottomNavigationBarItem( icon: Icon(Icons.home), activeIcon: Icon(Icons.home, color: AppConstants.primaryColor), label: '主页', ), const BottomNavigationBarItem( icon: Icon(Icons.explore), activeIcon: Icon(Icons.explore, color: AppConstants.primaryColor), label: '发现', ), const BottomNavigationBarItem( icon: Icon(Icons.favorite_border), activeIcon: Icon(Icons.favorite, color: AppConstants.primaryColor), label: '收藏', ), const BottomNavigationBarItem( icon: Icon(Icons.person_outline), activeIcon: Icon(Icons.person, color: AppConstants.primaryColor), label: '个人', ), ]; return Obx(() { final isDark = themeController.isDarkMode; final useGlass = glassController.isEnabled; return Scaffold( body: useGlass ? _buildGlassBody(controller, pages) : _buildClassicBody(controller, pages, isDark, bottomNavItems), ); }); } /// 构建液态玻璃导航栏主体 /// 使用 Stack 布局,让导航栏悬浮在页面内容上方 Widget _buildGlassBody( MainNavigationController controller, List pages, ) { return Stack( children: [ // 页面内容 - 延伸到屏幕底部 IndexedStack( index: controller.currentIndex.value, children: pages, ), // 悬浮的液态玻璃导航栏 Positioned( left: 0, right: 0, bottom: 0, child: TapLiquidGlassNavigation( currentIndex: controller.currentIndex.value, onTap: (index) { controller.switchPage(index); if (index == 3) { final profileController = Get.find(); profileController.onInit(); } }, ), ), ], ); } /// 构建经典导航栏主体 Widget _buildClassicBody( MainNavigationController controller, List pages, bool isDark, List items, ) { return Column( children: [ // 页面内容 Expanded( child: IndexedStack( index: controller.currentIndex.value, children: pages, ), ), // 经典底部导航栏 Container( decoration: BoxDecoration( color: isDark ? const Color(0xFF2A2A2A) : Colors.white, boxShadow: [ BoxShadow( color: Colors.black.withValues(alpha: isDark ? 0.3 : 0.1), blurRadius: 8, offset: const Offset(0, -2), ), ], ), child: SafeArea( top: false, child: BottomNavigationBar( currentIndex: controller.currentIndex.value, onTap: (index) { controller.switchPage(index); if (index == 3) { final profileController = Get.find(); profileController.onInit(); } }, type: BottomNavigationBarType.fixed, selectedItemColor: AppConstants.primaryColor, unselectedItemColor: isDark ? Colors.grey[400] : Colors.grey[600], backgroundColor: isDark ? const Color(0xFF2A2A2A) : Colors.white, elevation: 0, items: items, selectedFontSize: 12, unselectedFontSize: 12, ), ), ), ], ); } }