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:43:43 +08:00
1 parent 6c72f8bf22
commit a66cdb2e1b
2 files changed
+219 -131
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
+173 -131
View File
@@ -4,6 +4,7 @@ import 'dart:async';
import 'dart:math' as math; import 'dart:math' as math;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import '../../../core/data/models/comment.dart'; import '../../../core/data/models/comment.dart';
@@ -44,6 +45,10 @@ 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;
int _insetBaseline = 0;
bool _pinnedInitialized = false;
bool _insetReady = false;
bool _useChannelInset = false;
@override @override
void initState() { void initState() {
@@ -51,9 +56,31 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
_input.addListener(_onInputChanged); _input.addListener(_onInputChanged);
_keyboardInset.addListener(_onKeyboardInsetChanged); _keyboardInset.addListener(_onKeyboardInsetChanged);
widget.controller.addListener(_onControllerChanged); widget.controller.addListener(_onControllerChanged);
unawaited(_keyboardInset.start()); unawaited(_prepareInput());
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
if (_pinnedInitialized) return;
_pinnedInitialized = true;
_pinnedKeyboardInset = MediaQuery.viewInsetsOf(context).bottom;
}
Future<void> _prepareInput() async {
await _keyboardInset.start();
if (!mounted) return;
_insetBaseline = _keyboardInset.value;
_insetReady = true;
WidgetsBinding.instance.addPostFrameCallback((_) { WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) _inputFocus.requestFocus(); if (!mounted) return;
_inputFocus.requestFocus();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted || _keyboardHeight(context) > 0) return;
unawaited(
SystemChannels.textInput.invokeMethod<void>('TextInput.show'),
);
});
}); });
} }
@@ -77,14 +104,20 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
} }
void _onKeyboardInsetChanged() { void _onKeyboardInsetChanged() {
if (!mounted) return; if (!mounted || !_insetReady) return;
if (_keyboardInset.value != _insetBaseline) {
_useChannelInset = true;
}
setState(() {}); setState(() {});
} }
double _keyboardHeight(BuildContext context) => math.max( double _keyboardHeight(BuildContext context) {
MediaQuery.viewInsetsOf(context).bottom, final viewInset = MediaQuery.viewInsetsOf(context).bottom;
_keyboardInset.value / MediaQuery.devicePixelRatioOf(context), final channelInset = _useChannelInset
); ? _keyboardInset.value / MediaQuery.devicePixelRatioOf(context)
: 0.0;
return math.max(viewInset, channelInset);
}
Future<void> _submit() async { Future<void> _submit() async {
if (widget.controller.submitting) return; if (widget.controller.submitting) return;
@@ -123,137 +156,146 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
final canPost = signedIn && hasContent && !widget.controller.submitting; final canPost = signedIn && hasContent && !widget.controller.submitting;
final multiline = _input.text.contains('\n'); final multiline = _input.text.contains('\n');
return Stack( return FocusScope(
key: const Key('comment-composer-overlay'), key: const Key('comment-composer-focus-scope'),
fit: StackFit.expand, autofocus: true,
children: [ child: Stack(
Positioned.fill( key: const Key('comment-composer-overlay'),
child: GestureDetector( fit: StackFit.expand,
key: const Key('comment-composer-dismiss-layer'), children: [
behavior: HitTestBehavior.opaque, Positioned.fill(
onTap: widget.onDismiss, child: GestureDetector(
key: const Key('comment-composer-dismiss-layer'),
behavior: HitTestBehavior.opaque,
onTap: widget.onDismiss,
),
), ),
), Positioned(
Positioned( left: 0,
left: 0, right: 0,
right: 0, bottom: 0,
bottom: 0, child: GestureDetector(
child: GestureDetector( behavior: HitTestBehavior.opaque,
behavior: HitTestBehavior.opaque, onTap: () {},
onTap: () {}, child: Material(
child: Material( key: const Key('comment-composer-panel'),
key: const Key('comment-composer-panel'), color: AppColors.card,
color: AppColors.card, clipBehavior: Clip.antiAlias,
clipBehavior: Clip.antiAlias, borderRadius: const BorderRadius.vertical(
borderRadius: const BorderRadius.vertical( top: Radius.circular(_sheetRadius),
top: Radius.circular(_sheetRadius), ),
), child: SafeArea(
child: SafeArea( top: false,
top: false,
child: Padding(
padding: EdgeInsets.only(bottom: _pinnedKeyboardInset),
child: Padding( child: Padding(
key: const Key('comment-composer-sheet'), padding: EdgeInsets.only(bottom: _pinnedKeyboardInset),
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12), child: Padding(
child: TextFieldTapRegion( key: const Key('comment-composer-sheet'),
child: Column( padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
mainAxisSize: MainAxisSize.min, child: TextFieldTapRegion(
crossAxisAlignment: CrossAxisAlignment.stretch, child: Column(
children: [ mainAxisSize: MainAxisSize.min,
if (widget.replyTo != null) crossAxisAlignment: CrossAxisAlignment.stretch,
Padding( children: [
padding: const EdgeInsets.only(bottom: 8), if (widget.replyTo != null)
child: Text( Padding(
l10n.replyingTo( padding: const EdgeInsets.only(bottom: 8),
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),
),
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,
),
cursorColor: AppColors.blue,
decoration: InputDecoration(
hintText: signedIn
? l10n.writeComment
: l10n.commentLoginHint,
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 : _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( child: Text(
l10n.postComment, l10n.replyingTo(
widget.replyTo!.nickname.isEmpty
? l10n.anonymousUser
: widget.replyTo!.nickname,
),
style: const TextStyle( style: const TextStyle(
color: AppColors.muted,
fontSize: 12,
),
),
),
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,
),
cursorColor: AppColors.blue,
decoration: InputDecoration(
hintText: signedIn
? l10n.writeComment
: l10n.commentLoginHint,
hintStyle: const TextStyle(
color: AppColors.muted,
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w600, ),
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,
),
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,
),
), ),
), ),
), ),
), ),
), ],
], ),
), ),
), ),
), ),
@@ -261,8 +303,8 @@ class _CommentComposerSheetState extends State<CommentComposerSheet> {
), ),
), ),
), ),
), ],
], ),
); );
} }
} }
test/comment/drama_comments_sheet_test.dart
+46
View File
@@ -2,7 +2,9 @@
import 'dart:convert'; import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import 'package:fruitshorts/core/data/models/comment.dart'; import 'package:fruitshorts/core/data/models/comment.dart';
import 'package:fruitshorts/core/data/models/drama.dart'; import 'package:fruitshorts/core/data/models/drama.dart';
@@ -33,6 +35,50 @@ const _drama = Drama(
); );
void main() { void main() {
testWidgets('should_ignore_stale_keyboard_inset_when_composer_opens', (
tester,
) async {
const keyboardChannel = MethodChannel('com.stormg.lumadrama/keyboard');
debugDefaultTargetPlatformOverride = TargetPlatform.android;
tester.binding.defaultBinaryMessenger.setMockMethodCallHandler(
keyboardChannel,
(call) async => call.method == 'get' ? 300 : null,
);
addTearDown(() {
tester.binding.defaultBinaryMessenger.setMockMethodCallHandler(
keyboardChannel,
null,
);
debugDefaultTargetPlatformOverride = null;
});
tester.view.physicalSize = const Size(390, 844);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.resetPhysicalSize);
addTearDown(tester.view.resetDevicePixelRatio);
final repository = FakeCommentRepository(pages: [const CommentPage()]);
await _pumpSheet(tester, repository: repository);
await tester.tap(find.byKey(const Key('comment-input-placeholder')));
await tester.pumpAndSettle();
final composer = find.byKey(const Key('comment-composer-sheet'));
final panel = find.byKey(const Key('comment-composer-panel'));
final input = find.byKey(const Key('comment-composer-input'));
expect(
find.byKey(const Key('comment-composer-focus-scope')),
findsOneWidget,
);
expect(tester.getSize(composer).height, inInclusiveRange(100, 150));
expect(
tester.getSize(panel).height,
closeTo(tester.getSize(composer).height, 1),
);
expect(tester.getBottomLeft(panel).dy, closeTo(844, 0.1));
expect(tester.widget<TextField>(input).focusNode?.hasFocus, isTrue);
expect(tester.testTextInput.isVisible, isTrue);
debugDefaultTargetPlatformOverride = null;
});
setUp(() { setUp(() {
SharedPreferencesAsyncPlatform.instance = SharedPreferencesAsyncPlatform.instance =
InMemorySharedPreferencesAsync.withData({ InMemorySharedPreferencesAsync.withData({