feat: 改进聊天弹窗和遮罩层交互,优化状态管理和绘制逻辑

This commit is contained in:
2025-09-23 09:53:49 +08:00
parent b9ab384fde
commit 6523f8e512
2 changed files with 197 additions and 100 deletions

View File

@@ -1,46 +1,52 @@
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/rendering.dart';
/// 遮罩层icon 区域挖洞可交互
// 一个带洞的遮罩层点击洞外区域触发onTap事件
class HoleOverlay extends StatelessWidget {
final Offset iconPosition;
final double iconSize;
final VoidCallback? onTap;
final Widget? child;
const HoleOverlay({
super.key,
required this.iconPosition,
required this.iconSize,
this.onTap,
this.child,
});
@override
Widget build(BuildContext context) {
return Listener(
behavior: HitTestBehavior.translucent,
onPointerDown: (PointerDownEvent event) {
final RenderBox box = context.findRenderObject() as RenderBox;
final Offset local = box.globalToLocal(event.position);
final iconRect = Rect.fromLTWH(
iconPosition.dx,
iconPosition.dy,
iconSize,
iconSize,
);
if (!iconRect.contains(local)) {
// 遮罩区域,拦截并关闭弹窗
if (onTap != null) {
onTap!();
debugPrint('🔧 HoleOverlay build: iconPosition=$iconPosition, iconSize=$iconSize');
final holeRect = Rect.fromLTWH(
iconPosition.dx,
iconPosition.dy,
iconSize,
iconSize,
);
return CustomPaint(
painter: _HolePainter(
iconPosition: iconPosition,
iconSize: iconSize,
),
child: GestureDetector(
onTapDown: (details) {
final tapPosition = details.localPosition;
final isInHole = holeRect.contains(tapPosition);
debugPrint('🎯 HoleOverlay onTapDown: position=$tapPosition, holeRect=$holeRect, isInHole=$isInHole');
if (!isInHole) {
debugPrint('🔥 HoleOverlay: 点击洞外触发onTap');
onTap?.call();
} else {
debugPrint('🚫 HoleOverlay: 点击洞内不触发onTap');
}
}
// 如果点在icon区域什么都不做事件会传递到下层
},
child: CustomPaint(
size: Size.infinite,
painter: _HolePainter(
iconPosition: iconPosition,
iconSize: iconSize,
),
},
child: child,
behavior: HitTestBehavior.translucent,
),
);
}
@@ -50,31 +56,51 @@ class _HolePainter extends CustomPainter {
final Offset iconPosition;
final double iconSize;
_HolePainter({required this.iconPosition, required this.iconSize});
_HolePainter({
required this.iconPosition,
required this.iconSize,
});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.white.withOpacity(0.0)
..blendMode = BlendMode.srcOver;
// 画全屏遮罩
canvas.drawRect(Offset.zero & size, paint);
// 挖洞
final holeRect = Rect.fromLTWH(
iconPosition.dx,
iconPosition.dy,
iconSize,
iconSize,
);
final holePath = Path()..addOval(holeRect);
paint.blendMode = BlendMode.clear;
canvas.drawPath(holePath, paint);
debugPrint('🎨 HolePainter paint: size=$size, holeRect=$holeRect');
// 使用 saveLayer 确保混合模式正确
canvas.saveLayer(Offset.zero & size, Paint());
// 画半透明背景
final backgroundPaint = Paint()
..color = Colors.black.withOpacity(0.3);
canvas.drawRect(Offset.zero & size, backgroundPaint);
debugPrint('🔲 HolePainter paint: 绘制背景完成');
// 挖洞:使用 BlendMode.clear
final holePaint = Paint()
..blendMode = BlendMode.clear;
canvas.drawOval(holeRect, holePaint);
debugPrint('⭕ HolePainter paint: 挖洞完成holeRect=$holeRect');
canvas.restore();
// 调试:画红色边框显示洞的位置
final debugPaint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
canvas.drawOval(holeRect, debugPaint);
debugPrint('🔴 HolePainter paint: 绘制调试边框完成');
}
@override
bool shouldRepaint(covariant _HolePainter oldDelegate) {
return iconPosition != oldDelegate.iconPosition || iconSize != oldDelegate.iconSize;
return oldDelegate.iconPosition != iconPosition ||
oldDelegate.iconSize != iconSize;
}
}
}

View File

@@ -26,9 +26,9 @@ class ChatPopup extends StatefulWidget {
}
class _ChatPopupState extends State<ChatPopup> with SingleTickerProviderStateMixin {
OverlayEntry? _overlayEntry;
Offset _iconPosition = const Offset(10, 120);
final double _iconSizeDefault = 80.0;
bool _isShowingPopup = false;
late AnimationController _partScreenAnimationController;
@override
@@ -42,71 +42,47 @@ class _ChatPopupState extends State<ChatPopup> with SingleTickerProviderStateMix
@override
void dispose() {
_removeOverlay();
_partScreenAnimationController.dispose();
super.dispose();
}
void _openFullScreen() async {
final messageService = context.read<MessageService>();
_removeOverlay();
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ChangeNotifierProvider.value(
value: messageService, // 传递同一个单例实例
child: const FullScreenPage(),
),
),
);
}
void _insertOverlay() {
if (_overlayEntry != null) return;
_overlayEntry = OverlayEntry(
builder: (context) => _buildOverlayContent(),
);
Overlay.of(context).insert(_overlayEntry!);
if (_isShowingPopup) return;
setState(() {
_isShowingPopup = true;
});
_partScreenAnimationController.forward();
}
void _removeOverlay() {
if (_overlayEntry == null) return;
if (!_isShowingPopup) return;
_partScreenAnimationController.reverse().then((_) {
_overlayEntry?.remove();
_overlayEntry = null;
if (mounted) {
setState(() {
_isShowingPopup = false;
});
}
});
}
Widget _buildOverlayContent() {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider.value(
value: MessageService.instance,
child: Material(
color: Colors.transparent,
child: LayoutBuilder(
builder: (context, constraints) {
final position = _calculatePosition(constraints);
final double minHeight = constraints.maxHeight * 0.16;
final double maxHeight = constraints.maxHeight * 0.4;
final double chatWidth = constraints.maxWidth * 0.94;
return Stack(
children: [
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
// 1. 底层:弹窗内容(只有在显示时才渲染)
if (_isShowingPopup) ...[
_buildPopupBackground(),
Positioned(
left: position.left,
right: position.right,
bottom: position.bottom,
child: ChatWindowContent(
animationController: _partScreenAnimationController,
minHeight: minHeight,
maxHeight: maxHeight,
chatWidth: chatWidth,
),
),
_buildPopupContent(constraints),
],
);
},
),
// 2. 顶层FloatingIcon始终在最上层事件不被遮挡
_buildFloatingIcon(),
],
);
},
),
);
}
@@ -120,23 +96,125 @@ class _ChatPopupState extends State<ChatPopup> with SingleTickerProviderStateMix
messageService.abortReply();
messageService.initializeEmpty();
},
child: Container(
color: Colors.black.withOpacity(0.1),
),
child: SizedBox.expand()
),
);
}
Widget _buildPopupContent(BoxConstraints constraints) {
final position = _calculatePosition(constraints);
final double minHeight = constraints.maxHeight * 0.16;
final double maxHeight = constraints.maxHeight * 0.4;
final double chatWidth = constraints.maxWidth * 0.94;
return Positioned(
left: position.left,
right: position.right,
bottom: position.bottom,
child: ChatWindowContent(
animationController: _partScreenAnimationController,
minHeight: minHeight,
maxHeight: maxHeight,
chatWidth: chatWidth,
),
);
}
Widget _buildFloatingIcon() {
// 如果外部传入了 child优先使用它的属性
if (widget.child != null) {
return ChatFloatingIcon(
iconSize: widget.child!.iconSize ?? widget.iconSize ?? _iconSizeDefault,
icon: widget.child!.icon ?? widget.icon,
onTap: () async {
debugPrint('🖱️ FloatingIcon onTap triggered! (using child properties)');
// 先执行外部传入的 onTap如果有
if (widget.child!.onTap != null) {
widget.child!.onTap!();
} else {
// 默认行为:关闭弹窗并打开全屏
final messageService = context.read<MessageService>();
_removeOverlay();
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ChangeNotifierProvider.value(
value: messageService,
child: const FullScreenPage(),
),
),
);
}
},
onLongPress: () async {
debugPrint('⏳ FloatingIcon onLongPress triggered! (using child properties)');
// 先执行外部传入的 onLongPress如果有
if (widget.child!.onLongPress != null) {
widget.child!.onLongPress!();
}
// 执行内部业务逻辑
final messageService = MessageService.instance;
_insertOverlay();
await messageService.startVoiceInput();
},
onLongPressUp: () async {
debugPrint('⏫ FloatingIcon onLongPressUp triggered! (using child properties)');
// 先执行外部传入的 onLongPressUp如果有
if (widget.child!.onLongPressUp != null) {
widget.child!.onLongPressUp!();
}
// 执行内部业务逻辑
final messageService = MessageService.instance;
await messageService.stopAndProcessVoiceInput();
final hasMessage = messageService.messages.isNotEmpty;
if (!hasMessage) {
_removeOverlay();
}
},
onPositionChanged: (position) {
debugPrint('📍 FloatingIcon position changed: $position (using child properties)');
// 先执行外部传入的 onPositionChanged如果有
if (widget.child!.onPositionChanged != null) {
widget.child!.onPositionChanged!(position);
}
// 执行内部业务逻辑
setState(() {
_iconPosition = position;
});
},
// 传递其他可能的属性
onLongPressEnd: widget.child!.onLongPressEnd,
onDragStart: widget.child!.onDragStart,
onDragEnd: widget.child!.onDragEnd,
);
}
// 如果没有传入 child使用原来的逻辑
return ChatFloatingIcon(
iconSize: widget.iconSize ?? _iconSizeDefault,
icon: widget.icon,
onTap: () async {
debugPrint('🖱️ FloatingIcon onTap triggered!');
final messageService = context.read<MessageService>();
_removeOverlay();
await Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ChangeNotifierProvider.value(
value: messageService, // 传递同一个单例实例
child: const FullScreenPage(),
),
),
);
},
onLongPress: () async {
debugPrint('⏳ FloatingIcon onLongPress triggered!');
final messageService = MessageService.instance;
_insertOverlay();
await messageService.startVoiceInput();
},
onLongPressUp: () async {
debugPrint('⏫ FloatingIcon onLongPressUp triggered!');
final messageService = MessageService.instance;
await messageService.stopAndProcessVoiceInput();
final hasMessage = messageService.messages.isNotEmpty;
@@ -145,11 +223,10 @@ class _ChatPopupState extends State<ChatPopup> with SingleTickerProviderStateMix
}
},
onPositionChanged: (position) {
debugPrint('📍 FloatingIcon position changed: $position');
setState(() {
_iconPosition = position;
});
// 重新构建 overlay 以更新弹窗位置
_overlayEntry?.markNeedsBuild();
},
);
}
@@ -199,10 +276,4 @@ class _ChatPopupState extends State<ChatPopup> with SingleTickerProviderStateMix
bottom: chatBottom,
);
}
@override
Widget build(BuildContext context) {
// 只渲染 FloatingIconOverlay 弹窗内容在长按时插入
return _buildFloatingIcon();
}
}