jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(player): 修复评论输入聚焦时面板消失

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-21 12:40:12 +08:00
1 parent 226ac5920c
commit c7b230263a
4 files changed
+399 -280
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/player/widgets/drama_comments_sheet.dart
+273 -244
View File
@@ -1,6 +1,7 @@
// Author: fruit.com.cn
import 'dart:async';
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
@@ -13,6 +14,7 @@ import '../../../core/data/services/comment_controller.dart';
import '../../../core/data/services/auth_controller.dart';
import '../../../core/formatting/error_text.dart';
import '../../../core/platform/haptics.dart';
import '../../../core/platform/keyboard_inset.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/widgets/auth_gate.dart';
import '../../../core/widgets/empty_state.dart';
@@ -43,20 +45,26 @@ class DramaCommentsSheet extends StatefulWidget {
State<DramaCommentsSheet> createState() => _DramaCommentsSheetState();
}
class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
class _DramaCommentsSheetState extends State<DramaCommentsSheet>
with WidgetsBindingObserver {
final _input = TextEditingController();
final _inputFocus = FocusNode();
final _keyboardInset = KeyboardInsetNotifier.instance;
late final CommentRepository _comments;
late final CommentController _controller;
DramaComment? _replyTo;
int? _serverCount;
int _countRequest = 0;
bool _keyboardWasVisible = false;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
_inputFocus.addListener(_onFocusChanged);
_input.addListener(_onInputChanged);
_keyboardInset.addListener(_onKeyboardInsetChanged);
unawaited(_keyboardInset.start());
_comments = context.read<CommentRepository>();
_controller = CommentController(
comments: _comments,
@@ -69,6 +77,8 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
_keyboardInset.removeListener(_onKeyboardInsetChanged);
_inputFocus.removeListener(_onFocusChanged);
_input.removeListener(_onInputChanged);
_controller.dispose();
@@ -85,6 +95,45 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
if (mounted) setState(() {});
}
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(
MediaQuery.viewInsetsOf(context).bottom,
_keyboardInset.value / MediaQuery.devicePixelRatioOf(context),
);
Future<void> _post() async {
if (_controller.submitting) return;
if (!await ensureSignedIn(context) || !mounted) return;
@@ -145,142 +194,50 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
final maxHeight = screenLimit < _maxSheetHeight
? screenLimit
: _maxSheetHeight;
if (_inputFocus.hasFocus) {
return _expandedComposer(context, maxHeight);
}
return Container(
key: const Key('player-comments-sheet'),
decoration: const BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.vertical(top: Radius.circular(_sheetRadius)),
),
child: SafeArea(
top: false,
child: ListenableBuilder(
listenable: _controller,
builder: (context, _) {
final minHeight = _controller.comments.isEmpty
? (_minSheetHeight < maxHeight ? _minSheetHeight : maxHeight)
: 0.0;
return ConstrainedBox(
key: const Key('comment-sheet-constraints'),
constraints: BoxConstraints(
minHeight: minHeight,
maxHeight: maxHeight,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: _content(context, maxHeight),
),
);
},
),
),
);
}
Widget _expandedComposer(BuildContext context, double maxHeight) {
final l10n = AppLocalizations.of(context)!;
final signedIn = context.watch<AuthController>().isSignedIn;
final hasContent = _input.text.trim().isNotEmpty;
final canPost = signedIn && hasContent && !_controller.submitting;
final focused = _inputFocus.hasFocus;
final keyboardHeight = _keyboardHeight(context);
return AnimatedPadding(
duration: const Duration(milliseconds: 150),
curve: Curves.easeOut,
padding: EdgeInsets.only(bottom: MediaQuery.viewInsetsOf(context).bottom),
child: Container(
key: const Key('player-comments-sheet'),
decoration: const BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.vertical(
top: Radius.circular(_sheetRadius),
padding: EdgeInsets.only(bottom: focused ? keyboardHeight : 0),
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: focused ? _inputFocus.unfocus : null,
child: Container(
key: const Key('player-comments-sheet'),
decoration: const BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.vertical(
top: Radius.circular(_sheetRadius),
),
),
),
child: SafeArea(
top: false,
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: maxHeight),
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
child: Column(
key: const Key('comment-expanded-composer'),
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (_replyTo != null) _replyBanner(l10n, _replyTo!),
Container(
decoration: BoxDecoration(
color: AppColors.commentInput,
borderRadius: BorderRadius.circular(_expandedInputRadius),
),
child: TextField(
key: const Key('comment-input'),
controller: _input,
focusNode: _inputFocus,
autofocus: true,
readOnly: !signedIn,
canRequestFocus: signedIn,
minLines: 1,
maxLines: 4,
maxLength: _maxCommentLength,
textAlignVertical: TextAlignVertical.top,
style: const TextStyle(
color: AppColors.cream,
fontSize: 15,
),
cursorColor: AppColors.blue,
decoration: InputDecoration(
hintText: l10n.writeComment,
hintStyle: const TextStyle(
color: AppColors.muted,
fontSize: 14,
),
counterText: '',
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
onTap: signedIn ? null : _authenticateForComment,
child: SafeArea(
top: false,
child: ListenableBuilder(
listenable: _controller,
builder: (context, _) {
final minHeight = !focused && _controller.comments.isEmpty
? (_minSheetHeight < maxHeight
? _minSheetHeight
: maxHeight)
: 0.0;
return ConstrainedBox(
key: const Key('comment-sheet-constraints'),
constraints: BoxConstraints(
minHeight: minHeight,
maxHeight: maxHeight,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: _content(
context,
maxHeight: maxHeight,
focused: focused,
keyboardHeight: keyboardHeight,
),
),
const SizedBox(height: 12),
Align(
alignment: Alignment.centerRight,
child: SizedBox(
height: _postButtonHeight,
child: TextButton(
key: const Key('comment-post'),
onPressed: canPost ? _post : null,
style: TextButton.styleFrom(
minimumSize: const Size(0, _postButtonHeight),
padding: const EdgeInsets.symmetric(horizontal: 16),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
backgroundColor: hasContent
? AppColors.blue.withValues(alpha: 0.12)
: AppColors.raised,
foregroundColor: AppColors.blue,
disabledForegroundColor: AppColors.muted,
disabledBackgroundColor: AppColors.raised,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
l10n.postComment,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
),
),
],
),
);
},
),
),
),
@@ -288,7 +245,12 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
);
}
Widget _content(BuildContext context, double maxHeight) {
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;
@@ -298,83 +260,72 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
_composerHeight -
_composerTopGap -
replyReserve;
return Stack(
return Column(
key: const Key('comment-sheet-content'),
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Column(
key: const Key('comment-sheet-content'),
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: _headerHeight,
width: double.infinity,
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,
SizedBox(
height: focused ? 0 : _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,
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: listMaxHeight < 0 ? 0 : listMaxHeight,
),
child: _list(l10n),
),
if (_replyTo != null) _replyBanner(l10n, _replyTo!),
const SizedBox(height: _composerHeight + _composerTopGap),
],
],
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: AnimatedPadding(
duration: const Duration(milliseconds: 150),
curve: Curves.easeOut,
padding: EdgeInsets.only(
bottom: MediaQuery.viewInsetsOf(context).bottom,
),
child: Padding(
padding: const EdgeInsets.only(top: _composerTopGap),
child: _composer(l10n),
),
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: focused || listMaxHeight < 0 ? 0 : listMaxHeight,
),
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,
),
child: _composer(l10n, focused: focused),
),
],
);
}
Widget _list(AppLocalizations l10n) {
final keyboardHeight = MediaQuery.viewInsetsOf(context).bottom;
Widget _list(AppLocalizations l10n, {required double keyboardHeight}) {
if (_controller.loading && _controller.comments.isEmpty) {
return const Padding(
padding: EdgeInsets.only(top: 4),
@@ -472,9 +423,11 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
),
);
InputDecoration _composerDecoration(String hint) {
const radius = BorderRadius.all(Radius.circular(_composerRadius));
const clear = OutlineInputBorder(
InputDecoration _composerDecoration(String hint, {required bool focused}) {
final radius = BorderRadius.circular(
focused ? _expandedInputRadius : _composerRadius,
);
final clear = OutlineInputBorder(
borderRadius: radius,
borderSide: BorderSide.none,
);
@@ -482,7 +435,10 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
hintText: hint,
hintStyle: const TextStyle(color: AppColors.muted, fontSize: 14),
counterText: '',
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
contentPadding: EdgeInsets.symmetric(
horizontal: 16,
vertical: focused ? 12 : 0,
),
isDense: true,
border: clear,
enabledBorder: clear,
@@ -490,57 +446,130 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
);
}
Widget _composer(AppLocalizations l10n) {
Widget _composer(AppLocalizations l10n, {required bool focused}) {
final signedIn = context.watch<AuthController>().isSignedIn;
final hasContent = _input.text.trim().isNotEmpty;
final canPost = signedIn && hasContent && !_controller.submitting;
return Container(
key: const Key('comment-composer'),
height: _composerHeight,
padding: const EdgeInsets.only(right: 3),
padding: focused ? EdgeInsets.zero : const EdgeInsets.only(right: 3),
decoration: BoxDecoration(
color: AppColors.commentInput,
borderRadius: BorderRadius.circular(_composerRadius),
color: focused ? Colors.transparent : AppColors.commentInput,
borderRadius: BorderRadius.circular(focused ? 0 : _composerRadius),
),
child: Row(
children: [
Expanded(
child: SizedBox(
height: _composerHeight,
child: TextField(
key: const Key('comment-input'),
controller: _input,
focusNode: _inputFocus,
readOnly: !signedIn,
canRequestFocus: signedIn,
maxLength: _maxCommentLength,
maxLines: 1,
textAlignVertical: TextAlignVertical.center,
style: const TextStyle(color: AppColors.cream, fontSize: 14),
cursorColor: AppColors.blue,
decoration: _composerDecoration(
signedIn ? l10n.writeComment : l10n.commentLoginHint,
child: TextFieldTapRegion(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
AnimatedContainer(
key: const Key('comment-input-surface'),
duration: const Duration(milliseconds: 150),
curve: Curves.easeOut,
decoration: BoxDecoration(
color: focused ? AppColors.commentInput : Colors.transparent,
borderRadius: BorderRadius.circular(
focused ? _expandedInputRadius : _composerRadius,
),
),
child: SizedBox(
height: focused ? null : _composerHeight,
child: Row(
crossAxisAlignment: focused
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: [
Expanded(
child: SizedBox(
height: focused ? null : _composerHeight,
child: TextField(
key: const Key('comment-input'),
controller: _input,
focusNode: _inputFocus,
readOnly: !signedIn,
canRequestFocus: signedIn,
minLines: 1,
maxLines: focused ? 4 : 1,
maxLength: _maxCommentLength,
textAlignVertical: focused
? TextAlignVertical.top
: TextAlignVertical.center,
style: TextStyle(
color: AppColors.cream,
fontSize: focused ? 15 : 14,
),
cursorColor: AppColors.blue,
decoration: _composerDecoration(
signedIn
? l10n.writeComment
: l10n.commentLoginHint,
focused: focused,
),
onTap: signedIn ? null : _authenticateForComment,
onTapOutside: (_) => _inputFocus.unfocus(),
onSubmitted: focused ? null : (_) => _post(),
),
),
),
if (!focused)
SizedBox.square(
dimension: _sendButtonSize,
child: IconButton.filled(
key: const Key('comment-post'),
tooltip: l10n.postComment,
padding: EdgeInsets.zero,
iconSize: 18,
onPressed: _controller.submitting ? null : _post,
icon: _controller.submitting
? const SizedBox.square(
dimension: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
),
)
: const Icon(Icons.send_rounded),
),
),
],
),
onTap: signedIn ? null : _authenticateForComment,
onSubmitted: (_) => _post(),
),
),
),
SizedBox.square(
dimension: _sendButtonSize,
child: IconButton.filled(
key: const Key('comment-post'),
tooltip: l10n.postComment,
padding: EdgeInsets.zero,
iconSize: 18,
onPressed: _controller.submitting ? null : _post,
icon: _controller.submitting
? const SizedBox.square(
dimension: 16,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Icon(Icons.send_rounded),
),
),
],
if (focused) ...[
const SizedBox(height: 12),
Align(
alignment: Alignment.centerRight,
child: SizedBox(
height: _postButtonHeight,
child: TextButton(
key: const Key('comment-post'),
onPressed: canPost ? _post : null,
style: TextButton.styleFrom(
minimumSize: const Size(0, _postButtonHeight),
padding: const EdgeInsets.symmetric(horizontal: 16),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
backgroundColor: hasContent
? AppColors.blue.withValues(alpha: 0.12)
: AppColors.raised,
foregroundColor: AppColors.blue,
disabledForegroundColor: AppColors.muted,
disabledBackgroundColor: AppColors.raised,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
l10n.postComment,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
),
),
],
],
),
),
);
}