IOT/flutterApp
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

多角色的配置适配

Browse Source
This commit is contained in:
Songzex
2026-09-14 12:35:20 +08:00
parent 3547f80383
commit a1e01da241
11 changed files with 333 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
lib/features/main_container/presentation/main_wrapper.dart
View File

@@ -19,6 +19,7 @@ import 'package:maibu_satabot_v2/features/v2/device_list/presentation/float_bar/
import 'package:maibu_satabot_v2/features/v2/device_list/presentation/float_bar/cubit/float_bar_setting_cubit.dart';
import 'package:maibu_satabot_v2/core/di/injection.dart';
import 'package:maibu_satabot_v2/core/theme/AppTheme.dart';
import 'package:maibu_satabot_v2/core/app/app_user_cubit.dart';
class MainWrapper extends StatefulWidget {
const MainWrapper({super.key});
@@ -30,8 +31,6 @@ class MainWrapper extends StatefulWidget {
class _MainWrapperState extends State<MainWrapper> {
int _currentIndex = 0;
final PageController _pageController = PageController();
final List<GlobalKey> _tabKeys = [];
double? _circleLeft;
@override
void initState() {
@@ -39,22 +38,6 @@ class _MainWrapperState extends State<MainWrapper> {
// 🔥 确保 FloatBarSettingService 已初始化
GetIt.I<FloatBarSettingService>();
WidgetsBinding.instance.addPostFrameCallback((_) {
_updateCirclePosition();
});
}
void _updateCirclePosition() {
if (_tabKeys.isEmpty || _currentIndex >= _tabKeys.length) return;
final key = _tabKeys[_currentIndex];
final renderBox = key.currentContext?.findRenderObject() as RenderBox?;
if (renderBox != null) {
setState(() {
_circleLeft = renderBox.localToGlobal(Offset.zero).dx;
});
}
}
@override
@@ -68,52 +51,36 @@ class _MainWrapperState extends State<MainWrapper> {
_currentIndex = index;
});
_pageController.jumpToPage(index);
WidgetsBinding.instance.addPostFrameCallback((_) {
_updateCirclePosition();
});
}
IconData _getIconData(String iconName) {
/// Tab 图标：选中用 filled（实心），未选用 outlined（描边），对比更清晰
IconData _navIcon(String iconName, bool selected) {
switch (iconName) {
case 'home_rounded':
return Icons.home_rounded;
return selected ? Icons.home_rounded : Icons.home_outlined;
case 'grid_view_rounded':
return Icons.grid_view_rounded;
return selected ? Icons.grid_view_rounded : Icons.grid_view_outlined;
case 'devices_rounded':
return Icons.devices_rounded;
return selected ? Icons.devices_rounded : Icons.devices_outlined;
case 'auto_awesome_rounded':
return Icons.auto_awesome_rounded;
return selected
? Icons.auto_awesome_rounded
: Icons.auto_awesome_outlined;
case 'warning_amber_rounded':
return Icons.warning_amber_rounded;
return selected
? Icons.warning_amber_rounded
: Icons.warning_amber_outlined;
case 'assignment_rounded':
return Icons.assignment_rounded;
return selected ? Icons.assignment_rounded : Icons.assignment_outlined;
case 'post_add_rounded':
return Icons.post_add_rounded;
return selected ? Icons.post_add_rounded : Icons.post_add_outlined;
case 'person_rounded':
return Icons.person_rounded;
return selected ? Icons.person_rounded : Icons.person_outlined;
default:
return Icons.home_rounded;
return selected ? Icons.home_rounded : Icons.home_outlined;
}
}
double _getIndicatorPosition(int itemCount, int currentIndex) {
final screenWidth = MediaQuery.of(context).size.width;
final itemWidth = screenWidth / itemCount;
return currentIndex * itemWidth;
}
double _getCircularLeftPosition(int itemCount, int currentIndex) {
final screenWidth = MediaQuery.of(context).size.width;
final itemWidth = screenWidth / itemCount;
// 圆形应该在每个Tab项的中心
final tabCenterX = 12 + (currentIndex * itemWidth) + (itemWidth / 2);
final circularLeft = tabCenterX - 22; // 22 = 44/2，让圆形中心对齐Tab中心
// 边界限制
final maxLeft = screenWidth - 12 - 44;
return circularLeft.clamp(12.0, maxLeft);
}
Widget _buildCurrentPage(TabConfigItem tab) {
switch (tab.id) {
case 'home_v2':
@@ -147,6 +114,8 @@ class _MainWrapperState extends State<MainWrapper> {
@override
Widget build(BuildContext context) {
// 🔥 个人角色（roleKey == 'personal'）底部导航强制只显示「设备 + 我的」
final roleKey = context.watch<AppUserCubit>().state.user?.roleKey;
return BlocBuilder<TabConfigCubit, TabConfigState>(
builder: (context, state) {
if (state is! TabConfigLoaded) {
@@ -156,7 +125,7 @@ class _MainWrapperState extends State<MainWrapper> {
}
final config = state.config;
final enabledItems = config.enabledItems;
final enabledItems = config.navItemsForRole(roleKey);
if (enabledItems.isEmpty) {
return const Scaffold(body: Center(child: Text('请至少启用一个 Tab')));
@@ -166,19 +135,10 @@ class _MainWrapperState extends State<MainWrapper> {
_currentIndex = 0;
}
// 初始化 GlobalKey
if (_tabKeys.length != enabledItems.length) {
_tabKeys.clear();
for (int i = 0; i < enabledItems.length; i++) {
_tabKeys.add(GlobalKey());
}
WidgetsBinding.instance.addPostFrameCallback((_) {
_updateCirclePosition();
});
}
return Scaffold(
extendBody: false,
// 底部导航预留区（SafeArea 那条）与页面同色，消除突兀的底色带
backgroundColor: context.appColors.pageBackground,
body: Stack(
children: [
PageView(
@@ -205,102 +165,138 @@ class _MainWrapperState extends State<MainWrapper> {
),
],
),
bottomNavigationBar: Container(
decoration: BoxDecoration(
color: context.appColors.cardBackground,
),
child: SafeArea(
top: false,
bottomNavigationBar: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 16),
child: LayoutBuilder(
builder: (context, constraints) {
return Container(
margin: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 16,
),
padding: const EdgeInsets.symmetric(vertical: 2),
decoration: BoxDecoration(
color: context.appColors.cardBackground,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: context.appColors.divider,
width: 1,
),
boxShadow: [
BoxShadow(
color: context.appColors.cardShadow,
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Stack(
children: [
// 滑动圆形背景
if (_circleLeft != null)
AnimatedPositioned(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
left: _circleLeft! - 8, // 减去外层 margin + 向右偏移
top: 6,
child: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: context.appColors.divider,
shape: BoxShape.circle,
border: Border.all(
color: context.appColors.divider,
width: 1,
),
),
),
),
// Tab 项
Row(
children: enabledItems.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
final isSelected = _currentIndex == index;
final itemCount = enabledItems.length;
// Tab 较少时收缩整体宽度并居中，Tab 多时铺满可用宽度
const double preferredTabWidth = 84;
const double barPaddingH = 6;
final double maxBarWidth = constraints.maxWidth;
final double barWidth =
itemCount * preferredTabWidth < maxBarWidth
? itemCount * preferredTabWidth
: maxBarWidth;
final double tabWidth =
(barWidth - barPaddingH * 2) / itemCount;
// 选中高亮：包裹「图标 + 文字」的紧凑胶囊 chip
const double indicatorH = 46;
final double indicatorW =
tabWidth - 8 < 54 ? tabWidth - 8 : 54.0;
return Expanded(
key: _tabKeys[index],
child: InkWell(
onTap: () => _onTabChanged(index),
child: SizedBox(
height: 56,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
_getIconData(item.icon),
size: 24,
color: isSelected
? context.appColors.textPrimary
: context.appColors.textTertiary,
),
const SizedBox(height: 4),
Text(
item.name,
style: TextStyle(
fontSize: 11,
color: isSelected
? context.appColors.textPrimary
: context.appColors.textTertiary,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.w400,
),
),
],
// 用 Align + heightFactor 只水平居中，高度贴合内容；
// 切勿用 Center：它在底部栏有界高度约束下会撑满全屏，把 body 挤没
return Align(
alignment: Alignment.center,
heightFactor: 1.0,
child: Container(
width: barWidth,
padding: const EdgeInsets.symmetric(
horizontal: barPaddingH,
vertical: 2,
),
decoration: BoxDecoration(
color: context.appColors.cardBackground,
borderRadius: BorderRadius.circular(30),
border: Border.all(
color: context.appColors.divider,
width: 1,
),
boxShadow: [
BoxShadow(
color: context.appColors.cardShadow,
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
child: SizedBox(
height: 56,
child: Stack(
children: [
// 蓝色胶囊 chip：纯数学定位，居中包裹图标 + 文字
AnimatedPositioned(
duration: const Duration(milliseconds: 280),
curve: Curves.easeOutCubic,
left: _currentIndex * tabWidth +
(tabWidth - indicatorW) / 2,
top: (56 - indicatorH) / 2,
width: indicatorW,
height: indicatorH,
child: Container(
decoration: BoxDecoration(
color: context.appColors.primary.withOpacity(
0.12,
),
borderRadius: BorderRadius.circular(
indicatorH / 2,
),
),
),
);
}).toList(),
),
// Tab 项
Row(
children:
enabledItems.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
final isSelected = _currentIndex == index;
return Expanded(
child: InkWell(
borderRadius: BorderRadius.circular(
indicatorH / 2,
),
onTap: () => _onTabChanged(index),
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
AnimatedScale(
scale: isSelected ? 1.1 : 1.0,
duration: const Duration(
milliseconds: 200,
),
curve: Curves.easeOutBack,
child: Icon(
_navIcon(item.icon, isSelected),
size: 22,
color: isSelected
? context.appColors.primary
: context
.appColors.textTertiary,
),
),
const SizedBox(height: 2),
AnimatedDefaultTextStyle(
duration: const Duration(
milliseconds: 200,
),
style: TextStyle(
fontSize: 11,
height: 1.0,
color: isSelected
? context.appColors.primary
: context
.appColors.textTertiary,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.w400,
),
child: Text(item.name),
),
],
),
),
);
}).toList(),
),
],
),
],
),
),
);
},