💄 Optimize post reply preview

This commit is contained in:
2025-12-06 13:53:22 +08:00
parent 504e4d55ad
commit 60b8e2bcad

View File

@@ -1,3 +1,5 @@
import 'dart:math' as math;
import 'package:easy_localization/easy_localization.dart'; import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:flutter_hooks/flutter_hooks.dart';
@@ -66,6 +68,7 @@ class PostReplyPreview extends HookConsumerWidget {
final bool isOpenable; final bool isOpenable;
final bool isCompact; final bool isCompact;
final bool isAutoload; final bool isAutoload;
final double? itemMaxWidth;
final VoidCallback? onOpen; final VoidCallback? onOpen;
const PostReplyPreview({ const PostReplyPreview({
super.key, super.key,
@@ -73,6 +76,7 @@ class PostReplyPreview extends HookConsumerWidget {
this.isOpenable = false, this.isOpenable = false,
this.isCompact = false, this.isCompact = false,
this.isAutoload = true, this.isAutoload = true,
this.itemMaxWidth,
this.onOpen, this.onOpen,
}); });
@@ -114,17 +118,22 @@ class PostReplyPreview extends HookConsumerWidget {
return null; return null;
}, [parent]); }, [parent]);
final featuredReply = final featuredReply = isOpenable
isOpenable ? null : ref.watch(postFeaturedReplyProvider(parent.id)); ? null
: ref.watch(postFeaturedReplyProvider(parent.id));
final itemWidget = Widget itemBuilder(double maxWidth) {
isOpenable return isOpenable
? Column( ? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
for (final post in posts.value) for (final post in posts.value)
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
InkWell( InkWell(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: maxWidth),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
spacing: 8, spacing: 8,
@@ -142,12 +151,17 @@ class PostReplyPreview extends HookConsumerWidget {
) )
else else
Expanded( Expanded(
child: Text( child:
Text(
'postHasAttachments', 'postHasAttachments',
).plural(post.attachments.length), style: TextStyle(height: 2),
)
.plural(post.attachments.length)
.padding(top: 2),
), ),
], ],
), ),
),
onTap: () { onTap: () {
onOpen?.call(); onOpen?.call();
context.pushNamed( context.pushNamed(
@@ -162,12 +176,14 @@ class PostReplyPreview extends HookConsumerWidget {
isOpenable: true, isOpenable: true,
isCompact: true, isCompact: true,
isAutoload: false, isAutoload: false,
itemMaxWidth: math.max(maxWidth - 24, 200),
onOpen: onOpen, onOpen: onOpen,
).padding(left: 24), ).padding(left: 24),
], ],
), ),
if (loading.value) if (loading.value)
Row( Row(
mainAxisSize: MainAxisSize.min,
spacing: 8, spacing: 8,
children: [ children: [
SizedBox( SizedBox(
@@ -179,8 +195,9 @@ class PostReplyPreview extends HookConsumerWidget {
], ],
) )
else if (posts.value.length < parent.repliesCount) else if (posts.value.length < parent.repliesCount)
InkWell( GestureDetector(
child: Row( child: Row(
mainAxisSize: MainAxisSize.min,
spacing: 8, spacing: 8,
children: [ children: [
const Icon(Symbols.keyboard_arrow_down, size: 20), const Icon(Symbols.keyboard_arrow_down, size: 20),
@@ -194,8 +211,9 @@ class PostReplyPreview extends HookConsumerWidget {
], ],
) )
: (featuredReply!).map( : (featuredReply!).map(
data: data: (data) => ConstrainedBox(
(data) => Row( constraints: BoxConstraints(maxWidth: maxWidth),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
spacing: 8, spacing: 8,
children: [ children: [
@@ -218,16 +236,15 @@ class PostReplyPreview extends HookConsumerWidget {
), ),
], ],
), ),
error: ),
(e) => Row( error: (e) => Row(
spacing: 8, spacing: 8,
children: [ children: [
const Icon(Symbols.close, size: 18), const Icon(Symbols.close, size: 18),
Text(e.error.toString()), Text(e.error.toString()),
], ],
), ),
loading: loading: (_) => Row(
(_) => Row(
spacing: 8, spacing: 8,
children: [ children: [
SizedBox( SizedBox(
@@ -239,10 +256,10 @@ class PostReplyPreview extends HookConsumerWidget {
], ],
), ),
); );
}
final contentWidget = final contentWidget = isCompact
isCompact ? itemBuilder(itemMaxWidth ?? MediaQuery.of(context).size.width)
? itemWidget
: Container( : Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
@@ -252,8 +269,10 @@ class PostReplyPreview extends HookConsumerWidget {
), ),
borderRadius: BorderRadius.all(Radius.circular(8)), borderRadius: BorderRadius.all(Radius.circular(8)),
), ),
child: Column( child: LayoutBuilder(
crossAxisAlignment: CrossAxisAlignment.stretch, builder: (context, constraints) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 4, spacing: 4,
children: [ children: [
Text('repliesCount') Text('repliesCount')
@@ -261,13 +280,17 @@ class PostReplyPreview extends HookConsumerWidget {
.fontSize(15) .fontSize(15)
.bold() .bold()
.padding(horizontal: 5), .padding(horizontal: 5),
itemWidget, SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: itemBuilder(constraints.maxWidth),
),
], ],
);
},
), ),
); );
return InkWell( return GestureDetector(
borderRadius: const BorderRadius.all(Radius.circular(8)),
onTap: () { onTap: () {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
@@ -479,8 +502,9 @@ class ReferencedPostWidget extends StatelessWidget {
referencePost.description!, referencePost.description!,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
color: color: Theme.of(
Theme.of(context).colorScheme.onSurfaceVariant, context,
).colorScheme.onSurfaceVariant,
), ),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@@ -490,8 +514,7 @@ class ReferencedPostWidget extends StatelessWidget {
content: referencePost.content!, content: referencePost.content!,
textStyle: const TextStyle(fontSize: 14), textStyle: const TextStyle(fontSize: 14),
isSelectable: false, isSelectable: false,
linesMargin: linesMargin: referencePost.type == 0
referencePost.type == 0
? const EdgeInsets.only(bottom: 4) ? const EdgeInsets.only(bottom: 4)
: null, : null,
attachments: item.attachments, attachments: item.attachments,
@@ -537,8 +560,7 @@ class ReferencedPostWidget extends StatelessWidget {
} }
return content.gestures( return content.gestures(
onTap: onTap: () => context.pushNamed(
() => context.pushNamed(
'postDetail', 'postDetail',
pathParameters: {'id': referencePost!.id}, pathParameters: {'id': referencePost!.id},
), ),
@@ -577,8 +599,7 @@ class PostHeader extends StatelessWidget {
spacing: 12, spacing: 12,
children: [ children: [
GestureDetector( GestureDetector(
onTap: onTap: isInteractive
isInteractive
? () { ? () {
context.pushNamed( context.pushNamed(
'publisherProfile', 'publisherProfile',
@@ -627,8 +648,7 @@ class PostHeader extends StatelessWidget {
), ),
if (item.realm == null) if (item.realm == null)
Flexible( Flexible(
child: child: isCompact
isCompact
? const SizedBox.shrink() ? const SizedBox.shrink()
: Text( : Text(
'@${item.publisher.name}', '@${item.publisher.name}',
@@ -734,8 +754,7 @@ class PostBody extends ConsumerWidget {
const Icon(Symbols.label, size: 16).padding(top: 2), const Icon(Symbols.label, size: 16).padding(top: 2),
for (final tag in isFullPost ? item.tags : item.tags.take(3)) for (final tag in isFullPost ? item.tags : item.tags.take(3))
InkWell( InkWell(
onTap: onTap: isInteractive
isInteractive
? () { ? () {
GoRouter.of(context).pushNamed( GoRouter.of(context).pushNamed(
'postTagDetail', 'postTagDetail',
@@ -761,8 +780,7 @@ class PostBody extends ConsumerWidget {
for (final category for (final category
in isFullPost ? item.categories : item.categories.take(2)) in isFullPost ? item.categories : item.categories.take(2))
InkWell( InkWell(
onTap: onTap: isInteractive
isInteractive
? () { ? () {
GoRouter.of(context).pushNamed( GoRouter.of(context).pushNamed(
'postCategoryDetail', 'postCategoryDetail',
@@ -798,8 +816,7 @@ class PostBody extends ConsumerWidget {
hideOverlay hideOverlay
? text ? text
: Tooltip( : Tooltip(
message: message: !isFullPost && isRelativeTime
!isFullPost && isRelativeTime
? item.editedAt!.formatSystem() ? item.editedAt!.formatSystem()
: item.editedAt!.formatRelative(context), : item.editedAt!.formatRelative(context),
child: text, child: text,
@@ -936,8 +953,7 @@ class PostBody extends ConsumerWidget {
], ],
).padding(bottom: 4), ).padding(bottom: 4),
MarkdownTextContent( MarkdownTextContent(
content: content: item.isTruncated
item.isTruncated
? '${item.content!}...' ? '${item.content!}...'
: item.content ?? '', : item.content ?? '',
isSelectable: isTextSelectable, isSelectable: isTextSelectable,