feat(flutter): 增加榜单新剧分页与预约刷新

lib/pages/ranking/ranking_page.dart

@@ -10,7 +10,9 @@ import '../../core/data/services/catalog_controller.dart';
 import '../../core/formatting/count_format.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_theme.dart';
+import '../../core/widgets/app_pull_to_refresh.dart';
 import '../../core/widgets/empty_state.dart';
+import '../../core/widgets/paged_local_list.dart';
 import '../../core/widgets/plain_page_scaffold.dart';
 import '../../core/widgets/remote_image.dart';
 import '../../l10n/app_localizations.dart';
@@ -24,21 +26,87 @@ const double _rowGap = 12;
 const double _rankColumnWidth = 56;
 const double _listCoverWidth = 72;
 const double _listCoverHeight = 96;
+const double _loadMoreThreshold = 200;
 const Color _goldStart = Color(0xFFF3B34C);
 const Color _goldEnd = Color(0xFFD9A23A);
 const Color _bronzeStart = Color(0xFFCD7F32);
 const Color _bronzeEnd = Color(0xFFA9713A);
 
 /// 剧场榜单页：前三名横排领奖台，第 4 名起纵向列表。
-class RankingPage extends StatelessWidget {
+class RankingPage extends StatefulWidget {
   const RankingPage({super.key});
 
+  @override
+  State<RankingPage> createState() => _RankingPageState();
+}
+
+class _RankingPageState extends State<RankingPage> {
+  final ScrollController _scroll = ScrollController();
+  PagedLocalListController<Drama>? _pager;
+  bool _refreshing = false;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    if (_pager != null) return;
+    _pager = PagedLocalListController<Drama>(
+      items: _ranked(context.read<CatalogController>().dramas),
+    )..addListener(_rebuild);
+  }
+
+  @override
+  void dispose() {
+    _pager
+      ?..removeListener(_rebuild)
+      ..dispose();
+    _scroll.dispose();
+    super.dispose();
+  }
+
+  void _rebuild() {
+    if (mounted) setState(() {});
+  }
+
+  List<Drama> _ranked(List<Drama> source) {
+    final dramas = [...source]
+      ..sort((a, b) => b.viewCount.compareTo(a.viewCount));
+    return dramas.take(_topCount).toList(growable: false);
+  }
+
+  Future<void> _refresh() async {
+    if (_refreshing) return;
+    _refreshing = true;
+    try {
+      final catalog = context.read<CatalogController>();
+      await catalog.refresh();
+      if (!mounted) return;
+      _pager!.replaceAll(_ranked(catalog.dramas));
+      if (_scroll.hasClients) {
+        _scroll.jumpTo(_scroll.position.minScrollExtent);
+      }
+    } finally {
+      _refreshing = false;
+    }
+  }
+
+  bool _onScroll(ScrollNotification notification) {
+    if (notification.depth != 0 || _refreshing) return false;
+    final reachedBottom =
+        notification.metrics.extentAfter <= _loadMoreThreshold;
+    if (reachedBottom &&
+        (notification is ScrollUpdateNotification ||
+            notification is ScrollEndNotification ||
+            notification is OverscrollNotification)) {
+      unawaited(_pager!.loadMore());
+    }
+    return false;
+  }
+
   @override
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
-    final dramas = [...context.read<CatalogController>().dramas]
-      ..sort((a, b) => b.viewCount.compareTo(a.viewCount));
-    final top = dramas.take(_topCount).toList();
+    final pager = _pager!;
+    final top = pager.visibleItems;
     final podium = top.take(3).toList();
     final rest = top.skip(3).toList();
     return PlainPageScaffold(
@@ -46,32 +114,58 @@ class RankingPage extends StatelessWidget {
       backKey: const Key('ranking-back'),
       title: l10n.topCharts,
       subtitle: l10n.rankingSubtitle,
-      child: top.isEmpty
-          ? EmptyState(icon: Icons.leaderboard_outlined, title: l10n.noStories)
-          : ListView(
-              padding: const EdgeInsets.only(top: 4, bottom: 24),
-              children: [
-                if (podium.isNotEmpty)
-                  Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 14),
-                    child: _Podium(podium: podium, l10n: l10n),
-                  ),
-                if (rest.isNotEmpty) ...[
-                  const SizedBox(height: 16),
-                  for (var index = 0; index < rest.length; index++) ...[
-                    if (index > 0) const SizedBox(height: _rowGap),
-                    Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 14),
-                      child: _RankingRow(
-                        index: index + 3,
-                        drama: rest[index],
-                        l10n: l10n,
+      child: NotificationListener<ScrollNotification>(
+        onNotification: _onScroll,
+        child: AppPullToRefresh(
+          key: const Key('ranking-refresh'),
+          onRefresh: _refresh,
+          child: ListView(
+            key: const Key('ranking-list'),
+            controller: _scroll,
+            physics: const AlwaysScrollableScrollPhysics(),
+            padding: const EdgeInsets.only(top: 4, bottom: 24),
+            children: top.isEmpty
+                ? [
+                    SizedBox(
+                      height: 420,
+                      child: EmptyState(
+                        icon: Icons.leaderboard_outlined,
+                        title: l10n.noStories,
                       ),
                     ),
+                  ]
+                : [
+                    if (podium.isNotEmpty)
+                      Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 14),
+                        child: _Podium(podium: podium, l10n: l10n),
+                      ),
+                    if (rest.isNotEmpty) ...[
+                      const SizedBox(height: 16),
+                      for (var index = 0; index < rest.length; index++) ...[
+                        if (index > 0) const SizedBox(height: _rowGap),
+                        Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 14),
+                          child: _RankingRow(
+                            index: index + 3,
+                            drama: rest[index],
+                            l10n: l10n,
+                          ),
+                        ),
+                      ],
+                    ],
+                    PagedLoadFooter(
+                      loading: pager.loading,
+                      hasMore: pager.hasMore,
+                      hasItems: pager.items.isNotEmpty,
+                      loadMoreKey: const Key('ranking-load-more'),
+                      noMoreKey: const Key('ranking-no-more'),
+                      noMoreLabel: l10n.noMore,
+                    ),
                   ],
-                ],
-              ],
-            ),
+          ),
+        ),
+      ),
     );
   }
 }