merge: 合并 K86.6 评论输入聚焦修复
This commit is contained in:
commit
33b49c161a
4 files changed
+399
-280
No files matched your search
@@ -8,6 +8,8 @@ import android.content.res.Configuration
|
|||||||
import android.os.Build
|
import android.os.Build
|
||||||
import android.util.Rational
|
import android.util.Rational
|
||||||
import android.content.pm.PackageManager
|
import android.content.pm.PackageManager
|
||||||
|
import androidx.core.view.ViewCompat
|
||||||
|
import androidx.core.view.WindowInsetsCompat
|
||||||
import io.flutter.embedding.android.FlutterActivity
|
import io.flutter.embedding.android.FlutterActivity
|
||||||
import io.flutter.embedding.engine.FlutterEngine
|
import io.flutter.embedding.engine.FlutterEngine
|
||||||
import io.flutter.plugin.common.MethodChannel
|
import io.flutter.plugin.common.MethodChannel
|
||||||
@@ -16,6 +18,8 @@ class MainActivity : FlutterActivity() {
|
|||||||
private val shareRequestCode = 9041
|
private val shareRequestCode = 9041
|
||||||
private var pendingShare: MethodChannel.Result? = null
|
private var pendingShare: MethodChannel.Result? = null
|
||||||
private var pipChannel: MethodChannel? = null
|
private var pipChannel: MethodChannel? = null
|
||||||
|
private var keyboardChannel: MethodChannel? = null
|
||||||
|
private var imeInset = 0
|
||||||
|
|
||||||
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
|
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
|
||||||
super.configureFlutterEngine(flutterEngine)
|
super.configureFlutterEngine(flutterEngine)
|
||||||
@@ -62,6 +66,37 @@ class MainActivity : FlutterActivity() {
|
|||||||
result.error("share_failed", error.message, null)
|
result.error("share_failed", error.message, null)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
keyboardChannel = MethodChannel(
|
||||||
|
flutterEngine.dartExecutor.binaryMessenger,
|
||||||
|
"com.stormg.lumadrama/keyboard"
|
||||||
|
)
|
||||||
|
keyboardChannel?.setMethodCallHandler { call, result ->
|
||||||
|
if (call.method != "get") {
|
||||||
|
result.notImplemented()
|
||||||
|
return@setMethodCallHandler
|
||||||
|
}
|
||||||
|
val inset = currentImeInset()
|
||||||
|
emitImeInset(inset)
|
||||||
|
result.success(inset)
|
||||||
|
}
|
||||||
|
val decorView = window.decorView
|
||||||
|
ViewCompat.setOnApplyWindowInsetsListener(decorView) { view, insets ->
|
||||||
|
emitImeInset(insets.getInsets(WindowInsetsCompat.Type.ime()).bottom)
|
||||||
|
ViewCompat.onApplyWindowInsets(view, insets)
|
||||||
|
}
|
||||||
|
ViewCompat.requestApplyInsets(decorView)
|
||||||
|
}
|
||||||
|
|
||||||
|
private fun currentImeInset(): Int =
|
||||||
|
ViewCompat.getRootWindowInsets(window.decorView)
|
||||||
|
?.getInsets(WindowInsetsCompat.Type.ime())
|
||||||
|
?.bottom
|
||||||
|
?: 0
|
||||||
|
|
||||||
|
private fun emitImeInset(value: Int) {
|
||||||
|
if (value == imeInset) return
|
||||||
|
imeInset = value
|
||||||
|
keyboardChannel?.invokeMethod("insetsChanged", value)
|
||||||
}
|
}
|
||||||
|
|
||||||
override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean, newConfig: Configuration) {
|
override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean, newConfig: Configuration) {
|
||||||
@@ -77,4 +112,11 @@ class MainActivity : FlutterActivity() {
|
|||||||
pendingShare = null
|
pendingShare = null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
override fun onDestroy() {
|
||||||
|
ViewCompat.setOnApplyWindowInsetsListener(window.decorView, null)
|
||||||
|
keyboardChannel?.setMethodCallHandler(null)
|
||||||
|
keyboardChannel = null
|
||||||
|
super.onDestroy()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
// Author: fruit.com.cn
|
||||||
|
|
||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
import 'package:flutter/services.dart';
|
||||||
|
|
||||||
|
/// Provides the Android IME height even when `adjustNothing` keeps
|
||||||
|
/// `MediaQuery.viewInsets` at zero.
|
||||||
|
class KeyboardInsetNotifier extends ChangeNotifier {
|
||||||
|
KeyboardInsetNotifier._();
|
||||||
|
|
||||||
|
static final KeyboardInsetNotifier instance = KeyboardInsetNotifier._();
|
||||||
|
static const MethodChannel _channel = MethodChannel(
|
||||||
|
'com.stormg.lumadrama/keyboard',
|
||||||
|
);
|
||||||
|
|
||||||
|
/// Raw physical-pixel inset reported by Android.
|
||||||
|
int _inset = 0;
|
||||||
|
bool _started = false;
|
||||||
|
|
||||||
|
int get value => _inset;
|
||||||
|
|
||||||
|
Future<void> start() async {
|
||||||
|
if (_started || kIsWeb || defaultTargetPlatform != TargetPlatform.android) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
_started = true;
|
||||||
|
_channel.setMethodCallHandler((call) async {
|
||||||
|
if (call.method != 'insetsChanged') return;
|
||||||
|
_update(call.arguments);
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
_update(await _channel.invokeMethod<Object?>('get'));
|
||||||
|
} catch (_) {
|
||||||
|
// Tests and non-embedded Android hosts may not provide the channel.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void _update(Object? value) {
|
||||||
|
final next = switch (value) {
|
||||||
|
int value => value,
|
||||||
|
num value => value.round(),
|
||||||
|
_ => 0,
|
||||||
|
};
|
||||||
|
if (next == _inset) return;
|
||||||
|
_inset = next;
|
||||||
|
notifyListeners();
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
// Author: fruit.com.cn
|
// Author: fruit.com.cn
|
||||||
|
|
||||||
import 'dart:async';
|
import 'dart:async';
|
||||||
|
import 'dart:math' as math;
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:provider/provider.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/data/services/auth_controller.dart';
|
||||||
import '../../../core/formatting/error_text.dart';
|
import '../../../core/formatting/error_text.dart';
|
||||||
import '../../../core/platform/haptics.dart';
|
import '../../../core/platform/haptics.dart';
|
||||||
|
import '../../../core/platform/keyboard_inset.dart';
|
||||||
import '../../../core/theme/app_colors.dart';
|
import '../../../core/theme/app_colors.dart';
|
||||||
import '../../../core/widgets/auth_gate.dart';
|
import '../../../core/widgets/auth_gate.dart';
|
||||||
import '../../../core/widgets/empty_state.dart';
|
import '../../../core/widgets/empty_state.dart';
|
||||||
@@ -43,20 +45,26 @@ class DramaCommentsSheet extends StatefulWidget {
|
|||||||
State<DramaCommentsSheet> createState() => _DramaCommentsSheetState();
|
State<DramaCommentsSheet> createState() => _DramaCommentsSheetState();
|
||||||
}
|
}
|
||||||
|
|
||||||
class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
class _DramaCommentsSheetState extends State<DramaCommentsSheet>
|
||||||
|
with WidgetsBindingObserver {
|
||||||
final _input = TextEditingController();
|
final _input = TextEditingController();
|
||||||
final _inputFocus = FocusNode();
|
final _inputFocus = FocusNode();
|
||||||
|
final _keyboardInset = KeyboardInsetNotifier.instance;
|
||||||
late final CommentRepository _comments;
|
late final CommentRepository _comments;
|
||||||
late final CommentController _controller;
|
late final CommentController _controller;
|
||||||
DramaComment? _replyTo;
|
DramaComment? _replyTo;
|
||||||
int? _serverCount;
|
int? _serverCount;
|
||||||
int _countRequest = 0;
|
int _countRequest = 0;
|
||||||
|
bool _keyboardWasVisible = false;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
super.initState();
|
super.initState();
|
||||||
|
WidgetsBinding.instance.addObserver(this);
|
||||||
_inputFocus.addListener(_onFocusChanged);
|
_inputFocus.addListener(_onFocusChanged);
|
||||||
_input.addListener(_onInputChanged);
|
_input.addListener(_onInputChanged);
|
||||||
|
_keyboardInset.addListener(_onKeyboardInsetChanged);
|
||||||
|
unawaited(_keyboardInset.start());
|
||||||
_comments = context.read<CommentRepository>();
|
_comments = context.read<CommentRepository>();
|
||||||
_controller = CommentController(
|
_controller = CommentController(
|
||||||
comments: _comments,
|
comments: _comments,
|
||||||
@@ -69,6 +77,8 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
void dispose() {
|
void dispose() {
|
||||||
|
WidgetsBinding.instance.removeObserver(this);
|
||||||
|
_keyboardInset.removeListener(_onKeyboardInsetChanged);
|
||||||
_inputFocus.removeListener(_onFocusChanged);
|
_inputFocus.removeListener(_onFocusChanged);
|
||||||
_input.removeListener(_onInputChanged);
|
_input.removeListener(_onInputChanged);
|
||||||
_controller.dispose();
|
_controller.dispose();
|
||||||
@@ -85,6 +95,45 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
|||||||
if (mounted) setState(() {});
|
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 {
|
Future<void> _post() async {
|
||||||
if (_controller.submitting) return;
|
if (_controller.submitting) return;
|
||||||
if (!await ensureSignedIn(context) || !mounted) return;
|
if (!await ensureSignedIn(context) || !mounted) return;
|
||||||
@@ -145,142 +194,50 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
|||||||
final maxHeight = screenLimit < _maxSheetHeight
|
final maxHeight = screenLimit < _maxSheetHeight
|
||||||
? screenLimit
|
? screenLimit
|
||||||
: _maxSheetHeight;
|
: _maxSheetHeight;
|
||||||
if (_inputFocus.hasFocus) {
|
final focused = _inputFocus.hasFocus;
|
||||||
return _expandedComposer(context, maxHeight);
|
final keyboardHeight = _keyboardHeight(context);
|
||||||
}
|
|
||||||
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;
|
|
||||||
return AnimatedPadding(
|
return AnimatedPadding(
|
||||||
duration: const Duration(milliseconds: 150),
|
duration: const Duration(milliseconds: 150),
|
||||||
curve: Curves.easeOut,
|
curve: Curves.easeOut,
|
||||||
padding: EdgeInsets.only(bottom: MediaQuery.viewInsetsOf(context).bottom),
|
padding: EdgeInsets.only(bottom: focused ? keyboardHeight : 0),
|
||||||
child: Container(
|
child: GestureDetector(
|
||||||
key: const Key('player-comments-sheet'),
|
behavior: HitTestBehavior.translucent,
|
||||||
decoration: const BoxDecoration(
|
onTap: focused ? _inputFocus.unfocus : null,
|
||||||
color: AppColors.card,
|
child: Container(
|
||||||
borderRadius: BorderRadius.vertical(
|
key: const Key('player-comments-sheet'),
|
||||||
top: Radius.circular(_sheetRadius),
|
decoration: const BoxDecoration(
|
||||||
|
color: AppColors.card,
|
||||||
|
borderRadius: BorderRadius.vertical(
|
||||||
|
top: Radius.circular(_sheetRadius),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
child: SafeArea(
|
||||||
child: SafeArea(
|
top: false,
|
||||||
top: false,
|
child: ListenableBuilder(
|
||||||
child: ConstrainedBox(
|
listenable: _controller,
|
||||||
constraints: BoxConstraints(maxHeight: maxHeight),
|
builder: (context, _) {
|
||||||
child: Padding(
|
final minHeight = !focused && _controller.comments.isEmpty
|
||||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
|
? (_minSheetHeight < maxHeight
|
||||||
child: Column(
|
? _minSheetHeight
|
||||||
key: const Key('comment-expanded-composer'),
|
: maxHeight)
|
||||||
mainAxisSize: MainAxisSize.min,
|
: 0.0;
|
||||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
return ConstrainedBox(
|
||||||
children: [
|
key: const Key('comment-sheet-constraints'),
|
||||||
if (_replyTo != null) _replyBanner(l10n, _replyTo!),
|
constraints: BoxConstraints(
|
||||||
Container(
|
minHeight: minHeight,
|
||||||
decoration: BoxDecoration(
|
maxHeight: maxHeight,
|
||||||
color: AppColors.commentInput,
|
),
|
||||||
borderRadius: BorderRadius.circular(_expandedInputRadius),
|
child: Padding(
|
||||||
),
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
child: TextField(
|
child: _content(
|
||||||
key: const Key('comment-input'),
|
context,
|
||||||
controller: _input,
|
maxHeight: maxHeight,
|
||||||
focusNode: _inputFocus,
|
focused: focused,
|
||||||
autofocus: true,
|
keyboardHeight: keyboardHeight,
|
||||||
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,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
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 l10n = AppLocalizations.of(context)!;
|
||||||
final count = _serverCount ?? _controller.exactCount;
|
final count = _serverCount ?? _controller.exactCount;
|
||||||
final replyReserve = _replyTo == null ? 0.0 : _replyBannerHeight;
|
final replyReserve = _replyTo == null ? 0.0 : _replyBannerHeight;
|
||||||
@@ -298,83 +260,72 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
|||||||
_composerHeight -
|
_composerHeight -
|
||||||
_composerTopGap -
|
_composerTopGap -
|
||||||
replyReserve;
|
replyReserve;
|
||||||
return Stack(
|
return Column(
|
||||||
|
key: const Key('comment-sheet-content'),
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
Column(
|
SizedBox(
|
||||||
key: const Key('comment-sheet-content'),
|
height: focused ? 0 : _headerHeight,
|
||||||
mainAxisSize: MainAxisSize.min,
|
width: double.infinity,
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
child: focused
|
||||||
children: [
|
? null
|
||||||
SizedBox(
|
: Stack(
|
||||||
height: _headerHeight,
|
alignment: Alignment.center,
|
||||||
width: double.infinity,
|
children: [
|
||||||
child: Stack(
|
Text(
|
||||||
alignment: Alignment.center,
|
count == null
|
||||||
children: [
|
? l10n.comments
|
||||||
Text(
|
: l10n.commentsWithCount(count),
|
||||||
count == null
|
key: const Key('comment-count-label'),
|
||||||
? l10n.comments
|
textAlign: TextAlign.center,
|
||||||
: l10n.commentsWithCount(count),
|
style: const TextStyle(
|
||||||
key: const Key('comment-count-label'),
|
color: AppColors.onSurface,
|
||||||
textAlign: TextAlign.center,
|
fontSize: 16,
|
||||||
style: const TextStyle(
|
fontWeight: FontWeight.w600,
|
||||||
color: AppColors.onSurface,
|
),
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
),
|
||||||
),
|
Positioned(
|
||||||
Positioned(
|
left: 0,
|
||||||
left: 0,
|
child: SizedBox.square(
|
||||||
child: SizedBox.square(
|
dimension: 44,
|
||||||
dimension: 44,
|
child: IconButton(
|
||||||
child: IconButton(
|
key: const Key('player-comments-close'),
|
||||||
key: const Key('player-comments-close'),
|
tooltip: l10n.close,
|
||||||
tooltip: l10n.close,
|
padding: EdgeInsets.zero,
|
||||||
padding: EdgeInsets.zero,
|
onPressed: () => Navigator.pop(context),
|
||||||
onPressed: () => Navigator.pop(context),
|
icon: const Icon(
|
||||||
icon: const Icon(
|
Icons.keyboard_arrow_down_rounded,
|
||||||
Icons.keyboard_arrow_down_rounded,
|
size: 24,
|
||||||
size: 24,
|
color: AppColors.cream,
|
||||||
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(
|
ConstrainedBox(
|
||||||
left: 0,
|
constraints: BoxConstraints(
|
||||||
right: 0,
|
maxHeight: focused || listMaxHeight < 0 ? 0 : listMaxHeight,
|
||||||
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),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
|
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) {
|
Widget _list(AppLocalizations l10n, {required double keyboardHeight}) {
|
||||||
final keyboardHeight = MediaQuery.viewInsetsOf(context).bottom;
|
|
||||||
if (_controller.loading && _controller.comments.isEmpty) {
|
if (_controller.loading && _controller.comments.isEmpty) {
|
||||||
return const Padding(
|
return const Padding(
|
||||||
padding: EdgeInsets.only(top: 4),
|
padding: EdgeInsets.only(top: 4),
|
||||||
@@ -472,9 +423,11 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
|||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
InputDecoration _composerDecoration(String hint) {
|
InputDecoration _composerDecoration(String hint, {required bool focused}) {
|
||||||
const radius = BorderRadius.all(Radius.circular(_composerRadius));
|
final radius = BorderRadius.circular(
|
||||||
const clear = OutlineInputBorder(
|
focused ? _expandedInputRadius : _composerRadius,
|
||||||
|
);
|
||||||
|
final clear = OutlineInputBorder(
|
||||||
borderRadius: radius,
|
borderRadius: radius,
|
||||||
borderSide: BorderSide.none,
|
borderSide: BorderSide.none,
|
||||||
);
|
);
|
||||||
@@ -482,7 +435,10 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
|
|||||||
hintText: hint,
|
hintText: hint,
|
||||||
hintStyle: const TextStyle(color: AppColors.muted, fontSize: 14),
|
hintStyle: const TextStyle(color: AppColors.muted, fontSize: 14),
|
||||||
counterText: '',
|
counterText: '',
|
||||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
|
contentPadding: EdgeInsets.symmetric(
|
||||||
|
horizontal: 16,
|
||||||
|
vertical: focused ? 12 : 0,
|
||||||
|
),
|
||||||
isDense: true,
|
isDense: true,
|
||||||
border: clear,
|
border: clear,
|
||||||
enabledBorder: 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 signedIn = context.watch<AuthController>().isSignedIn;
|
||||||
|
final hasContent = _input.text.trim().isNotEmpty;
|
||||||
|
final canPost = signedIn && hasContent && !_controller.submitting;
|
||||||
return Container(
|
return Container(
|
||||||
key: const Key('comment-composer'),
|
key: const Key('comment-composer'),
|
||||||
height: _composerHeight,
|
padding: focused ? EdgeInsets.zero : const EdgeInsets.only(right: 3),
|
||||||
padding: const EdgeInsets.only(right: 3),
|
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: AppColors.commentInput,
|
color: focused ? Colors.transparent : AppColors.commentInput,
|
||||||
borderRadius: BorderRadius.circular(_composerRadius),
|
borderRadius: BorderRadius.circular(focused ? 0 : _composerRadius),
|
||||||
),
|
),
|
||||||
child: Row(
|
child: TextFieldTapRegion(
|
||||||
children: [
|
child: Column(
|
||||||
Expanded(
|
mainAxisSize: MainAxisSize.min,
|
||||||
child: SizedBox(
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||||
height: _composerHeight,
|
children: [
|
||||||
child: TextField(
|
AnimatedContainer(
|
||||||
key: const Key('comment-input'),
|
key: const Key('comment-input-surface'),
|
||||||
controller: _input,
|
duration: const Duration(milliseconds: 150),
|
||||||
focusNode: _inputFocus,
|
curve: Curves.easeOut,
|
||||||
readOnly: !signedIn,
|
decoration: BoxDecoration(
|
||||||
canRequestFocus: signedIn,
|
color: focused ? AppColors.commentInput : Colors.transparent,
|
||||||
maxLength: _maxCommentLength,
|
borderRadius: BorderRadius.circular(
|
||||||
maxLines: 1,
|
focused ? _expandedInputRadius : _composerRadius,
|
||||||
textAlignVertical: TextAlignVertical.center,
|
),
|
||||||
style: const TextStyle(color: AppColors.cream, fontSize: 14),
|
),
|
||||||
cursorColor: AppColors.blue,
|
child: SizedBox(
|
||||||
decoration: _composerDecoration(
|
height: focused ? null : _composerHeight,
|
||||||
signedIn ? l10n.writeComment : l10n.commentLoginHint,
|
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(),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
if (focused) ...[
|
||||||
SizedBox.square(
|
const SizedBox(height: 12),
|
||||||
dimension: _sendButtonSize,
|
Align(
|
||||||
child: IconButton.filled(
|
alignment: Alignment.centerRight,
|
||||||
key: const Key('comment-post'),
|
child: SizedBox(
|
||||||
tooltip: l10n.postComment,
|
height: _postButtonHeight,
|
||||||
padding: EdgeInsets.zero,
|
child: TextButton(
|
||||||
iconSize: 18,
|
key: const Key('comment-post'),
|
||||||
onPressed: _controller.submitting ? null : _post,
|
onPressed: canPost ? _post : null,
|
||||||
icon: _controller.submitting
|
style: TextButton.styleFrom(
|
||||||
? const SizedBox.square(
|
minimumSize: const Size(0, _postButtonHeight),
|
||||||
dimension: 16,
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
child: CircularProgressIndicator(strokeWidth: 2),
|
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||||
)
|
backgroundColor: hasContent
|
||||||
: const Icon(Icons.send_rounded),
|
? 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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -246,7 +246,7 @@ void main() {
|
|||||||
|
|
||||||
expect(tester.widget<TextField>(input).controller?.text, isEmpty);
|
expect(tester.widget<TextField>(input).controller?.text, isEmpty);
|
||||||
expect(tester.widget<TextField>(input).focusNode?.hasFocus, isTrue);
|
expect(tester.widget<TextField>(input).focusNode?.hasFocus, isTrue);
|
||||||
expect(find.byKey(const Key('comment-expanded-composer')), findsOneWidget);
|
expect(tester.widget<TextField>(input).maxLines, 4);
|
||||||
expect(find.byKey(const Key('comment-list')), findsNothing);
|
expect(find.byKey(const Key('comment-list')), findsNothing);
|
||||||
expect(
|
expect(
|
||||||
tester
|
tester
|
||||||
@@ -275,14 +275,27 @@ void main() {
|
|||||||
|
|
||||||
await _pumpSheet(tester, repository: repository);
|
await _pumpSheet(tester, repository: repository);
|
||||||
expect(find.byKey(const Key('comment-list')), findsOneWidget);
|
expect(find.byKey(const Key('comment-list')), findsOneWidget);
|
||||||
|
final editableBefore = tester.state<EditableTextState>(
|
||||||
|
find.descendant(
|
||||||
|
of: find.byKey(const Key('comment-input')),
|
||||||
|
matching: find.byType(EditableText),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
await tester.tap(find.byKey(const Key('comment-input')));
|
await tester.tap(find.byKey(const Key('comment-input')));
|
||||||
await tester.pumpAndSettle();
|
await tester.pumpAndSettle();
|
||||||
|
|
||||||
expect(find.byKey(const Key('comment-list')), findsNothing);
|
expect(find.byKey(const Key('comment-list')), findsNothing);
|
||||||
expect(find.byKey(const Key('comment-count-label')), findsNothing);
|
expect(find.byKey(const Key('comment-count-label')), findsNothing);
|
||||||
expect(find.byKey(const Key('comment-composer')), findsNothing);
|
expect(find.byKey(const Key('comment-composer')), findsOneWidget);
|
||||||
expect(find.byKey(const Key('comment-expanded-composer')), findsOneWidget);
|
expect(find.byKey(const Key('comment-input-surface')), findsOneWidget);
|
||||||
|
final editableAfter = tester.state<EditableTextState>(
|
||||||
|
find.descendant(
|
||||||
|
of: find.byKey(const Key('comment-input')),
|
||||||
|
matching: find.byType(EditableText),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
expect(identical(editableBefore, editableAfter), isTrue);
|
||||||
final field = tester.widget<TextField>(
|
final field = tester.widget<TextField>(
|
||||||
find.byKey(const Key('comment-input')),
|
find.byKey(const Key('comment-input')),
|
||||||
);
|
);
|
||||||
@@ -313,17 +326,35 @@ void main() {
|
|||||||
tester.view.viewInsets = const FakeViewPadding(bottom: 180);
|
tester.view.viewInsets = const FakeViewPadding(bottom: 180);
|
||||||
await tester.pump();
|
await tester.pump();
|
||||||
await tester.pump(const Duration(milliseconds: 160));
|
await tester.pump(const Duration(milliseconds: 160));
|
||||||
|
expect(find.byKey(const Key('player-comments-sheet')), findsOneWidget);
|
||||||
|
expect(find.byKey(const Key('comment-list')), findsNothing);
|
||||||
expect(
|
expect(
|
||||||
tester.getBottomLeft(find.byKey(const Key('player-comments-sheet'))).dy,
|
tester.getBottomLeft(find.byKey(const Key('player-comments-sheet'))).dy,
|
||||||
closeTo(844 - 180, 0.1),
|
closeTo(844 - 180, 0.1),
|
||||||
);
|
);
|
||||||
|
expect(
|
||||||
|
tester.getBottomLeft(find.byKey(const Key('comment-input'))).dy,
|
||||||
|
lessThanOrEqualTo(844 - 180),
|
||||||
|
);
|
||||||
|
|
||||||
tester.view.viewInsets = const FakeViewPadding();
|
tester.view.viewInsets = const FakeViewPadding();
|
||||||
FocusManager.instance.primaryFocus?.unfocus();
|
|
||||||
await tester.pumpAndSettle();
|
await tester.pumpAndSettle();
|
||||||
expect(find.byKey(const Key('comment-expanded-composer')), findsNothing);
|
|
||||||
expect(find.byKey(const Key('comment-list')), findsOneWidget);
|
expect(find.byKey(const Key('comment-list')), findsOneWidget);
|
||||||
expect(find.byKey(const Key('comment-composer')), findsOneWidget);
|
expect(find.byKey(const Key('comment-composer')), findsOneWidget);
|
||||||
|
expect(
|
||||||
|
tester
|
||||||
|
.widget<TextField>(find.byKey(const Key('comment-input')))
|
||||||
|
.controller
|
||||||
|
?.text,
|
||||||
|
'Nice',
|
||||||
|
);
|
||||||
|
expect(
|
||||||
|
tester
|
||||||
|
.widget<TextField>(find.byKey(const Key('comment-input')))
|
||||||
|
.focusNode
|
||||||
|
?.hasFocus,
|
||||||
|
isFalse,
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('should_use_polished_comment_sizes', (tester) async {
|
testWidgets('should_use_polished_comment_sizes', (tester) async {
|
||||||
@@ -482,37 +513,6 @@ void main() {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('should_keep_sheet_fixed_and_move_only_composer_for_keyboard', (
|
|
||||||
tester,
|
|
||||||
) async {
|
|
||||||
tester.view.physicalSize = const Size(390, 844);
|
|
||||||
tester.view.devicePixelRatio = 1;
|
|
||||||
addTearDown(tester.view.resetPhysicalSize);
|
|
||||||
addTearDown(tester.view.resetDevicePixelRatio);
|
|
||||||
addTearDown(tester.view.resetViewInsets);
|
|
||||||
final repository = FakeCommentRepository(
|
|
||||||
pages: [CommentPage(comments: _comments(30))],
|
|
||||||
);
|
|
||||||
|
|
||||||
await _pumpSheet(tester, repository: repository);
|
|
||||||
final sheet = find.byKey(const Key('player-comments-sheet'));
|
|
||||||
final input = find.byKey(const Key('comment-composer'));
|
|
||||||
final first = find.byKey(const Key('comment-item-10'));
|
|
||||||
final sheetTop = tester.getTopLeft(sheet).dy;
|
|
||||||
final inputTop = tester.getTopLeft(input).dy;
|
|
||||||
final inputBottom = tester.getBottomLeft(input).dy;
|
|
||||||
final firstTop = tester.getTopLeft(first).dy;
|
|
||||||
|
|
||||||
tester.view.viewInsets = const FakeViewPadding(bottom: 180);
|
|
||||||
await tester.pump();
|
|
||||||
await tester.pump(const Duration(milliseconds: 160));
|
|
||||||
|
|
||||||
expect(tester.getTopLeft(sheet).dy, closeTo(sheetTop, 0.1));
|
|
||||||
expect(tester.getTopLeft(first).dy, closeTo(firstTop, 0.1));
|
|
||||||
expect(tester.getTopLeft(input).dy, lessThan(inputTop - 100));
|
|
||||||
expect(tester.getBottomLeft(input).dy, closeTo(inputBottom - 180, 0.1));
|
|
||||||
});
|
|
||||||
|
|
||||||
testWidgets('should_hide_comment_like_controls', (tester) async {
|
testWidgets('should_hide_comment_like_controls', (tester) async {
|
||||||
final repository = FakeCommentRepository(
|
final repository = FakeCommentRepository(
|
||||||
pages: [
|
pages: [
|
||||||
|
|||||||
Reference in new issue
Block a user