mod: add skeleton

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
This commit is contained in:
bggRGjQaUbCoE
2025-04-20 21:37:44 +08:00
parent abdde1f811
commit 95caf111ae
24 changed files with 740 additions and 347 deletions

View File

@@ -1,5 +1,6 @@
import 'package:PiliPlus/common/constants.dart';
import 'package:PiliPlus/common/widgets/loading_widget.dart';
import 'package:PiliPlus/common/skeleton/video_card_h.dart';
import 'package:PiliPlus/common/widgets/http_error.dart';
import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
import 'package:PiliPlus/common/widgets/video_card_h.dart';
import 'package:PiliPlus/http/loading_state.dart';
@@ -27,54 +28,64 @@ class _SearchArchiveState extends State<SearchArchive>
@override
Widget build(BuildContext context) {
super.build(context);
return Obx(() => _buildBody(context, widget.ctr.archiveState.value));
return refreshIndicator(
onRefresh: () async {
await widget.ctr.refreshArchive();
},
child: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverPadding(
padding: EdgeInsets.only(
top: StyleString.safeSpace - 5,
bottom: MediaQuery.paddingOf(context).bottom + 80,
),
sliver:
Obx(() => _buildBody(context, widget.ctr.archiveState.value)),
)
],
),
);
}
Widget _buildBody(
BuildContext context, LoadingState<List<VListItemModel>?> loadingState) {
return switch (loadingState) {
Loading() => loadingWidget,
Loading() => SliverGrid(
gridDelegate: Grid.videoCardHDelegate(context),
delegate: SliverChildBuilderDelegate(
(context, index) {
return const VideoCardHSkeleton();
},
childCount: 10,
),
),
Success() => loadingState.response?.isNotEmpty == true
? refreshIndicator(
onRefresh: () async {
await widget.ctr.refreshArchive();
},
child: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverPadding(
padding: EdgeInsets.only(
top: StyleString.safeSpace - 5,
bottom: MediaQuery.paddingOf(context).bottom + 80,
),
sliver: SliverGrid(
gridDelegate: Grid.videoCardHDelegate(context),
delegate: SliverChildBuilderDelegate(
(context, index) {
if (index == loadingState.response!.length - 1) {
EasyThrottle.throttle('searchArchives',
const Duration(milliseconds: 500), () {
widget.ctr.searchArchives(false);
});
}
return VideoCardH(
videoItem: loadingState.response![index],
);
},
childCount: loadingState.response!.length,
),
),
),
],
? SliverGrid(
gridDelegate: Grid.videoCardHDelegate(context),
delegate: SliverChildBuilderDelegate(
(context, index) {
if (index == loadingState.response!.length - 1) {
EasyThrottle.throttle(
'searchArchives', const Duration(milliseconds: 500),
() {
widget.ctr.searchArchives(false);
});
}
return VideoCardH(
videoItem: loadingState.response![index],
);
},
childCount: loadingState.response!.length,
),
)
: errorWidget(
: HttpError(
callback: () {
widget.ctr.archiveState.value = LoadingState.loading();
widget.ctr.refreshArchive();
},
),
Error() => errorWidget(
Error() => HttpError(
errMsg: loadingState.errMsg,
callback: () {
widget.ctr.archiveState.value = LoadingState.loading();

View File

@@ -1,5 +1,6 @@
import 'package:PiliPlus/common/constants.dart';
import 'package:PiliPlus/common/widgets/loading_widget.dart';
import 'package:PiliPlus/common/skeleton/dynamic_card.dart';
import 'package:PiliPlus/common/widgets/http_error.dart';
import 'package:PiliPlus/common/widgets/refresh_indicator.dart';
import 'package:PiliPlus/http/loading_state.dart';
import 'package:PiliPlus/models/dynamics/result.dart';
@@ -29,86 +30,123 @@ class _SearchDynamicState extends State<SearchDynamic>
@override
Widget build(BuildContext context) {
super.build(context);
return Obx(() => _buildBody(context, widget.ctr.dynamicState.value));
return refreshIndicator(
onRefresh: () async {
await widget.ctr.refreshDynamic();
},
child: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverPadding(
padding: EdgeInsets.only(
bottom: MediaQuery.paddingOf(context).bottom + 80,
),
sliver:
Obx(() => _buildBody(context, widget.ctr.dynamicState.value)),
)
],
),
);
}
late final bool dynamicsWaterfallFlow = GStorage.setting
.get(SettingBoxKey.dynamicsWaterfallFlow, defaultValue: true);
Widget skeleton() {
if (!dynamicsWaterfallFlow) {
return SliverCrossAxisGroup(
slivers: [
const SliverFillRemaining(),
SliverConstrainedCrossAxis(
maxExtent: Grid.smallCardWidth * 2,
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return const DynamicCardSkeleton();
},
childCount: 10,
),
),
),
const SliverFillRemaining()
],
);
}
return SliverGrid(
gridDelegate: SliverGridDelegateWithExtentAndRatio(
crossAxisSpacing: StyleString.cardSpace / 2,
mainAxisSpacing: StyleString.cardSpace / 2,
maxCrossAxisExtent: Grid.smallCardWidth * 2,
childAspectRatio: StyleString.aspectRatio,
mainAxisExtent: 50,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return const DynamicCardSkeleton();
},
childCount: 10,
),
);
}
Widget _buildBody(BuildContext context,
LoadingState<List<DynamicItemModel>?> loadingState) {
return switch (loadingState) {
Loading() => loadingWidget,
Loading() => skeleton(),
Success() => loadingState.response?.isNotEmpty == true
? refreshIndicator(
onRefresh: () async {
await widget.ctr.refreshDynamic();
},
child: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverPadding(
padding: EdgeInsets.only(
bottom: MediaQuery.paddingOf(context).bottom + 80,
? dynamicsWaterfallFlow
? SliverWaterfallFlow.extent(
maxCrossAxisExtent: Grid.smallCardWidth * 2,
crossAxisSpacing: StyleString.safeSpace,
mainAxisSpacing: StyleString.safeSpace,
lastChildLayoutTypeBuilder: (index) {
if (index == loadingState.response!.length - 1) {
EasyThrottle.throttle(
'member_dynamics', const Duration(milliseconds: 1000),
() {
widget.ctr.searchDynamic(false);
});
}
return index == loadingState.response!.length
? LastChildLayoutType.foot
: LastChildLayoutType.none;
},
children: (loadingState.response as List)
.map((item) => DynamicPanel(item: item))
.toList(),
)
: SliverCrossAxisGroup(
slivers: [
const SliverFillRemaining(),
SliverConstrainedCrossAxis(
maxExtent: Grid.smallCardWidth * 2,
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
if (index == loadingState.response!.length - 1) {
EasyThrottle.throttle('member_dynamics',
const Duration(milliseconds: 1000), () {
widget.ctr.searchDynamic(false);
});
}
return DynamicPanel(
item: loadingState.response![index],
);
},
childCount: loadingState.response!.length,
),
),
),
sliver: dynamicsWaterfallFlow
? SliverWaterfallFlow.extent(
maxCrossAxisExtent: Grid.smallCardWidth * 2,
crossAxisSpacing: StyleString.safeSpace,
mainAxisSpacing: StyleString.safeSpace,
lastChildLayoutTypeBuilder: (index) {
if (index == loadingState.response!.length - 1) {
EasyThrottle.throttle('member_dynamics',
const Duration(milliseconds: 1000), () {
widget.ctr.searchDynamic(false);
});
}
return index == loadingState.response!.length
? LastChildLayoutType.foot
: LastChildLayoutType.none;
},
children: (loadingState.response as List)
.map((item) => DynamicPanel(item: item))
.toList(),
)
: SliverCrossAxisGroup(
slivers: [
const SliverFillRemaining(),
SliverConstrainedCrossAxis(
maxExtent: Grid.smallCardWidth * 2,
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
if (index ==
loadingState.response!.length - 1) {
EasyThrottle.throttle('member_dynamics',
const Duration(milliseconds: 1000),
() {
widget.ctr.searchDynamic(false);
});
}
return DynamicPanel(
item: loadingState.response![index],
);
},
childCount: loadingState.response!.length,
),
),
),
const SliverFillRemaining(),
],
),
),
],
),
)
: errorWidget(
const SliverFillRemaining(),
],
)
: HttpError(
callback: () {
widget.ctr.dynamicState.value = LoadingState.loading();
widget.ctr.refreshDynamic();
},
),
Error() => errorWidget(
Error() => HttpError(
errMsg: loadingState.errMsg,
callback: () {
widget.ctr.dynamicState.value = LoadingState.loading();