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({
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;
Navigator.pop(context, true);
widget.onPosted();
return;
}
final l10n = AppLocalizations.of(context)!;
@@ -124,146 +124,135 @@ 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: () {
_inputFocus.unfocus();
_closeSheet();
},
onTap: widget.onDismiss,
),
),
Align(
alignment: Alignment.bottomCenter,
child: AnimatedPadding(
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut,
padding: EdgeInsets.only(bottom: _pinnedKeyboardInset),
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {},
child: SizedBox(
key: const Key('comment-composer-sheet'),
width: double.infinity,
child: Material(
color: AppColors.card,
clipBehavior: Clip.antiAlias,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(_sheetRadius),
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
child: TextFieldTapRegion(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (widget.replyTo != null)
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
l10n.replyingTo(
widget.replyTo!.nickname.isEmpty
? l10n.anonymousUser
: widget.replyTo!.nickname,
),
style: const TextStyle(
color: AppColors.muted,
fontSize: 12,
),
Positioned(
left: 0,
right: 0,
bottom: _pinnedKeyboardInset,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {},
child: SizedBox(
key: const Key('comment-composer-sheet'),
width: double.infinity,
child: Material(
color: AppColors.card,
clipBehavior: Clip.antiAlias,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(_sheetRadius),
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
child: TextFieldTapRegion(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
if (widget.replyTo != null)
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
l10n.replyingTo(
widget.replyTo!.nickname.isEmpty
? l10n.anonymousUser
: widget.replyTo!.nickname,
),
style: const TextStyle(
color: AppColors.muted,
fontSize: 12,
),
),
Container(
decoration: BoxDecoration(
color: AppColors.commentInput,
borderRadius: BorderRadius.circular(
_inputRadius,
),
),
Container(
decoration: BoxDecoration(
color: AppColors.commentInput,
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(
key: const Key('comment-composer-input'),
autofocus: true,
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,
cursorColor: AppColors.blue,
decoration: InputDecoration(
hintText: signedIn
? l10n.writeComment
: l10n.commentLoginHint,
hintStyle: const TextStyle(
color: AppColors.muted,
fontSize: 14,
),
cursorColor: AppColors.blue,
decoration: InputDecoration(
hintText: signedIn
? l10n.writeComment
: l10n.commentLoginHint,
hintStyle: const TextStyle(
color: AppColors.muted,
fontSize: 14,
),
counterText: '',
contentPadding: const EdgeInsets.symmetric(
counterText: '',
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
onTap: signedIn ? null : _authenticate,
),
),
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,
vertical: 12,
),
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
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),
),
),
onTap: signedIn ? null : _authenticate,
),
),
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,
),
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,
),
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> {
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>(
context: context,
isScrollControlled: true,
isDismissible: true,
backgroundColor: Colors.transparent,
barrierColor: Colors.transparent,
showDragHandle: false,
builder: (_) =>
CommentComposerSheet(controller: _controller, replyTo: replyTo),
_removeComposerOverlay();
final entry = OverlayEntry(
builder: (_) => CommentComposerSheet(
controller: _controller,
replyTo: replyTo,
onDismiss: _closeComposer,
onPosted: _handleComposerPosted,
),
);
if (published == true && mounted) {
_showPostSuccess();
await _refreshCount();
setState(() => _composerOverlay = entry);
Overlay.of(context, rootOverlay: true).insert(entry);
}
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
+39 -4
View File
@@ -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(
ModalRoute.of(tester.element(composer))?.barrierColor,
Colors.transparent,
);
final overlayRoot = find.byKey(const Key('comment-composer-overlay'));
expect(overlayRoot, findsOneWidget);
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: [