Browse Source

refactor(ui): 优化通话界面的布局和响应式设计

- 将通话覆盖层改为透明,仅保留底部控制栏的背景
- 使用响应式单位(w/h/sp)替换固定尺寸
- 调整按钮的阴影和边框使用响应式单位
newdev_shunjiawei
lxm 1 year ago
parent
commit
e0b68ce33c
  1. 44
      lib/modules/agent/views/agent_view.dart
  2. 2
      lib/modules/devices/views/devices_view.dart

44
lib/modules/agent/views/agent_view.dart

@ -899,20 +899,28 @@ class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
// 构建打电话模式覆盖层
Widget _buildPhoneCallOverlay(BuildContext context, bool isDarkMode) {
return Container(
color: isDarkMode ? Colors.black : Colors.white,
color: Colors.transparent, // 设置整个覆盖层为透明
child: SafeArea(
child: Column(
children: [
// 顶部标题栏
_buildPhoneCallHeader(isDarkMode),
// 顶部标题栏 - 保持背景
// Container(
// color: isDarkMode
// ? Colors.black.withOpacity(0.8)
// : Colors.white.withOpacity(0.8),
// child: _buildPhoneCallHeader(isDarkMode),
// ),
// 中间音频可视化区域
Expanded(
child: _buildPhoneCallVisualization(isDarkMode),
// 中间音频可视化区域 - 完全透明
const Expanded(
child: SizedBox(), // 空的占位符,完全透明
),
// 底部控制按钮
_buildPhoneCallControls(isDarkMode),
// 底部控制按钮 - 保持背景
Container(
color: isDarkMode ? Colors.black : Colors.white,
child: _buildPhoneCallControls(isDarkMode),
),
],
),
),
@ -1042,7 +1050,7 @@ class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
// 构建打电话模式控制按钮
Widget _buildPhoneCallControls(bool isDarkMode) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 24),
padding: EdgeInsets.symmetric(horizontal: 32.w, vertical: 24.h),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
@ -1068,8 +1076,8 @@ class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
// }
// },
child: Container(
width: 80,
height: 80,
width: 80.w,
height: 80.h,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isActive ? Colors.red : Colors.green,
@ -1077,15 +1085,15 @@ class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
BoxShadow(
color: (isActive ? Colors.red : Colors.green)
.withOpacity(0.3),
blurRadius: 12,
spreadRadius: 2,
blurRadius: 12.r,
spreadRadius: 2.r,
),
],
),
child: Icon(
isActive ? Icons.call_end : Icons.call,
color: Colors.white,
size: 36,
size: 36.sp,
),
),
);
@ -1115,20 +1123,20 @@ class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
return GestureDetector(
onTap: onTap,
child: Container(
width: 56,
height: 56,
width: 56.w,
height: 56.h,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: backgroundColor ??
(isDarkMode ? Colors.grey[800] : Colors.grey[200]),
border: isActive ? Border.all(color: Colors.blue, width: 2) : null,
border: isActive ? Border.all(color: Colors.blue, width: 2.w) : null,
),
child: Icon(
icon,
color: backgroundColor != null
? Colors.white
: (isDarkMode ? Colors.white : Colors.black),
size: 24,
size: 24.sp,
),
),
);

2
lib/modules/devices/views/devices_view.dart

@ -1,6 +1,6 @@
import 'dart:ui';
import 'package:deep_voice/modules/devices/controllers/devices_controller.dart';
import '/modules/devices/controllers/devices_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

Loading…
Cancel
Save