fix(player): 聚焦时保留评论列表并稳定焦点

2026-10-21 12:53:46 +08:00
1 parent de99c09454
commit ad69ef7f54
@@ -34,6 +34,7 @@ const double _composerTopGap = 8;
 const double _replyBannerHeight = 46;
 const double _expandedInputRadius = 12;
 const double _postButtonHeight = 32;
+const double _expandedComposerReserve = 113;

 /// 服务端评论底部弹窗：匿名列表、游标翻页、回复与登录发布。
 class DramaCommentsSheet extends StatefulWidget {
@@ -45,22 +46,22 @@ class DramaCommentsSheet extends StatefulWidget {
  State<DramaCommentsSheet> createState() => _DramaCommentsSheetState();
 }

-class _DramaCommentsSheetState extends State<DramaCommentsSheet>
-    with WidgetsBindingObserver {
+class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
  final _input = TextEditingController();
  final _inputFocus = FocusNode();
  final _keyboardInset = KeyboardInsetNotifier.instance;
+  final _sheetMeasureKey = GlobalKey();
  late final CommentRepository _comments;
  late final CommentController _controller;
  DramaComment? _replyTo;
  int? _serverCount;
  int _countRequest = 0;
-  bool _keyboardWasVisible = false;
+  double? _sheetHeightWithoutKeyboard;
+  bool _sheetMeasureScheduled = false;

  @override
  void initState() {
    super.initState();
-    WidgetsBinding.instance.addObserver(this);
    _inputFocus.addListener(_onFocusChanged);
    _input.addListener(_onInputChanged);
    _keyboardInset.addListener(_onKeyboardInsetChanged);
@@ -77,7 +78,6 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet>

  @override
  void dispose() {
-    WidgetsBinding.instance.removeObserver(this);
    _keyboardInset.removeListener(_onKeyboardInsetChanged);
    _inputFocus.removeListener(_onFocusChanged);
    _input.removeListener(_onInputChanged);
@@ -98,35 +98,6 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet>
  void _onKeyboardInsetChanged() {
    if (!mounted) return;
    setState(() {});
-    _syncKeyboardVisibility(
-      math.max(
-        MediaQuery.viewInsetsOf(context).bottom,
-        _keyboardInset.value / MediaQuery.devicePixelRatioOf(context),
-      ),
-    );
-  }
-
-  @override
-  void didChangeMetrics() {
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (!mounted) return;
-      _syncKeyboardVisibility(
-        math.max(
-          MediaQuery.viewInsetsOf(context).bottom,
-          _keyboardInset.value / MediaQuery.devicePixelRatioOf(context),
-        ),
-      );
-    });
-  }
-
-  void _syncKeyboardVisibility(num keyboardHeight) {
-    if (keyboardHeight > 0) {
-      _keyboardWasVisible = true;
-      return;
-    }
-    if (!_keyboardWasVisible) return;
-    _keyboardWasVisible = false;
-    if (_inputFocus.hasFocus) _inputFocus.unfocus();
  }

  double _keyboardHeight(BuildContext context) => math.max(
@@ -134,6 +105,25 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet>
    _keyboardInset.value / MediaQuery.devicePixelRatioOf(context),
  );

+  void _measureSheetWithoutKeyboard(double keyboardHeight) {
+    if (keyboardHeight > 0 || _sheetMeasureScheduled) return;
+    _sheetMeasureScheduled = true;
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _sheetMeasureScheduled = false;
+      if (!mounted) return;
+      if (_keyboardHeight(context) > 0) return;
+      final box = _sheetMeasureKey.currentContext?.findRenderObject();
+      if (box is! RenderBox || !box.hasSize) return;
+      final height = box.size.height;
+      if (!height.isFinite ||
+          (_sheetHeightWithoutKeyboard != null &&
+              (height - _sheetHeightWithoutKeyboard!).abs() < 0.5)) {
+        return;
+      }
+      setState(() => _sheetHeightWithoutKeyboard = height);
+    });
+  }
+
  Future<void> _post() async {
    if (_controller.submitting) return;
    if (!await ensureSignedIn(context) || !mounted) return;
@@ -196,13 +186,12 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet>
        : _maxSheetHeight;
    final focused = _inputFocus.hasFocus;
    final keyboardHeight = _keyboardHeight(context);
-    return AnimatedPadding(
-      duration: const Duration(milliseconds: 150),
-      curve: Curves.easeOut,
-      padding: EdgeInsets.only(bottom: focused ? keyboardHeight : 0),
-      child: GestureDetector(
-        behavior: HitTestBehavior.translucent,
-        onTap: focused ? _inputFocus.unfocus : null,
+    _measureSheetWithoutKeyboard(keyboardHeight);
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: focused ? _inputFocus.unfocus : null,
+      child: SizedBox(
+        key: _sheetMeasureKey,
        child: Container(
          key: const Key('player-comments-sheet'),
          decoration: const BoxDecoration(
@@ -216,22 +205,27 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet>
            child: ListenableBuilder(
              listenable: _controller,
              builder: (context, _) {
-                final minHeight = !focused && _controller.comments.isEmpty
+                final minHeight = _controller.comments.isEmpty
                    ? (_minSheetHeight < maxHeight
                          ? _minSheetHeight
                          : maxHeight)
                    : 0.0;
+                final pinnedHeight =
+                    keyboardHeight > 0 && _sheetHeightWithoutKeyboard != null
+                    ? math.min(_sheetHeightWithoutKeyboard!, maxHeight)
+                    : null;
                return ConstrainedBox(
                  key: const Key('comment-sheet-constraints'),
-                  constraints: BoxConstraints(
-                    minHeight: minHeight,
-                    maxHeight: maxHeight,
-                  ),
+                  constraints: pinnedHeight == null
+                      ? BoxConstraints(
+                          minHeight: minHeight,
+                          maxHeight: maxHeight,
+                        )
+                      : BoxConstraints.tightFor(height: pinnedHeight),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16),
                    child: _content(
                      context,
-                      maxHeight: maxHeight,
                      focused: focused,
                      keyboardHeight: keyboardHeight,
                    ),
@@ -247,85 +241,86 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet>

  Widget _content(
    BuildContext context, {
-    required double maxHeight,
    required bool focused,
    required double keyboardHeight,
  }) {
    final l10n = AppLocalizations.of(context)!;
    final count = _serverCount ?? _controller.exactCount;
-    final replyReserve = _replyTo == null ? 0.0 : _replyBannerHeight;
-    final listMaxHeight =
-        maxHeight -
-        _headerHeight -
-        _composerHeight -
-        _composerTopGap -
-        replyReserve;
+    final composerReserve = focused
+        ? _expandedComposerReserve
+        : _composerHeight + _composerTopGap;
    return Column(
      key: const Key('comment-sheet-content'),
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
-          height: focused ? 0 : _headerHeight,
+          height: _headerHeight,
          width: double.infinity,
-          child: focused
-              ? null
-              : Stack(
-                  alignment: Alignment.center,
-                  children: [
-                    Text(
-                      count == null
-                          ? l10n.comments
-                          : l10n.commentsWithCount(count),
-                      key: const Key('comment-count-label'),
-                      textAlign: TextAlign.center,
-                      style: const TextStyle(
-                        color: AppColors.onSurface,
-                        fontSize: 16,
-                        fontWeight: FontWeight.w600,
-                      ),
-                    ),
-                    Positioned(
-                      left: 0,
-                      child: SizedBox.square(
-                        dimension: 44,
-                        child: IconButton(
-                          key: const Key('player-comments-close'),
-                          tooltip: l10n.close,
-                          padding: EdgeInsets.zero,
-                          onPressed: () => Navigator.pop(context),
-                          icon: const Icon(
-                            Icons.keyboard_arrow_down_rounded,
-                            size: 24,
-                            color: AppColors.cream,
-                          ),
-                        ),
-                      ),
-                    ),
-                  ],
+          child: Stack(
+            alignment: Alignment.center,
+            children: [
+              Text(
+                count == null ? l10n.comments : l10n.commentsWithCount(count),
+                key: const Key('comment-count-label'),
+                textAlign: TextAlign.center,
+                style: const TextStyle(
+                  color: AppColors.onSurface,
+                  fontSize: 16,
+                  fontWeight: FontWeight.w600,
                ),
+              ),
+              Positioned(
+                left: 0,
+                child: SizedBox.square(
+                  dimension: 44,
+                  child: IconButton(
+                    key: const Key('player-comments-close'),
+                    tooltip: l10n.close,
+                    padding: EdgeInsets.zero,
+                    onPressed: () => Navigator.pop(context),
+                    icon: const Icon(
+                      Icons.keyboard_arrow_down_rounded,
+                      size: 24,
+                      color: AppColors.cream,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
        ),
-        ConstrainedBox(
-          constraints: BoxConstraints(
-            maxHeight: focused || listMaxHeight < 0 ? 0 : listMaxHeight,
+        Flexible(
+          fit: FlexFit.loose,
+          child: _list(
+            l10n,
+            composerReserve: composerReserve,
+            keyboardHeight: keyboardHeight,
          ),
-          child: focused
-              ? const SizedBox.shrink()
-              : _list(l10n, keyboardHeight: keyboardHeight),
        ),
        if (_replyTo != null) _replyBanner(l10n, _replyTo!),
-        Padding(
-          padding: EdgeInsets.only(
-            top: focused ? 12 : _composerTopGap,
-            bottom: focused ? 12 : 0,
+        AnimatedContainer(
+          key: const Key('comment-input-lift'),
+          duration: const Duration(milliseconds: 200),
+          curve: Curves.easeOut,
+          transform: Matrix4.translationValues(0, -keyboardHeight, 0),
+          child: Padding(
+            padding: EdgeInsets.only(
+              top: focused ? 12 : _composerTopGap,
+              bottom: focused ? 12 : 0,
+            ),
+            child: _composer(l10n, focused: focused),
          ),
-          child: _composer(l10n, focused: focused),
        ),
      ],
    );
  }

-  Widget _list(AppLocalizations l10n, {required double keyboardHeight}) {
+  Widget _list(
+    AppLocalizations l10n, {
+    required double composerReserve,
+    required double keyboardHeight,
+  }) {
    if (_controller.loading && _controller.comments.isEmpty) {
      return const Padding(
        padding: EdgeInsets.only(top: 4),
@@ -364,7 +359,7 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet>
      shrinkWrap: true,
      padding: EdgeInsets.only(
        top: 4,
-        bottom: _composerHeight + keyboardHeight,
+        bottom: composerReserve + keyboardHeight,
      ),
      itemCount: _controller.comments.length + 1,
      itemBuilder: (context, index) {