merge: 合并 K86.18 评论输入透明浮层

lib/pages/player/widgets/comment_composer_sheet.dart

@@ -25,10 +25,14 @@ class CommentComposerSheet extends StatefulWidget {
   const CommentComposerSheet({
     super.key,
     required this.controller,
+    required this.onDismiss,
+    required this.onPosted,
     this.replyTo,
   });
 
   final CommentController controller;
+  final VoidCallback onDismiss;
+  final VoidCallback onPosted;
   final DramaComment? replyTo;
 
   @override
@@ -40,7 +44,6 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
   final _inputFocus = FocusNode();
   final _keyboardInset = KeyboardInsetNotifier.instance;
   double _pinnedKeyboardInset = 0;
-  bool _closing = false;
 
   @override
   void initState() {
@@ -49,6 +52,9 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
     _keyboardInset.addListener(_onKeyboardInsetChanged);
     widget.controller.addListener(_onControllerChanged);
     unawaited(_keyboardInset.start());
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted) _inputFocus.requestFocus();
+    });
   }
 
   @override
@@ -56,6 +62,7 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
     _input.removeListener(_onInputChanged);
     _keyboardInset.removeListener(_onKeyboardInsetChanged);
     widget.controller.removeListener(_onControllerChanged);
+    _inputFocus.unfocus();
     _input.dispose();
     _inputFocus.dispose();
     super.dispose();
@@ -79,12 +86,6 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
     _keyboardInset.value / MediaQuery.devicePixelRatioOf(context),
   );
 
