feat: 改造追剧页双列表与三列卡片
This commit is contained in:
1 parent
cffb68809c
commit
2fac46f248
8 files changed
+435
-276
No files matched your search
@@ -14,7 +14,6 @@ class FollowingGridCard extends StatelessWidget {
|
||||
required this.title,
|
||||
required this.posterUrl,
|
||||
required this.viewCount,
|
||||
required this.tags,
|
||||
required this.subtitle,
|
||||
required this.onTap,
|
||||
this.progress,
|
||||
@@ -26,7 +25,6 @@ class FollowingGridCard extends StatelessWidget {
|
||||
final String title;
|
||||
final String posterUrl;
|
||||
final int viewCount;
|
||||
final List<String> tags;
|
||||
final String subtitle;
|
||||
final VoidCallback onTap;
|
||||
final double? progress;
|
||||
@@ -37,22 +35,21 @@ class FollowingGridCard extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
key: Key('following-card-$dramaId'),
|
||||
borderRadius: BorderRadius.circular(AppDimens.cardCoverRadius),
|
||||
borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
|
||||
onTap: onTap,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
AspectRatio(
|
||||
key: Key('following-cover-$dramaId'),
|
||||
aspectRatio: AppDimens.cardCoverAspectRatio,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
clipBehavior: Clip.hardEdge,
|
||||
children: [
|
||||
Positioned.fill(
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppDimens.cardCoverRadius,
|
||||
AppDimens.homeCardRadius,
|
||||
),
|
||||
child: RemoteImage(
|
||||
posterUrl,
|
||||
@@ -64,18 +61,18 @@ class FollowingGridCard extends StatelessWidget {
|
||||
),
|
||||
if (editing)
|
||||
Positioned(
|
||||
top: -6,
|
||||
right: -6,
|
||||
top: -2,
|
||||
right: -2,
|
||||
child: GestureDetector(
|
||||
key: Key('following-remove-$dramaId'),
|
||||
onTap: onRemove,
|
||||
child: const CircleAvatar(
|
||||
radius: 13,
|
||||
radius: 12,
|
||||
backgroundColor: AppColors.contentChip,
|
||||
child: Icon(
|
||||
Icons.remove_rounded,
|
||||
color: AppColors.textPrimary,
|
||||
size: 18,
|
||||
size: 17,
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -88,12 +85,29 @@ class FollowingGridCard extends StatelessWidget {
|
||||
),
|
||||
Positioned(
|
||||
right: AppDimens.cardPlayCountRight,
|
||||
bottom: AppDimens.cardPlayCountBottom,
|
||||
bottom: progress == null
|
||||
? AppDimens.cardPlayCountBottom
|
||||
: AppDimens.followingProgressHeight + 4,
|
||||
child: CoverPlayCount(
|
||||
key: Key('following-views-$dramaId'),
|
||||
count: viewCount,
|
||||
),
|
||||
),
|
||||
if (progress != null)
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
child: LinearProgressIndicator(
|
||||
key: Key('following-progress-$dramaId'),
|
||||
value: progress!.clamp(0.0, 1.0).toDouble(),
|
||||
minHeight: AppDimens.followingProgressHeight,
|
||||
backgroundColor: AppColors.inactiveTrack,
|
||||
valueColor: const AlwaysStoppedAnimation<Color>(
|
||||
AppColors.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -110,51 +124,55 @@ class FollowingGridCard extends StatelessWidget {
|
||||
height: AppDimens.cardTitleLineHeight,
|
||||
),
|
||||
),
|
||||
if (tags.isNotEmpty) ...[
|
||||
const SizedBox(height: AppDimens.cardTitleTagGap),
|
||||
_tags(),
|
||||
],
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
const SizedBox(height: AppDimens.followingSubtitleGap),
|
||||
Text(
|
||||
subtitle,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.left,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: AppDimens.cardViewsFont,
|
||||
fontSize: AppDimens.followingSubtitleFont,
|
||||
),
|
||||
),
|
||||
if (progress != null) ...[
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppDimens.progressRadius),
|
||||
child: LinearProgressIndicator(
|
||||
key: Key('following-progress-$dramaId'),
|
||||
value: progress!.clamp(0.0, 1.0).toDouble(),
|
||||
minHeight: 2,
|
||||
backgroundColor: AppColors.inactiveTrack,
|
||||
valueColor: const AlwaysStoppedAnimation<Color>(
|
||||
AppColors.primary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _tags() {
|
||||
final visible = tags.take(3).toList(growable: false);
|
||||
return Text(
|
||||
visible.join(' | '),
|
||||
key: Key('following-tags-$dramaId'),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.left,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: AppDimens.cardTagFont,
|
||||
class FollowingAddCard extends StatelessWidget {
|
||||
const FollowingAddCard({super.key, required this.onTap});
|
||||
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
key: const Key('following-add-card'),
|
||||
borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
|
||||
onTap: onTap,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
AspectRatio(
|
||||
aspectRatio: AppDimens.cardCoverAspectRatio,
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.contentSurface,
|
||||
borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
|
||||
),
|
||||
child: const Center(
|
||||
child: Icon(
|
||||
Icons.add,
|
||||
key: Key('following-add-icon'),
|
||||
size: AppDimens.followingAddIconSize,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@ import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../../core/data/models/drama.dart';
|
||||
import '../../core/data/models/watch_record.dart';
|
||||
import '../../core/data/repositories/catalog_repository.dart';
|
||||
import '../../core/data/repositories/watch_history_repository.dart';
|
||||
@@ -15,17 +14,14 @@ import '../../core/data/services/watch_records_controller.dart';
|
||||
import '../../core/formatting/error_text.dart';
|
||||
import '../../core/theme/app_colors.dart';
|
||||
import '../../core/theme/app_dimens.dart';
|
||||
import '../../core/widgets/app_pull_to_refresh.dart';
|
||||
import '../../core/widgets/auth_gate.dart';
|
||||
import '../../core/widgets/empty_state.dart';
|
||||
import '../../core/widgets/paged_list_footer.dart';
|
||||
import '../../l10n/app_localizations.dart';
|
||||
import '../player/open_player.dart';
|
||||
import 'following_grid_card.dart';
|
||||
import 'following_paged_grid.dart';
|
||||
|
||||
final RegExp _tagSplitter = RegExp(r'[,/、·]');
|
||||
|
||||
enum FollowingTab { favorites, history, reserve }
|
||||
enum FollowingTab { favorites, history }
|
||||
|
||||
class FollowingPage extends StatefulWidget {
|
||||
const FollowingPage({
|
||||
@@ -42,17 +38,16 @@ class FollowingPage extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _FollowingPageState extends State<FollowingPage> {
|
||||
final PageController _pageController = PageController();
|
||||
final ScrollController _favoriteScroll = ScrollController();
|
||||
final ScrollController _historyScroll = ScrollController();
|
||||
late final WatchRecordsController _history;
|
||||
late final ScrollController _favoriteScroll;
|
||||
late final ScrollController _historyScroll;
|
||||
FollowingTab _tab = FollowingTab.favorites;
|
||||
bool _editing = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_favoriteScroll = ScrollController();
|
||||
_historyScroll = ScrollController();
|
||||
_history = WatchRecordsController(
|
||||
history: context.read<WatchHistoryRepository>(),
|
||||
catalog: context.read<CatalogRepository>(),
|
||||
@@ -65,6 +60,7 @@ class _FollowingPageState extends State<FollowingPage> {
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pageController.dispose();
|
||||
_favoriteScroll.dispose();
|
||||
_historyScroll.dispose();
|
||||
_history.dispose();
|
||||
@@ -86,13 +82,16 @@ class _FollowingPageState extends State<FollowingPage> {
|
||||
Expanded(
|
||||
child: !signedIn
|
||||
? const AuthGatePanel()
|
||||
: IndexedStack(
|
||||
index: _tab.index,
|
||||
: PageView(
|
||||
key: const Key('following-tab-pages'),
|
||||
controller: _pageController,
|
||||
onPageChanged: _onPageChanged,
|
||||
children: [
|
||||
_FavoritesGrid(
|
||||
controller: widget.favoriteController,
|
||||
editing: _editing,
|
||||
scrollController: _favoriteScroll,
|
||||
onGoHome: widget.onGoHome,
|
||||
onListEmptied: _exitEditingIfEmpty,
|
||||
),
|
||||
_HistoryGrid(
|
||||
@@ -101,7 +100,6 @@ class _FollowingPageState extends State<FollowingPage> {
|
||||
scrollController: _historyScroll,
|
||||
onListEmptied: _exitEditingIfEmpty,
|
||||
),
|
||||
_reserveEmpty(l10n),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -112,79 +110,119 @@ class _FollowingPageState extends State<FollowingPage> {
|
||||
}
|
||||
|
||||
Widget _header(AppLocalizations l10n) {
|
||||
final tabs = [
|
||||
(FollowingTab.favorites, l10n.followingTab, 'favorites'),
|
||||
(FollowingTab.history, l10n.watchHistory, 'history'),
|
||||
(FollowingTab.reserve, l10n.reserveTitle, 'reserve'),
|
||||
];
|
||||
return SizedBox(
|
||||
key: const Key('following-header'),
|
||||
height: 52,
|
||||
height: AppDimens.followingHeaderHeight,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.feedPageHorizontal,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
for (final tab in tabs)
|
||||
Expanded(
|
||||
_tabButton(FollowingTab.favorites, l10n.followingTab, 'favorites'),
|
||||
const SizedBox(width: AppDimens.followingTabGap),
|
||||
_tabButton(FollowingTab.history, l10n.watchHistory, 'history'),
|
||||
const Spacer(),
|
||||
if (_editing)
|
||||
SizedBox(
|
||||
width: 44,
|
||||
height: 44,
|
||||
child: InkWell(
|
||||
key: Key('following-tab-${tab.$3}'),
|
||||
onTap: () => setState(() {
|
||||
_tab = tab.$1;
|
||||
_editing = false;
|
||||
}),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
tab.$2,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
color: _tab == tab.$1
|
||||
? AppColors.textPrimary
|
||||
: AppColors.textTertiary,
|
||||
fontSize: AppDimens.followingTabFont,
|
||||
fontWeight: _tab == tab.$1
|
||||
? FontWeight.w700
|
||||
: FontWeight.w400,
|
||||
key: const Key('following-edit'),
|
||||
onTap: _toggleEditing,
|
||||
child: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Text(
|
||||
l10n.done,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: AppDimens.followingTabFont,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
Semantics(
|
||||
button: true,
|
||||
label: l10n.edit,
|
||||
child: SizedBox(
|
||||
width: 44,
|
||||
height: 44,
|
||||
child: InkWell(
|
||||
key: const Key('following-edit'),
|
||||
onTap: _toggleEditing,
|
||||
child: const Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: SizedBox.square(
|
||||
dimension: AppDimens.followingEditIconSize,
|
||||
child: Icon(
|
||||
Icons.edit_outlined,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
Container(
|
||||
width: _tab == tab.$1 ? 20 : 0,
|
||||
height: 2,
|
||||
color: AppColors.textPrimary,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
key: const Key('following-edit'),
|
||||
tooltip: _editing ? l10n.done : l10n.edit,
|
||||
onPressed: () => setState(() => _editing = !_editing),
|
||||
color: AppColors.textPrimary,
|
||||
iconSize: 24,
|
||||
icon: Icon(_editing ? Icons.check_rounded : Icons.edit_outlined),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _reserveEmpty(AppLocalizations l10n) {
|
||||
return EmptyState(
|
||||
key: const Key('following-reserve-empty'),
|
||||
icon: Icons.notifications_none_rounded,
|
||||
title: l10n.reserveEmptyTitle,
|
||||
subtitle: l10n.reserveEmptyHint,
|
||||
actionLabel: l10n.homeTab,
|
||||
onAction: widget.onGoHome,
|
||||
Widget _tabButton(FollowingTab tab, String label, String keyName) {
|
||||
final selected = _tab == tab;
|
||||
return InkWell(
|
||||
key: Key('following-tab-$keyName'),
|
||||
onTap: () => _selectTab(tab),
|
||||
child: SizedBox(
|
||||
height: AppDimens.followingHeaderHeight,
|
||||
child: Center(
|
||||
child: AnimatedDefaultTextStyle(
|
||||
duration: AppDimens.followingTabAnimationDuration,
|
||||
style: TextStyle(
|
||||
color: selected
|
||||
? AppColors.textPrimary
|
||||
: AppColors.textTabInactive,
|
||||
fontSize: AppDimens.followingTabFont,
|
||||
fontWeight: selected ? FontWeight.w600 : FontWeight.w400,
|
||||
),
|
||||
child: Text(label, maxLines: 1),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _selectTab(FollowingTab tab) {
|
||||
if (_tab != tab || _editing) {
|
||||
setState(() {
|
||||
_tab = tab;
|
||||
_editing = false;
|
||||
});
|
||||
}
|
||||
_pageController.animateToPage(
|
||||
tab.index,
|
||||
duration: AppDimens.followingPageAnimationDuration,
|
||||
curve: Curves.easeOutCubic,
|
||||
);
|
||||
}
|
||||
|
||||
void _onPageChanged(int index) {
|
||||
final tab = FollowingTab.values[index];
|
||||
if (_tab == tab && !_editing) return;
|
||||
setState(() {
|
||||
_tab = tab;
|
||||
_editing = false;
|
||||
});
|
||||
}
|
||||
|
||||
void _toggleEditing() {
|
||||
setState(() => _editing = !_editing);
|
||||
}
|
||||
|
||||
void _exitEditingIfEmpty() {
|
||||
if (_editing && mounted) setState(() => _editing = false);
|
||||
}
|
||||
@@ -195,12 +233,14 @@ class _FavoritesGrid extends StatelessWidget {
|
||||
required this.controller,
|
||||
required this.editing,
|
||||
required this.scrollController,
|
||||
required this.onGoHome,
|
||||
required this.onListEmptied,
|
||||
});
|
||||
|
||||
final FavoriteController controller;
|
||||
final bool editing;
|
||||
final ScrollController scrollController;
|
||||
final VoidCallback onGoHome;
|
||||
final VoidCallback onListEmptied;
|
||||
|
||||
@override
|
||||
@@ -209,13 +249,14 @@ class _FavoritesGrid extends StatelessWidget {
|
||||
listenable: controller,
|
||||
builder: (context, _) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return _PagedGrid(
|
||||
return FollowingPagedGrid(
|
||||
key: const Key('following-favorites-grid'),
|
||||
scrollController: scrollController,
|
||||
loading: controller.loading,
|
||||
loadingMore: controller.loadingMore,
|
||||
hasMore: controller.hasMore,
|
||||
hasItems: controller.cards.isNotEmpty,
|
||||
showInitialLoading: false,
|
||||
errorMessage: controller.error == null
|
||||
? null
|
||||
: errorText(l10n, controller.error, l10n.favoritesError),
|
||||
@@ -224,15 +265,13 @@ class _FavoritesGrid extends StatelessWidget {
|
||||
: errorText(l10n, controller.loadMoreError, l10n.favoritesError),
|
||||
onRefresh: controller.load,
|
||||
onLoadMore: controller.loadMore,
|
||||
itemCount: controller.cards.length,
|
||||
empty: EmptyState(
|
||||
key: const Key('following-favorites-empty'),
|
||||
icon: Icons.bookmark_border_rounded,
|
||||
title: l10n.noFavorites,
|
||||
subtitle: l10n.emptyHint,
|
||||
),
|
||||
itemCount: controller.cards.length + 1,
|
||||
empty: const SizedBox.shrink(),
|
||||
itemBuilder: (context, index) {
|
||||
final drama = controller.cards[index];
|
||||
if (index == 0) {
|
||||
return FollowingAddCard(onTap: onGoHome);
|
||||
}
|
||||
final drama = controller.cards[index - 1];
|
||||
final episode = drama.episodes.isEmpty
|
||||
? 1
|
||||
: drama.episodes.first.number;
|
||||
@@ -241,7 +280,6 @@ class _FavoritesGrid extends StatelessWidget {
|
||||
title: drama.title,
|
||||
posterUrl: drama.posterUrl,
|
||||
viewCount: drama.viewCount,
|
||||
tags: _dramaTags(drama),
|
||||
editing: editing,
|
||||
subtitle: l10n.favoriteEpisodeProgress(
|
||||
episode,
|
||||
@@ -249,9 +287,10 @@ class _FavoritesGrid extends StatelessWidget {
|
||||
),
|
||||
onTap: () => unawaited(playDramaFromCatalog(context, drama)),
|
||||
onRemove: () async {
|
||||
if (await _confirmRemove(context)) {
|
||||
await controller.remove(drama.id);
|
||||
if (controller.cards.isEmpty) onListEmptied();
|
||||
if (await _confirmRemove(context) &&
|
||||
await controller.remove(drama.id) &&
|
||||
controller.cards.isEmpty) {
|
||||
onListEmptied();
|
||||
}
|
||||
},
|
||||
);
|
||||
@@ -281,7 +320,7 @@ class _HistoryGrid extends StatelessWidget {
|
||||
listenable: controller,
|
||||
builder: (context, _) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return _PagedGrid(
|
||||
return FollowingPagedGrid(
|
||||
key: const Key('following-history-grid'),
|
||||
scrollController: scrollController,
|
||||
loading: controller.loading,
|
||||
@@ -305,23 +344,21 @@ class _HistoryGrid extends StatelessWidget {
|
||||
),
|
||||
itemBuilder: (context, index) {
|
||||
final record = controller.records[index];
|
||||
final title = record.displayTitle.isEmpty
|
||||
? l10n.episodeLabel(record.episodeNumber)
|
||||
: record.displayTitle;
|
||||
final progress = record.progress.fraction;
|
||||
return FollowingGridCard(
|
||||
dramaId: record.dramaId,
|
||||
title: title,
|
||||
title: _historyTitle(l10n, record),
|
||||
posterUrl: record.displayCover,
|
||||
viewCount: record.drama?.viewCount ?? 0,
|
||||
tags: _dramaTags(record.drama),
|
||||
progress: record.progress.fraction,
|
||||
viewCount: record.drama?.viewCount ?? record.progress.playCount,
|
||||
progress: progress > 0 ? progress : null,
|
||||
editing: editing,
|
||||
subtitle: l10n.watchedToEpisode(record.episodeNumber),
|
||||
subtitle: _historySubtitle(l10n, record),
|
||||
onTap: () => unawaited(_openHistory(context, controller, record)),
|
||||
onRemove: () async {
|
||||
if (await _confirmRemove(context)) {
|
||||
await controller.remove(record.dramaId);
|
||||
if (controller.records.isEmpty) onListEmptied();
|
||||
if (await _confirmRemove(context) &&
|
||||
await controller.remove(record.dramaId) &&
|
||||
controller.records.isEmpty) {
|
||||
onListEmptied();
|
||||
}
|
||||
},
|
||||
);
|
||||
@@ -332,15 +369,19 @@ class _HistoryGrid extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
List<String> _dramaTags(Drama? drama) {
|
||||
if (drama == null) return const [];
|
||||
final seen = <String>{};
|
||||
return [drama.genre, drama.category]
|
||||
.expand((value) => value.split(_tagSplitter))
|
||||
.map((value) => value.trim())
|
||||
.where((value) => value.isNotEmpty && seen.add(value))
|
||||
.take(3)
|
||||
.toList(growable: false);
|
||||
String _historyTitle(AppLocalizations l10n, WatchRecord record) {
|
||||
return record.displayTitle.isEmpty
|
||||
? l10n.episodeLabel(record.episodeNumber)
|
||||
: record.displayTitle;
|
||||
}
|
||||
|
||||
String _historySubtitle(AppLocalizations l10n, WatchRecord record) {
|
||||
final total =
|
||||
record.progress.totalEpisodes ?? record.drama?.episodeCount ?? 0;
|
||||
if (record.episodeNumber <= 0 || total <= 0) {
|
||||
return l10n.watchedToEpisode(record.episodeNumber);
|
||||
}
|
||||
return l10n.favoriteEpisodeProgress(record.episodeNumber, total);
|
||||
}
|
||||
|
||||
Future<void> _openHistory(
|
||||
@@ -377,111 +418,3 @@ Future<bool> _confirmRemove(BuildContext context) async {
|
||||
) ??
|
||||
false;
|
||||
}
|
||||
|
||||
class _PagedGrid extends StatelessWidget {
|
||||
const _PagedGrid({
|
||||
super.key,
|
||||
required this.scrollController,
|
||||
required this.loading,
|
||||
required this.loadingMore,
|
||||
required this.hasMore,
|
||||
required this.hasItems,
|
||||
required this.itemCount,
|
||||
required this.itemBuilder,
|
||||
required this.empty,
|
||||
required this.onRefresh,
|
||||
required this.onLoadMore,
|
||||
this.errorMessage,
|
||||
this.loadMoreError,
|
||||
});
|
||||
|
||||
static const double _loadMoreThreshold = 240;
|
||||
|
||||
final ScrollController scrollController;
|
||||
final bool loading;
|
||||
final bool loadingMore;
|
||||
final bool hasMore;
|
||||
final bool hasItems;
|
||||
final int itemCount;
|
||||
final IndexedWidgetBuilder itemBuilder;
|
||||
final Widget empty;
|
||||
final String? errorMessage;
|
||||
final String? loadMoreError;
|
||||
final Future<void> Function() onRefresh;
|
||||
final Future<void> Function() onLoadMore;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (loading && !hasItems) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
final emptyContent = errorMessage == null
|
||||
? empty
|
||||
: EmptyState(
|
||||
icon: Icons.cloud_off_rounded,
|
||||
title: errorMessage!,
|
||||
actionLabel: AppLocalizations.of(context)!.retry,
|
||||
onAction: () => unawaited(onRefresh()),
|
||||
);
|
||||
return NotificationListener<ScrollNotification>(
|
||||
onNotification: _onScroll,
|
||||
child: AppPullToRefresh(
|
||||
onRefresh: onRefresh,
|
||||
child: CustomScrollView(
|
||||
key: ValueKey<String>('following-scroll-$runtimeType'),
|
||||
controller: scrollController,
|
||||
physics: AppPullToRefresh.physics,
|
||||
slivers: [
|
||||
if (!hasItems)
|
||||
SliverFillRemaining(hasScrollBody: false, child: emptyContent)
|
||||
else ...[
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppDimens.feedPageHorizontal,
|
||||
AppDimens.spaceMd,
|
||||
AppDimens.feedPageHorizontal,
|
||||
AppDimens.spaceSm,
|
||||
),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 2,
|
||||
crossAxisSpacing: AppDimens.homeGridGap,
|
||||
mainAxisSpacing: AppDimens.homeGridRowGap,
|
||||
childAspectRatio: AppDimens.followingGridAspectRatio,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
itemBuilder,
|
||||
childCount: itemCount,
|
||||
),
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: PagedListFooter(
|
||||
loading: loadingMore,
|
||||
hasMore: hasMore,
|
||||
hasItems: hasItems,
|
||||
errorMessage: loadMoreError,
|
||||
onRetry: onLoadMore,
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(
|
||||
child: SizedBox(height: AppDimens.spaceXl),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
bool _onScroll(ScrollNotification notification) {
|
||||
if (notification.depth != 0) return false;
|
||||
if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
|
||||
if (notification is ScrollUpdateNotification ||
|
||||
notification is ScrollEndNotification ||
|
||||
notification is OverscrollNotification) {
|
||||
unawaited(onLoadMore());
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../core/theme/app_colors.dart';
|
||||
import '../../core/theme/app_dimens.dart';
|
||||
import '../../core/widgets/app_pull_to_refresh.dart';
|
||||
import '../../core/widgets/empty_state.dart';
|
||||
import '../../core/widgets/paged_list_footer.dart';
|
||||
import '../../l10n/app_localizations.dart';
|
||||
|
||||
class FollowingPagedGrid extends StatelessWidget {
|
||||
const FollowingPagedGrid({
|
||||
super.key,
|
||||
required this.scrollController,
|
||||
required this.loading,
|
||||
required this.loadingMore,
|
||||
required this.hasMore,
|
||||
required this.hasItems,
|
||||
required this.itemCount,
|
||||
required this.itemBuilder,
|
||||
required this.empty,
|
||||
required this.onRefresh,
|
||||
required this.onLoadMore,
|
||||
this.showInitialLoading = true,
|
||||
this.errorMessage,
|
||||
this.loadMoreError,
|
||||
});
|
||||
|
||||
static const double _loadMoreThreshold = 240;
|
||||
|
||||
final ScrollController scrollController;
|
||||
final bool loading;
|
||||
final bool loadingMore;
|
||||
final bool hasMore;
|
||||
final bool hasItems;
|
||||
final int itemCount;
|
||||
final IndexedWidgetBuilder itemBuilder;
|
||||
final Widget empty;
|
||||
final String? errorMessage;
|
||||
final String? loadMoreError;
|
||||
final bool showInitialLoading;
|
||||
final Future<void> Function() onRefresh;
|
||||
final Future<void> Function() onLoadMore;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (showInitialLoading && loading && !hasItems) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final gridWidth =
|
||||
constraints.maxWidth - AppDimens.feedPageHorizontal * 2;
|
||||
final itemWidth = (gridWidth - AppDimens.followingGridGap * 2) / 3;
|
||||
final itemExtent =
|
||||
itemWidth / AppDimens.cardCoverAspectRatio +
|
||||
AppDimens.followingCardTextExtent;
|
||||
return NotificationListener<ScrollNotification>(
|
||||
onNotification: _onScroll,
|
||||
child: AppPullToRefresh(
|
||||
onRefresh: onRefresh,
|
||||
child: CustomScrollView(
|
||||
key: ValueKey<String>('following-scroll-$runtimeType'),
|
||||
controller: scrollController,
|
||||
physics: AppPullToRefresh.physics,
|
||||
slivers: [
|
||||
if (itemCount == 0)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: errorMessage == null
|
||||
? empty
|
||||
: EmptyState(
|
||||
icon: Icons.cloud_off_rounded,
|
||||
title: errorMessage!,
|
||||
actionLabel: AppLocalizations.of(context)!.retry,
|
||||
onAction: () => unawaited(onRefresh()),
|
||||
),
|
||||
)
|
||||
else ...[
|
||||
if (errorMessage != null)
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppDimens.feedPageHorizontal,
|
||||
AppDimens.spaceSm,
|
||||
AppDimens.feedPageHorizontal,
|
||||
0,
|
||||
),
|
||||
child: Text(
|
||||
errorMessage!,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: AppDimens.followingSubtitleFont,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppDimens.feedPageHorizontal,
|
||||
0,
|
||||
AppDimens.feedPageHorizontal,
|
||||
AppDimens.spaceSm,
|
||||
),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 3,
|
||||
crossAxisSpacing: AppDimens.followingGridGap,
|
||||
mainAxisSpacing: AppDimens.followingGridRowGap,
|
||||
mainAxisExtent: itemExtent,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
itemBuilder,
|
||||
childCount: itemCount,
|
||||
),
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: PagedListFooter(
|
||||
loading: loadingMore,
|
||||
hasMore: hasMore,
|
||||
hasItems: hasItems,
|
||||
errorMessage: loadMoreError,
|
||||
onRetry: onLoadMore,
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(
|
||||
child: SizedBox(height: AppDimens.spaceXl),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
bool _onScroll(ScrollNotification notification) {
|
||||
if (notification.depth != 0) return false;
|
||||
if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
|
||||
if (notification is ScrollUpdateNotification ||
|
||||
notification is ScrollEndNotification ||
|
||||
notification is OverscrollNotification) {
|
||||
unawaited(onLoadMore());
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user