Browse Source

refactor(pairing): 重构配对页面布局结构

将配对页面的主要内容拆分为固定顶部区域和可滚动内容区域,提高代码可维护性
同时优化翻译模式选择器的位置计算逻辑
newdev_shunjiawei
lxm 1 year ago
parent
commit
a764117e2f
  1. 84
      lib/modules/pairing/views/pairing_view.dart
  2. 7
      lib/modules/translation/controllers/translation_controller.dart
  3. 12
      lib/modules/translation/views/dialogs/translation_mode_selector.dart

84
lib/modules/pairing/views/pairing_view.dart

@ -72,56 +72,60 @@ class _PairingViewState extends State<PairingView>
return Scaffold(
backgroundColor: isDarkMode ? Colors.black : Colors.white,
body: SafeArea(
child: _buildMainContent(isDarkMode),
child: Column(
children: [
// 固定顶部区域 - 不受下方内容影响
_buildFixedTopSection(isDarkMode),
// 可滚动的动态内容区域
Expanded(
child: _buildDynamicContentSection(isDarkMode),
),
],
),
),
// bottomNavigationBar: Opacity(
// opacity: 0.5,
// child: const CommonBottomNav(currentIndex: 0),
// ),
);
}
// 主要内容
Widget _buildMainContent(bool isDarkMode) {
return Container(
width: double.infinity,
height: MediaQuery.of(Get.context!).size.height,
padding: EdgeInsets.symmetric(horizontal: 24.w),
// 添加SingleChildScrollView以防止溢出
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight:
MediaQuery.of(Get.context!).size.height - 100.h, // 减去底部导航和状态栏高度
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: 20.h), // 顶部间距
// 标题部分
_buildHeader(isDarkMode),
SizedBox(height: 20.h),
// 固定顶部区域
Widget _buildFixedTopSection(bool isDarkMode) {
return Padding(
padding: EdgeInsets.only(top: 60.h, left: 24.w, right: 24.w),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 标题部分
_buildHeader(isDarkMode),
SizedBox(height: 20.h),
// 设备动画 - 根据状态显示不同动画
_buildDeviceAnimation(isDarkMode),
_buildDeviceAnimation(isDarkMode),
],
),
);
}
SizedBox(height: 20.h),
// 动态内容区域
Widget _buildDynamicContentSection(bool isDarkMode) {
return SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 24.w),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: 30.h),
// 状态信息
_buildStatusInfo(isDarkMode),
// 状态信息
_buildStatusInfo(isDarkMode),
SizedBox(height: 40.h),
SizedBox(height: 40.h),
// 底部按钮
_buildActionButtons(isDarkMode),
// 底部按钮
_buildActionButtons(isDarkMode),
SizedBox(height: 20.h),
],
),
SizedBox(height: 20.h),
],
),
),
);

7
lib/modules/translation/controllers/translation_controller.dart

@ -288,14 +288,13 @@ class TranslationController extends GetxController with WidgetsBindingObserver {
WidgetsBinding.instance.addObserver(this);
// 延迟显示模式选择器,确保页面已经完全加载
// Future.delayed(const Duration(milliseconds: 100), () {
// _showModeSelector();
// });
//确保关键服务初始化完成
WidgetsBinding.instance.addPostFrameCallback((_) async {
// 确保上下文有效
if (Get.context == null || !Get.context!.mounted) return;
// Future.delayed(const Duration(milliseconds: 200), () {
_showModeSelector();
// });
});
}

12
lib/modules/translation/views/dialogs/translation_mode_selector.dart

@ -14,12 +14,14 @@ class TranslationModeSelector {
// 总是从悬浮按钮位置展开,不依赖传入的anchor参数
final Size screenSize = MediaQuery.of(Get.context!).size;
final Offset floatingButtonPos = controller.floatingButtonPosition.value;
// 计算悬浮按钮的中心点位置(从右下角偏移转换为屏幕坐标)
final double buttonSize = 56.0; // 悬浮按钮的大小
final double buttonCenterX = screenSize.width - floatingButtonPos.dx - buttonSize / 2;
final double buttonCenterY = screenSize.height - floatingButtonPos.dy - buttonSize / 2;
final double buttonSize = 56.0.w; // 悬浮按钮的大小
final double buttonCenterX =
screenSize.width - floatingButtonPos.dx - buttonSize / 2;
final double buttonCenterY =
screenSize.height - floatingButtonPos.dy - buttonSize / 2;
// 计算缩放对齐点(-1..1)
final double ax = (buttonCenterX / screenSize.width) * 2 - 1;
final double ay = (buttonCenterY / screenSize.height) * 2 - 1;

Loading…
Cancel
Save