-  void _closeSheet() {
-    if (_closing || !mounted) return;
-    _closing = true;
-    Navigator.pop(context);
-  }
-
   Future<void> _submit() async {
     if (widget.controller.submitting) return;
     final text = _input.text.trim();
@@ -97,8 +98,7 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
     if (!mounted) return;
     if (result.isSuccess) {
       _input.clear();
-      _closing = true;
+      widget.onPosted();
-      Navigator.pop(context, true);
       return;
     }
     final l10n = AppLocalizations.of(context)!;
@@ -124,24 +124,20 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
     final multiline = _input.text.contains('\n');
 
     return Stack(
+      key: const Key('comment-composer-overlay'),
       fit: StackFit.expand,
       children: [
         Positioned.fill(
           child: GestureDetector(
             key: const Key('comment-composer-dismiss-layer'),
             behavior: HitTestBehavior.opaque,
-            onTap: () {
+            onTap: widget.onDismiss,
-              _inputFocus.unfocus();
-              _closeSheet();
-            },
           ),
         ),
-        Align(
+        Positioned(
-          alignment: Alignment.bottomCenter,
+          left: 0,
-          child: AnimatedPadding(
+          right: 0,
-            duration: const Duration(milliseconds: 200),
+          bottom: _pinnedKeyboardInset,
-            curve: Curves.easeOut,
-            padding: EdgeInsets.only(bottom: _pinnedKeyboardInset),
           child: GestureDetector(
             behavior: HitTestBehavior.opaque,
             onTap: () {},
@@ -181,13 +177,10 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
                           Container(
                             decoration: BoxDecoration(
                               color: AppColors.commentInput,
-                                borderRadius: BorderRadius.circular(
+                              borderRadius: BorderRadius.circular(_inputRadius),
-                                  _inputRadius,
-                                ),
                             ),
                             child: TextField(
                               key: const Key('comment-composer-input'),
-                                autofocus: true,
                               controller: _input,
                               focusNode: _inputFocus,
                               readOnly: !signedIn,
@@ -233,10 +226,7 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
                                 key: const Key('comment-composer-post'),
                                 onPressed: canPost ? _submit : null,
                                 style: TextButton.styleFrom(
-                                    minimumSize: const Size(
+                                  minimumSize: const Size(0, _postButtonHeight),
-                                      0,
-                                      _postButtonHeight,
-                                    ),
                                   padding: const EdgeInsets.symmetric(
                                     horizontal: 16,
                                   ),
@@ -271,7 +261,6 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
             ),
           ),
         ),
-        ),
       ],
     );
   }

lib/pages/player/widgets/drama_comments_sheet.dart

@@ -41,6 +41,7 @@ class DramaCommentsSheet extends StatefulWidget {
 class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
   late final CommentRepository _comments;
   late final CommentController _controller;
+  OverlayEntry? _composerOverlay;
   OverlayEntry? _successOverlay;
   Timer? _successOverlayTimer;
   int? _serverCount;
@@ -61,6 +62,7 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
 
   @override
   void dispose() {
+    _removeComposerOverlay();
     _successOverlayTimer?.cancel();
     _successOverlay?.remove();
     _controller.dispose();
@@ -86,20 +88,38 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
   Future<void> _openComposer({DramaComment? replyTo}) async {
     await ensureSignedIn(context);
     if (!mounted || !context.read<AuthController>().isSignedIn) return;
-    final published = await showModalBottomSheet<bool>(
+    _removeComposerOverlay();
-      context: context,
+    final entry = OverlayEntry(
-      isScrollControlled: true,
+      builder: (_) => CommentComposerSheet(
-      isDismissible: true,
+        controller: _controller,
-      backgroundColor: Colors.transparent,
+        replyTo: replyTo,
-      barrierColor: Colors.transparent,
+        onDismiss: _closeComposer,
-      showDragHandle: false,
+        onPosted: _handleComposerPosted,
-      builder: (_) =>
+      ),
-          CommentComposerSheet(controller: _controller, replyTo: replyTo),
     );
-    if (published == true && mounted) {
+    setState(() => _composerOverlay = entry);
-      _showPostSuccess();
+    Overlay.of(context, rootOverlay: true).insert(entry);
-      await _refreshCount();
   }
+
+  void _handleComposerPosted() {
+    _closeComposer();
+    _showPostSuccess();
+    unawaited(_refreshCount());
+  }
+
+  void _closeComposer() {
+    if (!mounted) {
+      _removeComposerOverlay();
+      return;
+    }
+    setState(_removeComposerOverlay);
+  }
+
+  void _removeComposerOverlay() {
+    final entry = _composerOverlay;
+    _composerOverlay = null;
+    if (entry?.mounted ?? false) entry!.remove();
+    FocusManager.instance.primaryFocus?.unfocus();
   }
 
   void _handleDismissLayerTap() {
@@ -133,7 +153,7 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
   @override
   Widget build(BuildContext context) {
     final sheetHeight = _sheetHeight(context);
-    return Stack(
+    final content = Stack(
       fit: StackFit.expand,
       children: [
         Positioned.fill(
@@ -179,6 +199,13 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
         ),
       ],
     );
+    return PopScope(
+      canPop: _composerOverlay == null,
+      onPopInvokedWithResult: (didPop, _) {
+        if (!didPop && _composerOverlay != null) _closeComposer();
+      },
+      child: content,
+    );
   }
 
   Widget _content(BuildContext context) {

test/comment/drama_comments_sheet_test.dart

@@ -352,10 +352,18 @@ void main() {
     final composer = find.byKey(const Key('comment-composer-sheet'));
     final composerInput = find.byKey(const Key('comment-composer-input'));
     expect(composer, findsOneWidget);
-    expect(
+    final overlayRoot = find.byKey(const Key('comment-composer-overlay'));
-      ModalRoute.of(tester.element(composer))?.barrierColor,
+    expect(overlayRoot, findsOneWidget);
-      Colors.transparent,
+    final overlayStack = tester.widget<Stack>(overlayRoot);
-    );
+    expect(overlayStack.children, hasLength(2));
+    final dismissLayer = overlayStack.children.first as Positioned;
+    expect(dismissLayer.left, 0);
+    expect(dismissLayer.top, 0);
+    expect(dismissLayer.right, 0);
+    expect(dismissLayer.bottom, 0);
+    final dismissGesture = dismissLayer.child as GestureDetector;
+    expect(dismissGesture.child, isNull);
+    expect(dismissGesture.behavior, HitTestBehavior.opaque);
     final compactHeight = tester.getSize(composer).height;
     expect(compactHeight, inInclusiveRange(100, 150));
     expect(tester.widget<TextField>(composerInput).focusNode?.hasFocus, isTrue);
@@ -486,6 +494,33 @@ void main() {
     expect(sheet, findsNothing);
   });
 
+  testWidgets(
+    'should_close_composer_overlay_on_back_without_closing_comments',
+    (tester) async {
+      final repository = FakeCommentRepository(
+        pages: [
+          CommentPage(
+            comments: [commentFixture(id: '10', content: 'A comment')],
+          ),
+        ],
+      );
+
+      await _pumpSheet(tester, repository: repository);
+      await tester.tap(find.byKey(const Key('comment-input-placeholder')));
+      await tester.pumpAndSettle();
+
+      final sheet = find.byKey(const Key('player-comments-sheet'));
+      final composer = find.byKey(const Key('comment-composer-sheet'));
+      expect(sheet, findsOneWidget);
+      expect(composer, findsOneWidget);
+
+      await tester.binding.handlePopRoute();
+      await tester.pumpAndSettle();
+      expect(sheet, findsOneWidget);
+      expect(composer, findsNothing);
+    },
+  );
+
   testWidgets('should_use_polished_comment_sizes', (tester) async {
     final repository = FakeCommentRepository(
       pages: [