feat: 优化
This commit is contained in:
@@ -6,6 +6,15 @@ 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});
|
||||
@@ -16,81 +25,75 @@ class MainPage extends StatefulWidget {
|
||||
|
||||
class _MainPageState extends State<MainPage> {
|
||||
int _currentIndex = 0;
|
||||
final Set<int> _loadedPages = {0};
|
||||
|
||||
final List<Widget> _pages = [
|
||||
const HomePage(),
|
||||
const MarketPage(),
|
||||
const TradePage(),
|
||||
const AssetPage(),
|
||||
const MinePage(),
|
||||
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()),
|
||||
];
|
||||
|
||||
final List<_TabItem> _tabs = [
|
||||
_TabItem('首页', LucideIcons.house, LucideIcons.house),
|
||||
_TabItem('行情', LucideIcons.trendingUp, LucideIcons.trendingUp),
|
||||
_TabItem('交易', LucideIcons.arrowLeftRight, LucideIcons.arrowLeftRight),
|
||||
_TabItem('资产', LucideIcons.wallet, LucideIcons.wallet),
|
||||
_TabItem('我的', LucideIcons.user, LucideIcons.user),
|
||||
];
|
||||
void _onTabChanged(int index) {
|
||||
setState(() {
|
||||
_currentIndex = index;
|
||||
_loadedPages.add(index);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = ShadTheme.of(context);
|
||||
|
||||
return Scaffold(
|
||||
body: IndexedStack(
|
||||
body: LazyIndexedStack(
|
||||
index: _currentIndex,
|
||||
children: _pages,
|
||||
loadedIndexes: _loadedPages,
|
||||
children: _navItems.map((item) => item.page).toList(),
|
||||
),
|
||||
bottomNavigationBar: 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: _tabs.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
final tab = entry.value;
|
||||
final isSelected = index == _currentIndex;
|
||||
bottomNavigationBar: _BottomNavBar(
|
||||
items: _navItems,
|
||||
currentIndex: _currentIndex,
|
||||
onTap: _onTabChanged,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () => setState(() => _currentIndex = index),
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
tab.icon,
|
||||
color: isSelected
|
||||
? theme.colorScheme.primary
|
||||
: theme.colorScheme.mutedForeground,
|
||||
size: 24,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
tab.label,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: isSelected
|
||||
? theme.colorScheme.primary
|
||||
: theme.colorScheme.mutedForeground,
|
||||
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
/// 底部导航栏
|
||||
class _BottomNavBar extends StatelessWidget {
|
||||
final List<_NavItem> items;
|
||||
final int currentIndex;
|
||||
final ValueChanged<int> 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(),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -98,40 +101,79 @@ class _MainPageState extends State<MainPage> {
|
||||
}
|
||||
}
|
||||
|
||||
class _TabItem {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final IconData selectedIcon;
|
||||
/// 导航项组件
|
||||
class _NavItemWidget extends StatelessWidget {
|
||||
final _NavItem item;
|
||||
final bool isSelected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
_TabItem(this.label, this.icon, this.selectedIcon);
|
||||
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 IndexedStack extends StatefulWidget {
|
||||
/// 懒加载 IndexedStack - 只渲染已访问过的页面
|
||||
class LazyIndexedStack extends StatefulWidget {
|
||||
final int index;
|
||||
final Set<int> loadedIndexes;
|
||||
final List<Widget> children;
|
||||
|
||||
const IndexedStack({
|
||||
const LazyIndexedStack({
|
||||
super.key,
|
||||
required this.index,
|
||||
required this.loadedIndexes,
|
||||
required this.children,
|
||||
});
|
||||
|
||||
@override
|
||||
State<IndexedStack> createState() => _IndexedStackState();
|
||||
State<LazyIndexedStack> createState() => _LazyIndexedStackState();
|
||||
}
|
||||
|
||||
class _IndexedStackState extends State<IndexedStack> {
|
||||
class _LazyIndexedStackState extends State<LazyIndexedStack> {
|
||||
@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: entry.key != widget.index,
|
||||
offstage: !isVisible,
|
||||
child: TickerMode(
|
||||
enabled: entry.key == widget.index,
|
||||
child: entry.value,
|
||||
enabled: isVisible,
|
||||
child: isLoaded ? entry.value : const SizedBox.shrink(),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user