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 12:07:30 +08:00
1 parent 97735763a1
commit ab476cab7d
3 files changed
+266 -99
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/player/widgets/comment_tile.dart
+2 -2
View File
@@ -46,7 +46,7 @@ class CommentTile extends StatelessWidget {
: comment.nickname;
return Padding(
key: Key('comment-item-${comment.id}'),
padding: const EdgeInsets.only(top: 12, bottom: 14),
padding: const EdgeInsets.only(top: 10, bottom: 12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -125,7 +125,7 @@ class CommentTile extends StatelessWidget {
),
if (comment.createdAt != null || !isReply)
Padding(
padding: const EdgeInsets.only(top: 6),
padding: const EdgeInsets.only(top: 4),
child: _metadata(context, l10n),
),
],
lib/pages/player/widgets/drama_comments_sheet.dart
+159 -96
View File
@@ -29,6 +29,8 @@ const double _sendButtonSize = 38;
const double _sheetRadius = 20;
const double _headerHeight = 44;
const double _replyIndent = 52;
const double _composerTopGap = 8;
const double _replyBannerHeight = 46;
/// 服务端评论底部弹窗：匿名列表、游标翻页、回复、举报和本人删除。
class DramaCommentsSheet extends StatefulWidget {
@@ -178,114 +180,170 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
@override
Widget build(BuildContext context) {
final available =
MediaQuery.sizeOf(context).height -
MediaQuery.viewInsetsOf(context).bottom -
24;
return Padding(
padding: EdgeInsets.only(bottom: MediaQuery.viewInsetsOf(context).bottom),
child: Container(
key: const Key('player-comments-sheet'),
decoration: const BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.vertical(
top: Radius.circular(_sheetRadius),
),
),
child: SizedBox(
height: available.clamp(_minSheetHeight, _maxSheetHeight),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 4, 12, 12),
child: ListenableBuilder(
listenable: _controller,
builder: (context, _) => _content(context),
final screenLimit = MediaQuery.sizeOf(context).height - 24;
final maxHeight = screenLimit < _maxSheetHeight
? screenLimit
: _maxSheetHeight;
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 _content(BuildContext context) {
Widget _content(BuildContext context, double maxHeight) {
final l10n = AppLocalizations.of(context)!;
final count = _serverCount ?? _controller.exactCount;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
final replyReserve = _replyTo == null ? 0.0 : _replyBannerHeight;
final listMaxHeight =
maxHeight -
_headerHeight -
_composerHeight -
_composerTopGap -
replyReserve;
return Stack(
children: [
SizedBox(
height: _headerHeight,
width: double.infinity,
child: Stack(
alignment: Alignment.center,
children: [
Text(
count == null ? l10n.comments : l10n.commentsWithCount(count),
key: const Key('comment-count-label'),
textAlign: TextAlign.center,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
Positioned(
left: 0,
child: SizedBox.square(
dimension: 44,
child: IconButton(
key: const Key('player-comments-close'),
tooltip: l10n.close,
padding: EdgeInsets.zero,
onPressed: () => Navigator.pop(context),
icon: const Icon(
Icons.keyboard_arrow_down_rounded,
size: 24,
color: AppColors.cream,
Column(
key: const Key('comment-sheet-content'),
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: _headerHeight,
width: double.infinity,
child: Stack(
alignment: Alignment.center,
children: [
Text(
count == null
? l10n.comments
: l10n.commentsWithCount(count),
key: const Key('comment-count-label'),
textAlign: TextAlign.center,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
Positioned(
left: 0,
child: SizedBox.square(
dimension: 44,
child: IconButton(
key: const Key('player-comments-close'),
tooltip: l10n.close,
padding: EdgeInsets.zero,
onPressed: () => Navigator.pop(context),
icon: const Icon(
Icons.keyboard_arrow_down_rounded,
size: 24,
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(
left: 0,
right: 0,
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),
),
),
),
const SizedBox(height: 8),
Expanded(child: _list(l10n)),
if (_replyTo != null) _replyBanner(l10n, _replyTo!),
_composer(l10n),
],
);
}
Widget _list(AppLocalizations l10n) {
final keyboardHeight = MediaQuery.viewInsetsOf(context).bottom;
if (_controller.loading && _controller.comments.isEmpty) {
return const Center(
child: CircularProgressIndicator(key: Key('comment-list-loading')),
return const Padding(
padding: EdgeInsets.only(top: 4),
child: Center(
child: CircularProgressIndicator(key: Key('comment-list-loading')),
),
);
}
if (_controller.error != null && _controller.comments.isEmpty) {
return EmptyState(
key: const Key('comment-list-error'),
icon: Icons.cloud_off_rounded,
title: errorText(l10n, _controller.error, l10n.commentsLoadFailed),
actionLabel: l10n.retry,
actionKey: const Key('comment-list-retry'),
onAction: _controller.load,
compact: true,
return Padding(
padding: const EdgeInsets.only(top: 4),
child: EmptyState(
key: const Key('comment-list-error'),
icon: Icons.cloud_off_rounded,
title: errorText(l10n, _controller.error, l10n.commentsLoadFailed),
actionLabel: l10n.retry,
actionKey: const Key('comment-list-retry'),
onAction: _controller.load,
compact: true,
),
);
}
if (_controller.comments.isEmpty) {
return EmptyState(
key: const Key('comment-list-empty'),
icon: Icons.chat_bubble_outline_rounded,
title: l10n.noComments,
compact: true,
return Padding(
padding: const EdgeInsets.only(top: 4),
child: EmptyState(
key: const Key('comment-list-empty'),
icon: Icons.chat_bubble_outline_rounded,
title: l10n.noComments,
compact: true,
),
);
}
return ListView.builder(
key: const Key('comment-list'),
shrinkWrap: true,
padding: EdgeInsets.only(
top: 4,
bottom: _composerHeight + keyboardHeight,
),
itemCount: _controller.comments.length + 1,
itemBuilder: (context, index) {
if (index == _controller.comments.length) return _footer(l10n);
@@ -319,26 +377,31 @@ class _DramaCommentsSheetState extends State<DramaCommentsSheet> {
return const SizedBox(height: 8);
}
Widget _replyBanner(AppLocalizations l10n, DramaComment replyTo) => Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Row(
children: [
Expanded(
child: Text(
l10n.replyingTo(
replyTo.nickname.isEmpty ? l10n.anonymousUser : replyTo.nickname,
Widget _replyBanner(AppLocalizations l10n, DramaComment replyTo) => SizedBox(
height: _replyBannerHeight,
child: Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Row(
children: [
Expanded(
child: Text(
l10n.replyingTo(
replyTo.nickname.isEmpty
? l10n.anonymousUser
: replyTo.nickname,
),
style: const TextStyle(color: AppColors.muted, fontSize: 12),
),
style: const TextStyle(color: AppColors.muted, fontSize: 12),
),
),
IconButton(
key: const Key('comment-cancel-reply'),
tooltip: l10n.cancelReply,
onPressed: _cancelReply,
visualDensity: VisualDensity.compact,
icon: const Icon(Icons.close_rounded, size: 18),
),
],
IconButton(
key: const Key('comment-cancel-reply'),
tooltip: l10n.cancelReply,
onPressed: _cancelReply,
visualDensity: VisualDensity.compact,
icon: const Icon(Icons.close_rounded, size: 18),
),
],
),
),
);
test/comment/drama_comments_sheet_test.dart
+105 -1
View File
@@ -305,6 +305,101 @@ void main() {
);
});
testWidgets('should_size_short_list_to_content', (tester) async {
tester.view.physicalSize = const Size(390, 844);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.resetPhysicalSize);
addTearDown(tester.view.resetDevicePixelRatio);
final repository = FakeCommentRepository(
pages: [
CommentPage(
comments: [
commentFixture(id: '10', content: 'Short list one'),
commentFixture(id: '11', content: 'Short list two'),
],
),
],
);
await _pumpSheet(tester, repository: repository);
final sheet = find.byKey(const Key('player-comments-sheet'));
expect(tester.getSize(sheet).height, lessThan(520));
final lastCommentBottom = tester
.getBottomLeft(find.byKey(const Key('comment-item-11')))
.dy;
final composerTop = tester
.getTopLeft(find.byKey(const Key('comment-composer')))
.dy;
expect(composerTop - lastCommentBottom, lessThan(80));
});
testWidgets('should_keep_minimum_height_for_empty_state', (tester) async {
final repository = FakeCommentRepository(pages: [const CommentPage()]);
await _pumpSheet(tester, repository: repository);
expect(
tester.getSize(find.byKey(const Key('player-comments-sheet'))).height,
greaterThanOrEqualTo(220),
);
});
testWidgets('should_keep_long_comment_list_scrollable', (tester) async {
tester.view.physicalSize = const Size(390, 844);
tester.view.devicePixelRatio = 1;
addTearDown(tester.view.resetPhysicalSize);
addTearDown(tester.view.resetDevicePixelRatio);
final repository = FakeCommentRepository(
pages: [CommentPage(comments: _comments(30))],
);
await _pumpSheet(tester, repository: repository);
final scrolledComment = find.byKey(const Key('comment-item-12'));
final before = tester.getTopLeft(scrolledComment).dy;
await tester.drag(
find.byKey(const Key('comment-list')),
const Offset(0, -300),
);
await tester.pumpAndSettle();
expect(tester.getTopLeft(scrolledComment).dy, lessThan(before));
expect(
tester.getSize(find.byKey(const Key('player-comments-sheet'))).height,
520,
);
});
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 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));
});
testWidgets('should_hide_comment_like_controls', (tester) async {
final repository = FakeCommentRepository(
pages: [
@@ -560,7 +655,11 @@ Future<AuthController> _pumpSheet(
'/': (_) => const Scaffold(backgroundColor: AppColors.ink),
'/comments': (_) => const Scaffold(
backgroundColor: AppColors.ink,
body: DramaCommentsSheet(drama: _drama),
resizeToAvoidBottomInset: false,
body: Align(
alignment: Alignment.bottomCenter,
child: DramaCommentsSheet(drama: _drama),
),
),
},
),
@@ -602,6 +701,11 @@ Future<AuthController> _auth() async {
return auth;
}
List<DramaComment> _comments(int count) => [
for (var index = 0; index < count; index++)
commentFixture(id: '${index + 10}', content: 'Comment ${index + 1}'),
];
class _TestAuthController extends AuthController {
_TestAuthController(super.api, super.store, {required this._signedIn});