fix(player): 评论入口改为假输入框点击唤起
This commit is contained in:
Zhou Weidong committed
1 parent
a142a6c318
commit
425ea4c0b7
3 files changed
+236
-176
No files matched your search
@@ -106,12 +106,14 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
||||
);
|
||||
|
||||
void _measureSheetWithoutKeyboard(double keyboardHeight) {
|
||||
if (keyboardHeight > 0 || _sheetMeasureScheduled) return;
|
||||
if (keyboardHeight > 0 || _inputFocus.hasFocus || _sheetMeasureScheduled) {
|
||||
return;
|
||||
}
|
||||
_sheetMeasureScheduled = true;
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_sheetMeasureScheduled = false;
|
||||
if (!mounted) return;
|
||||
if (_keyboardHeight(context) > 0) return;
|
||||
if (_inputFocus.hasFocus || _keyboardHeight(context) > 0) return;
|
||||
final box = _sheetMeasureKey.currentContext?.findRenderObject();
|
||||
if (box is! RenderBox || !box.hasSize) return;
|
||||
final height = box.size.height;
|
||||
@@ -195,7 +197,7 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
||||
final inputFocused = _inputFocus.hasFocus;
|
||||
final keyboardHeight = _keyboardHeight(context);
|
||||
final keyboardOpen = keyboardHeight > 0;
|
||||
final expanded = inputFocused && keyboardOpen;
|
||||
final expanded = inputFocused;
|
||||
final availableHeight = math.max(0.0, screenLimit - keyboardHeight);
|
||||
final keyboardPanelHeight = math.min(
|
||||
_sheetHeightWithoutKeyboard ?? maxHeight,
|
||||
@@ -221,10 +223,9 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () {},
|
||||
child: SizedBox(
|
||||
key: _sheetMeasureKey,
|
||||
child: KeyedSubtree(
|
||||
key: const Key('player-comments-sheet'),
|
||||
child: Container(
|
||||
key: const Key('player-comments-sheet'),
|
||||
decoration: const BoxDecoration(
|
||||
color: AppColors.card,
|
||||
borderRadius: BorderRadius.vertical(
|
||||
@@ -245,24 +246,27 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeOut,
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: ConstrainedBox(
|
||||
child: KeyedSubtree(
|
||||
key: const Key('comment-sheet-constraints'),
|
||||
constraints: keyboardOpen
|
||||
? BoxConstraints.tightFor(
|
||||
height: keyboardPanelHeight,
|
||||
)
|
||||
: BoxConstraints(
|
||||
minHeight: minHeight,
|
||||
maxHeight: maxHeight,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
),
|
||||
child: _content(
|
||||
context,
|
||||
expanded: expanded,
|
||||
keyboardHeight: keyboardHeight,
|
||||
child: ConstrainedBox(
|
||||
key: _sheetMeasureKey,
|
||||
constraints: keyboardOpen
|
||||
? BoxConstraints.tightFor(
|
||||
height: keyboardPanelHeight,
|
||||
)
|
||||
: BoxConstraints(
|
||||
minHeight: minHeight,
|
||||
maxHeight: maxHeight,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
),
|
||||
child: _content(
|
||||
context,
|
||||
expanded: expanded,
|
||||
keyboardHeight: keyboardHeight,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -476,132 +480,158 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
||||
);
|
||||
}
|
||||
|
||||
void _activateComposer(bool signedIn) {
|
||||
if (signedIn) {
|
||||
_inputFocus.requestFocus();
|
||||
return;
|
||||
}
|
||||
unawaited(_authenticateForComment());
|
||||
}
|
||||
|
||||
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'),
|
||||
padding: focused ? EdgeInsets.zero : const EdgeInsets.only(right: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: focused ? Colors.transparent : AppColors.commentInput,
|
||||
borderRadius: BorderRadius.circular(focused ? 0 : _composerRadius),
|
||||
),
|
||||
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,
|
||||
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),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Offstage(
|
||||
offstage: focused,
|
||||
child: _fakeComposer(l10n, signedIn: signedIn),
|
||||
),
|
||||
Offstage(
|
||||
offstage: !focused,
|
||||
child: _realComposer(
|
||||
l10n,
|
||||
signedIn: signedIn,
|
||||
hasContent: hasContent,
|
||||
canPost: canPost,
|
||||
),
|
||||
),
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _fakeComposer(AppLocalizations l10n, {required bool signedIn}) {
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () => _activateComposer(signedIn),
|
||||
child: Container(
|
||||
key: const Key('comment-input-placeholder'),
|
||||
height: _composerHeight,
|
||||
padding: const EdgeInsets.only(right: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.commentInput,
|
||||
borderRadius: BorderRadius.circular(_composerRadius),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 16),
|
||||
child: Text(
|
||||
signedIn ? l10n.writeComment : l10n.commentLoginHint,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(color: AppColors.muted, fontSize: 14),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox.square(
|
||||
dimension: _sendButtonSize,
|
||||
child: IconButton.filled(
|
||||
key: const Key('comment-post'),
|
||||
tooltip: l10n.postComment,
|
||||
padding: EdgeInsets.zero,
|
||||
iconSize: 18,
|
||||
onPressed: () => _activateComposer(signedIn),
|
||||
icon: const Icon(Icons.send_rounded),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _realComposer(
|
||||
AppLocalizations l10n, {
|
||||
required bool signedIn,
|
||||
required bool hasContent,
|
||||
required bool canPost,
|
||||
}) {
|
||||
return 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: AppColors.commentInput,
|
||||
borderRadius: BorderRadius.circular(_expandedInputRadius),
|
||||
),
|
||||
child: TextField(
|
||||
key: const Key('comment-input'),
|
||||
controller: _input,
|
||||
focusNode: _inputFocus,
|
||||
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: _composerDecoration(
|
||||
signedIn ? l10n.writeComment : l10n.commentLoginHint,
|
||||
focused: true,
|
||||
),
|
||||
onTap: signedIn ? null : _authenticateForComment,
|
||||
),
|
||||
),
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CommentThread extends StatelessWidget {
|
||||
|
||||
Reference in new issue
Block a user