import 'package:flutter/material.dart'; import 'package:shadcn_ui/shadcn_ui.dart'; import '../home/home_page.dart'; import '../market/market_page.dart'; import '../trade/trade_page.dart'; import '../asset/asset_page.dart'; import '../mine/mine_page.dart'; /// 底部导航项 class _NavItem { final String label; final IconData icon; final Widget page; const _NavItem({required this.label, required this.icon, required this.page}); } /// 主页面(使用 shadcn_ui 风格) class MainPage extends StatefulWidget { const MainPage({super.key}); @override State createState() => _MainPageState(); } class _MainPageState extends State { int _currentIndex = 0; final Set _loadedPages = {0}; static const _navItems = [ _NavItem(label: '首页', icon: LucideIcons.house, page: HomePage()), _NavItem(label: '行情', icon: LucideIcons.trendingUp, page: MarketPage()), _NavItem(label: '交易', icon: LucideIcons.arrowLeftRight, page: TradePage()), _NavItem(label: '资产', icon: LucideIcons.wallet, page: AssetPage()), _NavItem(label: '我的', icon: LucideIcons.user, page: MinePage()), ]; void _onTabChanged(int index) { setState(() { _currentIndex = index; _loadedPages.add(index); }); } @override Widget build(BuildContext context) { final theme = ShadTheme.of(context); return Scaffold( body: LazyIndexedStack( index: _currentIndex, loadedIndexes: _loadedPages, children: _navItems.map((item) => item.page).toList(), ), bottomNavigationBar: _BottomNavBar( items: _navItems, currentIndex: _currentIndex, onTap: _onTabChanged, ), ); } } /// 底部导航栏 class _BottomNavBar extends StatelessWidget { final List<_NavItem> items; final int currentIndex; final ValueChanged onTap; const _BottomNavBar({ required this.items, required this.currentIndex, required this.onTap, }); @override Widget build(BuildContext context) { final theme = ShadTheme.of(context); return Container( decoration: BoxDecoration( color: theme.colorScheme.background, border: Border(top: BorderSide(color: theme.colorScheme.border)), ), child: SafeArea( child: Padding( padding: const EdgeInsets.symmetric(vertical: 8), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: items.asMap().entries.map((entry) { return _NavItemWidget( item: entry.value, isSelected: entry.key == currentIndex, onTap: () => onTap(entry.key), ); }).toList(), ), ), ), ); } } /// 导航项组件 class _NavItemWidget extends StatelessWidget { final _NavItem item; final bool isSelected; final VoidCallback onTap; const _NavItemWidget({ required this.item, required this.isSelected, required this.onTap, }); @override Widget build(BuildContext context) { final theme = ShadTheme.of(context); final color = isSelected ? theme.colorScheme.primary : theme.colorScheme.mutedForeground; return GestureDetector( onTap: onTap, behavior: HitTestBehavior.opaque, child: Container( padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: Column( mainAxisSize: MainAxisSize.min, children: [ Icon(item.icon, color: color, size: 24), const SizedBox(height: 4), Text( item.label, style: TextStyle( fontSize: 12, color: color, fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal, ), ), ], ), ), ); } } /// 懒加载 IndexedStack - 只渲染已访问过的页面 class LazyIndexedStack extends StatefulWidget { final int index; final Set loadedIndexes; final List children; const LazyIndexedStack({ super.key, required this.index, required this.loadedIndexes, required this.children, }); @override State createState() => _LazyIndexedStackState(); } class _LazyIndexedStackState extends State { @override Widget build(BuildContext context) { return Stack( children: widget.children.asMap().entries.map((entry) { final isVisible = entry.key == widget.index; final isLoaded = widget.loadedIndexes.contains(entry.key); return Positioned.fill( child: Offstage( offstage: !isVisible, child: TickerMode( enabled: isVisible, child: isLoaded ? entry.value : const SizedBox.shrink(), ), ), ); }).toList(), ); } }