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 14:24:24 +08:00
1 parent 5b4526cb97
commit 4908dc9d76
3 files changed
+198 -147
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/player/widgets/comment_composer_sheet.dart
+119 -130
View File
@@ -25,10 +25,14 @@ class CommentComposerSheet extends StatefulWidget {
const CommentComposerSheet({ const CommentComposerSheet({
super.key, super.key,
required this.controller, required this.controller,
required this.onDismiss,
required this.onPosted,
this.replyTo, this.replyTo,
}); });
final CommentController controller; final CommentController controller;
final VoidCallback onDismiss;
final VoidCallback onPosted;
final DramaComment? replyTo; final DramaComment? replyTo;
@override @override
@@ -40,7 +44,6 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
final _inputFocus = FocusNode(); final _inputFocus = FocusNode();
final _keyboardInset = KeyboardInsetNotifier.instance; final _keyboardInset = KeyboardInsetNotifier.instance;
double _pinnedKeyboardInset = 0; double _pinnedKeyboardInset = 0;
bool _closing = false;
@override @override
void initState() { void initState() {
@@ -49,6 +52,9 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
_keyboardInset.addListener(_onKeyboardInsetChanged); _keyboardInset.addListener(_onKeyboardInsetChanged);
widget.controller.addListener(_onControllerChanged); widget.controller.addListener(_onControllerChanged);
unawaited(_keyboardInset.start()); unawaited(_keyboardInset.start());
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) _inputFocus.requestFocus();
});
} }
@override @override
@@ -56,6 +62,7 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
_input.removeListener(_onInputChanged); _input.removeListener(_onInputChanged);
_keyboardInset.removeListener(_onKeyboardInsetChanged); _keyboardInset.removeListener(_onKeyboardInsetChanged);
widget.controller.removeListener(_onControllerChanged); widget.controller.removeListener(_onControllerChanged);
_inputFocus.unfocus();
_input.dispose(); _input.dispose();
_inputFocus.dispose(); _inputFocus.dispose();
super.dispose(); super.dispose();
@@ -79,12 +86,6 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
_keyboardInset.value / MediaQuery.devicePixelRatioOf(context), _keyboardInset.value / MediaQuery.devicePixelRatioOf(context),
); );
void _closeSheet() {
if (_closing || !mounted) return;
_closing = true;
Navigator.pop(context);
}
Future<void> _submit() async { Future<void> _submit() async {
if (widget.controller.submitting) return; if (widget.controller.submitting) return;
final text = _input.text.trim(); final text = _input.text.trim();
@@ -97,8 +98,7 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
if (!mounted) return; if (!mounted) return;
if (result.isSuccess) { if (result.isSuccess) {
_input.clear(); _input.clear();
_closing = true; widget.onPosted();
Navigator.pop(context, true);
return; return;
} }
final l10n = AppLocalizations.of(context)!; final l10n = AppLocalizations.of(context)!;
@@ -124,146 +124,135 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
final multiline = _input.text.contains('\n'); final multiline = _input.text.contains('\n');
return Stack( return Stack(
key: const Key('comment-composer-overlay'),
fit: StackFit.expand, fit: StackFit.expand,
children: [ children: [
Positioned.fill( Positioned.fill(
child: GestureDetector( child: GestureDetector(
key: const Key('comment-composer-dismiss-layer'), key: const Key('comment-composer-dismiss-layer'),
behavior: HitTestBehavior.opaque, 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, child: GestureDetector(
padding: EdgeInsets.only(bottom: _pinnedKeyboardInset), behavior: HitTestBehavior.opaque,
child: GestureDetector( onTap: () {},
behavior: HitTestBehavior.opaque, child: SizedBox(
onTap: () {}, key: const Key('comment-composer-sheet'),
child: SizedBox( width: double.infinity,
key: const Key('comment-composer-sheet'), child: Material(
width: double.infinity, color: AppColors.card,
child: Material( clipBehavior: Clip.antiAlias,
color: AppColors.card, borderRadius: const BorderRadius.vertical(
clipBehavior: Clip.antiAlias, top: Radius.circular(_sheetRadius),
borderRadius: const BorderRadius.vertical( ),
top: Radius.circular(_sheetRadius), child: SafeArea(
), top: false,
child: SafeArea( child: Padding(
top: false, padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
child: Padding( child: TextFieldTapRegion(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12), child: Column(
child: TextFieldTapRegion( mainAxisSize: MainAxisSize.min,
child: Column( crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min, children: [
crossAxisAlignment: CrossAxisAlignment.stretch, if (widget.replyTo != null)
children: [ Padding(
if (widget.replyTo != null) padding: const EdgeInsets.only(bottom: 8),
Padding( child: Text(
padding: const EdgeInsets.only(bottom: 8), l10n.replyingTo(
child: Text( widget.replyTo!.nickname.isEmpty
l10n.replyingTo( ? l10n.anonymousUser
widget.replyTo!.nickname.isEmpty : widget.replyTo!.nickname,
? l10n.anonymousUser ),
: widget.replyTo!.nickname, style: const TextStyle(
), color: AppColors.muted,
style: const TextStyle( fontSize: 12,
color: AppColors.muted,
fontSize: 12,
),
), ),
), ),
Container( ),
decoration: BoxDecoration( Container(
color: AppColors.commentInput, decoration: BoxDecoration(
borderRadius: BorderRadius.circular( color: AppColors.commentInput,
_inputRadius, borderRadius: BorderRadius.circular(_inputRadius),
), ),
child: TextField(
key: const Key('comment-composer-input'),
controller: _input,
focusNode: _inputFocus,
readOnly: !signedIn,
canRequestFocus: signedIn,
minLines: 1,
maxLines: 4,
maxLength: _maxCommentLength,
textAlignVertical: multiline
? TextAlignVertical.top
: TextAlignVertical.center,
style: TextStyle(
color: AppColors.cream,
fontSize: 15,
height: multiline ? 1.4 : null,
), ),
child: TextField( cursorColor: AppColors.blue,
key: const Key('comment-composer-input'), decoration: InputDecoration(
autofocus: true, hintText: signedIn
controller: _input, ? l10n.writeComment
focusNode: _inputFocus, : l10n.commentLoginHint,
readOnly: !signedIn, hintStyle: const TextStyle(
canRequestFocus: signedIn, color: AppColors.muted,
minLines: 1, fontSize: 14,
maxLines: 4,
maxLength: _maxCommentLength,
textAlignVertical: multiline
? TextAlignVertical.top
: TextAlignVertical.center,
style: TextStyle(
color: AppColors.cream,
fontSize: 15,
height: multiline ? 1.4 : null,
), ),
cursorColor: AppColors.blue, counterText: '',
decoration: InputDecoration( contentPadding: const EdgeInsets.symmetric(
hintText: signedIn horizontal: 16,
? l10n.writeComment vertical: 12,
: l10n.commentLoginHint, ),
hintStyle: const TextStyle( border: InputBorder.none,
color: AppColors.muted, enabledBorder: InputBorder.none,
fontSize: 14, focusedBorder: InputBorder.none,
), ),
counterText: '', onTap: signedIn ? null : _authenticate,
contentPadding: const EdgeInsets.symmetric( ),
),
const SizedBox(height: 12),
Align(
alignment: Alignment.centerRight,
child: SizedBox(
height: _postButtonHeight,
child: TextButton(
key: const Key('comment-composer-post'),
onPressed: canPost ? _submit : null,
style: TextButton.styleFrom(
minimumSize: const Size(0, _postButtonHeight),
padding: const EdgeInsets.symmetric(
horizontal: 16, horizontal: 16,
vertical: 12,
), ),
border: InputBorder.none, tapTargetSize:
enabledBorder: InputBorder.none, MaterialTapTargetSize.shrinkWrap,
focusedBorder: InputBorder.none, 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),
),
), ),
onTap: signedIn ? null : _authenticate, child: Text(
), l10n.postComment,
), style: const TextStyle(
const SizedBox(height: 12), fontSize: 14,
Align( fontWeight: FontWeight.w600,
alignment: Alignment.centerRight,
child: SizedBox(
height: _postButtonHeight,
child: TextButton(
key: const Key('comment-composer-post'),
onPressed: canPost ? _submit : 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,
),
), ),
), ),
), ),
), ),
], ),
), ],
), ),
), ),
), ),
lib/pages/player/widgets/drama_comments_sheet.dart
+40 -13
View File
@@ -41,6 +41,7 @@ class DramaCommentsSheet extends StatefulWidget {
class _DramaCommentsSheetState extends State<DramaCommentsSheet> { class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
late final CommentRepository _comments; late final CommentRepository _comments;
late final CommentController _controller; late final CommentController _controller;
OverlayEntry? _composerOverlay;
OverlayEntry? _successOverlay; OverlayEntry? _successOverlay;
Timer? _successOverlayTimer; Timer? _successOverlayTimer;
int? _serverCount; int? _serverCount;
@@ -61,6 +62,7 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
@override @override
void dispose() { void dispose() {
_removeComposerOverlay();
_successOverlayTimer?.cancel(); _successOverlayTimer?.cancel();
_successOverlay?.remove(); _successOverlay?.remove();
_controller.dispose(); _controller.dispose();
@@ -86,20 +88,38 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
Future<void> _openComposer({DramaComment? replyTo}) async { Future<void> _openComposer({DramaComment? replyTo}) async {
await ensureSignedIn(context); await ensureSignedIn(context);
if (!mounted || !context.read<AuthController>().isSignedIn) return; 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() { void _handleDismissLayerTap() {
@@ -133,7 +153,7 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final sheetHeight = _sheetHeight(context); final sheetHeight = _sheetHeight(context);
return Stack( final content = Stack(
fit: StackFit.expand, fit: StackFit.expand,
children: [ children: [
Positioned.fill( 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) { Widget _content(BuildContext context) {
test/comment/drama_comments_sheet_test.dart
+39 -4
View File
@@ -352,10 +352,18 @@ void main() {
final composer = find.byKey(const Key('comment-composer-sheet')); final composer = find.byKey(const Key('comment-composer-sheet'));
final composerInput = find.byKey(const Key('comment-composer-input')); final composerInput = find.byKey(const Key('comment-composer-input'));
expect(composer, findsOneWidget); 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; final compactHeight = tester.getSize(composer).height;
expect(compactHeight, inInclusiveRange(100, 150)); expect(compactHeight, inInclusiveRange(100, 150));
expect(tester.widget<TextField>(composerInput).focusNode?.hasFocus, isTrue); expect(tester.widget<TextField>(composerInput).focusNode?.hasFocus, isTrue);
@@ -486,6 +494,33 @@ void main() {
expect(sheet, findsNothing); 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 { testWidgets('should_use_polished_comment_sizes', (tester) async {
final repository = FakeCommentRepository( final repository = FakeCommentRepository(
pages: [ pages: [