Fix post list ui jank

This commit is contained in:
2024-08-01 01:21:27 +08:00
parent 52e58fce3d
commit ecef8dab0c
13 changed files with 81 additions and 67 deletions

View File

@ -325,7 +325,7 @@ class _PostItemState extends State<PostItem> {
_buildFooter().paddingOnly(left: 12),
],
),
)
),
],
).paddingOnly(
top: 10,

View File

@ -48,6 +48,7 @@ class PostListWidget extends StatelessWidget {
}
class PostListEntryWidget extends StatelessWidget {
final int renderOrder;
final bool isShowEmbed;
final bool isNestedClickable;
final bool isClickable;
@ -56,6 +57,7 @@ class PostListEntryWidget extends StatelessWidget {
const PostListEntryWidget({
super.key,
this.renderOrder = 0,
required this.isShowEmbed,
required this.isNestedClickable,
required this.isClickable,

View File

@ -85,65 +85,65 @@ class _PostQuickActionState extends State<PostQuickAction> {
Widget build(BuildContext context) {
const density = VisualDensity(horizontal: -4, vertical: -3);
final reactionEntries = widget.item.metric!.reactionList.entries.toList();
return SizedBox(
height: 32,
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
child: CustomScrollView(
scrollDirection: Axis.horizontal,
slivers: [
if (widget.isReactable && widget.isShowReply)
ActionChip(
avatar: const Icon(Icons.comment),
label: Text(widget.item.metric!.replyCount.toString()),
visualDensity: density,
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
context: context,
builder: (context) {
return PostReplyListPopup(item: widget.item);
},
);
},
),
if (widget.isReactable && widget.isShowReply)
const VerticalDivider(
thickness: 0.3,
width: 0.3,
indent: 8,
endIndent: 8,
).paddingSymmetric(horizontal: 8),
Expanded(
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
...widget.item.metric!.reactionList.entries.map((x) {
final info = reactions[x.key];
return Padding(
padding: const EdgeInsets.only(right: 8),
child: ActionChip(
avatar: Text(info!.icon),
label: Text(x.value.toString()),
tooltip: ':${x.key}:',
visualDensity: density,
onPressed: _isSubmitting
? null
: () => doWidgetReact(x.key, info.attitude),
),
SliverToBoxAdapter(
child: ActionChip(
avatar: const Icon(Icons.comment),
label: Text(widget.item.metric!.replyCount.toString()),
visualDensity: density,
onPressed: () {
showModalBottomSheet(
useRootNavigator: true,
context: context,
builder: (context) {
return PostReplyListPopup(item: widget.item);
},
);
}),
if (widget.isReactable)
ActionChip(
avatar: const Icon(Icons.add_reaction, color: Colors.teal),
label: Text('reactAdd'.tr),
visualDensity: density,
onPressed: () => showReactMenu(),
),
],
},
),
),
if (widget.isReactable && widget.isShowReply)
SliverToBoxAdapter(
child: const VerticalDivider(
thickness: 0.3,
width: 0.3,
indent: 8,
endIndent: 8,
).paddingSymmetric(horizontal: 8),
),
SliverList.builder(
itemCount: reactionEntries.length,
itemBuilder: (context, index) {
final x = reactionEntries[index];
final info = reactions[x.key];
return ActionChip(
avatar: Text(info!.icon),
label: Text(x.value.toString()),
tooltip: ':${x.key}:',
visualDensity: density,
onPressed: _isSubmitting
? null
: () => doWidgetReact(x.key, info.attitude),
).paddingOnly(right: 8);
},
),
if (widget.isReactable)
SliverToBoxAdapter(
child: ActionChip(
avatar: const Icon(Icons.add_reaction, color: Colors.teal),
label: Text('reactAdd'.tr),
visualDensity: density,
onPressed: () => showReactMenu(),
),
),
)
],
),
);

View File

@ -0,0 +1,47 @@
import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:solian/models/post.dart';
import 'package:solian/widgets/posts/post_list.dart';
class PostWarpedListWidget extends StatelessWidget {
final bool isShowEmbed;
final bool isClickable;
final bool isNestedClickable;
final bool isPinned;
final PagingController<int, Post> controller;
const PostWarpedListWidget({
super.key,
required this.controller,
this.isShowEmbed = true,
this.isClickable = true,
this.isNestedClickable = true,
this.isPinned = true,
});
@override
Widget build(BuildContext context) {
return PagedSliverList<int, Post>.separated(
addRepaintBoundaries: true,
pagingController: controller,
builderDelegate: PagedChildBuilderDelegate<Post>(
itemBuilder: (context, item, index) {
if (item.pinnedAt != null && !isPinned) {
return const SizedBox();
}
return PostListEntryWidget(
renderOrder: index,
isShowEmbed: isShowEmbed,
isNestedClickable: isNestedClickable,
isClickable: isClickable,
item: item,
onUpdate: () {
controller.refresh();
},
);
},
),
separatorBuilder: (_, __) => const Divider(thickness: 0.3, height: 0.3),
);
}
}