You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.4 KiB
102 lines
3.4 KiB
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:get/get.dart';
|
|
import '../../../core/theme/app_colors.dart';
|
|
import '../controllers/usage_controller.dart';
|
|
|
|
class UsageView extends GetView<UsageController> {
|
|
const UsageView({super.key});
|
|
|
|
// 1. 将导航栏配置提取为常量，提高可维护性
|
|
static const _navItems = [
|
|
_NavItem(Icons.chat_bubble_outline, 'AI chat'),
|
|
_NavItem(Icons.translate, 'interpretation'),
|
|
_NavItem(Icons.people, 'meeting'),
|
|
];
|
|
|
|
// 2. 颜色配置集中管理
|
|
Color _getBgColor(bool isDark) =>
|
|
isDark ? Colors.black : const Color(0xFFF9FAFB);
|
|
Color _getUnselectedColor(bool isDark) =>
|
|
isDark ? Colors.grey[500]! : const Color(0xFF6B7280);
|
|
Color _getSelectedColor(bool isDark) =>
|
|
isDark ? Colors.blue[200]! : const Color(0xFF3B82F6);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isDarkMode = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return Scaffold(
|
|
backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.grey[50],
|
|
body: PageView(
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
controller: controller.pageController,
|
|
children: controller.pageList,
|
|
),
|
|
bottomNavigationBar: Obx(
|
|
() {
|
|
final currentIndex = controller.pageIndex.value;
|
|
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
border: Border(
|
|
top: BorderSide(
|
|
color: isDarkMode ? Colors.grey[800]! : Colors.grey[200]!,
|
|
width: 0.5,
|
|
)),
|
|
),
|
|
// 3. 添加安全区域适配（针对刘海屏）
|
|
child: BottomNavigationBar(
|
|
// 4. 使用生成的导航项
|
|
items: _navItems
|
|
.map((item) => BottomNavigationBarItem(
|
|
icon: Icon(item.icon),
|
|
activeIcon: Icon(item.icon,
|
|
color: _getSelectedColor(isDarkMode)), // 5. 激活态图标
|
|
label: item.label.tr, // 统一处理国际化
|
|
))
|
|
.toList(),
|
|
|
|
backgroundColor: _getBgColor(isDarkMode),
|
|
currentIndex: currentIndex,
|
|
unselectedItemColor: _getUnselectedColor(isDarkMode),
|
|
selectedItemColor: _getSelectedColor(isDarkMode),
|
|
unselectedFontSize: 10.sp,
|
|
selectedFontSize: 10.sp,
|
|
|
|
// 6. 添加动画过渡效果
|
|
onTap: (index) => _onItemTapped(index, currentIndex),
|
|
|
|
type: BottomNavigationBarType.fixed,
|
|
// 7. 增加图标和文字的间距
|
|
iconSize: 22.w, // 响应式图标尺寸
|
|
selectedLabelStyle: TextStyle(height: 1.5), // 文字垂直间距
|
|
unselectedLabelStyle: TextStyle(height: 1.5),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
// 9. 抽离点击逻辑
|
|
void _onItemTapped(int index, int currentIndex) {
|
|
if (index == currentIndex) return;
|
|
|
|
// 10. 添加页面切换动画
|
|
controller.pageController.animateToPage(
|
|
index,
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeInOut,
|
|
);
|
|
controller.pageIndex.value = index;
|
|
}
|
|
}
|
|
|
|
// 11. 使用数据类管理导航项配置
|
|
class _NavItem {
|
|
final IconData icon;
|
|
final String label;
|
|
|
|
const _NavItem(this.icon, this.label);
|
|
}
|
|
|