feat(discover): 增加瀑布流与下拉刷新

lib/pages/discover/discover_view.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 
+import '../../core/config/app_config.dart';
 import '../../core/data/models/drama.dart';
 import '../../core/data/models/watch_progress.dart';
 import '../../core/data/repositories/watch_history_repository.dart';
@@ -135,90 +136,99 @@ class _DiscoverPageState extends State<DiscoverPage> {
     CategoryController categories,
     List<Drama> allDramas,
     List<Drama> visible,
-  ) => CustomScrollView(
-    controller: logic.scroll,
-    slivers: [
-      SliverToBoxAdapter(child: _search()),
-      SliverToBoxAdapter(
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(0, 14, 0, 12),
-          child: _categories(l10n, categories),
+  ) => RefreshIndicator(
+    key: const Key('discover-refresh'),
+    color: AppColors.blue,
+    backgroundColor: AppColors.card,
+    onRefresh: () async {
+      await Future.wait([categories.load(), logic.refreshResume()]);
+    },
+    child: CustomScrollView(
+      controller: logic.scroll,
+      physics: const AlwaysScrollableScrollPhysics(),
+      slivers: [
+        SliverToBoxAdapter(child: _search()),
+        SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.fromLTRB(0, 14, 0, 12),
+            child: _categories(l10n, categories),
+          ),
         ),
-      ),
-      if (logic.resumeRecord != null && logic.resumeDrama(allDramas) != null)
+        if (logic.resumeRecord != null && logic.resumeDrama(allDramas) != null)
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
+              child: _continueCard(
+                l10n,
+                logic.resumeDrama(allDramas)!,
+                logic.resumeRecord!,
+              ),
+            ),
+          ),
         SliverToBoxAdapter(
           child: Padding(
             padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
-            child: _continueCard(
-              l10n,
-              logic.resumeDrama(allDramas)!,
-              logic.resumeRecord!,
+            child: _quickActions(l10n, categories),
+          ),
+        ),
+        SliverToBoxAdapter(
+          child: Padding(
+            padding: const EdgeInsets.fromLTRB(14, 2, 14, 10),
+            child: Row(
+              children: [
+                Container(
+                  width: 3,
+                  height: 18,
+                  decoration: BoxDecoration(
+                    color: AppColors.blue,
+                    borderRadius: BorderRadius.circular(2),
+                  ),
+                ),
+                const SizedBox(width: 6),
+                Expanded(
+                  child: Text(
+                    l10n.trendingMicroDramas,
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: const TextStyle(
+                      color: AppColors.onSurface,
+                      fontSize: AppDimens.previewSectionTitle,
+                      fontWeight: FontWeight.w800,
+                    ),
+                  ),
+                ),
+                TextButton(
+                  onPressed: () =>
+                      categories.selectCode(CategoryController.allCode),
+                  style: TextButton.styleFrom(
+                    foregroundColor: AppColors.accent,
+                    minimumSize: const Size(44, 44),
+                    padding: EdgeInsets.zero,
+                  ),
+                  child: Text(
+                    '${l10n.all} ›',
+                    style: const TextStyle(fontSize: 10),
+                  ),
+                ),
+              ],
             ),
           ),
         ),
-      SliverToBoxAdapter(
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(16, 0, 16, 14),
-          child: _quickActions(l10n, categories),
-        ),
-      ),
-      SliverToBoxAdapter(
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(14, 2, 14, 10),
-          child: Row(
-            children: [
-              Container(
-                width: 3,
-                height: 18,
-                decoration: BoxDecoration(
-                  color: AppColors.blue,
-                  borderRadius: BorderRadius.circular(2),
-                ),
-              ),
-              const SizedBox(width: 6),
-              Expanded(
-                child: Text(
-                  l10n.trendingMicroDramas,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(
-                    color: AppColors.onSurface,
-                    fontSize: AppDimens.previewSectionTitle,
-                    fontWeight: FontWeight.w800,
-                  ),
-                ),
-              ),
-              TextButton(
-                onPressed: () =>
-                    categories.selectCode(CategoryController.allCode),
-                style: TextButton.styleFrom(
-                  foregroundColor: AppColors.accent,
-                  minimumSize: const Size(44, 44),
-                  padding: EdgeInsets.zero,
-                ),
-                child: Text(
-                  '${l10n.all} ›',
-                  style: const TextStyle(fontSize: 10),
-                ),
-              ),
-            ],
+        _HomeDramaGrid(
+          l10n: l10n,
+          categories: categories,
+          dramas: visible,
+          searching: logic.search.text.trim().isNotEmpty,
+          onOpen: (drama) => logic.openCard(
+            context,
+            drama,
+            embedded: widget.embedded,
+            onDramaSelected: widget.onDramaSelected,
+            onAction: widget.onAction,
           ),
         ),
-      ),
-      _HomeDramaGrid(
-        l10n: l10n,
-        categories: categories,
-        dramas: visible,
-        searching: logic.search.text.trim().isNotEmpty,
-        onOpen: (drama) => logic.openCard(
-          context,
-          drama,
-          embedded: widget.embedded,
-          onDramaSelected: widget.onDramaSelected,
-          onAction: widget.onAction,
-        ),
-      ),
-    ],
+      ],
+    ),
   );
 
   Widget _header(AppLocalizations l10n) {

lib/pages/discover/widgets/home_drama_grid.dart

@@ -55,33 +55,44 @@ class _HomeDramaGrid extends StatelessWidget {
     }
     return SliverMainAxisGroup(
       slivers: [
-        _dramaGrid(dramas),
+        SliverToBoxAdapter(child: _masonry(dramas)),
         const SliverToBoxAdapter(child: SizedBox(height: 24)),
       ],
     );
   }
 
-  Widget _dramaGrid(List<Drama> items) => SliverPadding(
-    key: const Key('home-all-dramas-section'),
-    padding: const EdgeInsets.symmetric(horizontal: 14),
-    sliver: SliverGrid(
-      key: const Key('home-all-dramas-grid'),
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-        crossAxisCount: 2,
-        mainAxisSpacing: 10,
-        crossAxisSpacing: 10,
-        mainAxisExtent: 164,
+  Widget _masonry(List<Drama> items) {
+    return Padding(
+      key: const Key('home-all-dramas-section'),
+      padding: const EdgeInsets.symmetric(horizontal: 14),
+      child: Row(
+        key: const Key('home-all-dramas-grid'),
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(child: _column(items, 0)),
+          const SizedBox(width: 10),
+          Expanded(child: _column(items, 1)),
+        ],
       ),
-      delegate: SliverChildBuilderDelegate(
-        (context, index) => _HomeDramaCard(
+    );
+  }
+
+  Widget _column(List<Drama> items, int start) {
+    final children = <Widget>[];
+    for (var index = start; index < items.length; index += 2) {
+      children.add(
+        _HomeDramaCard(
           l10n: l10n,
           drama: items[index],
           onTap: () => onOpen(items[index]),
         ),
-        childCount: items.length,
-      ),
-    ),
-  );
+      );
+      if (index + 2 < items.length) {
+        children.add(const SizedBox(height: 10));
+      }
+    }
+    return Column(children: children);
+  }
 
   Widget _fill(Widget child) =>
       SliverFillRemaining(hasScrollBody: false, child: child);
@@ -111,47 +122,36 @@ class _HomeDramaCard extends StatelessWidget {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          SizedBox(
+          ClipRRect(
             key: Key('home-drama-cover-${drama.id}'),
-            height: 120,
-            child: ClipRRect(
-              borderRadius: BorderRadius.circular(10),
-              child: Stack(
-                fit: StackFit.expand,
-                children: [
-                  ColoredBox(
-                    color: AppColors.card,
-                    child: RemoteImage(
-                      drama.posterUrl,
-                      fit: BoxFit.contain,
-                      showFallbackIcon: true,
-                    ),
-                  ),
-                  if (free)
-                    Positioned(
-                      top: 6,
-                      left: 6,
-                      child: Container(
-                        padding: const EdgeInsets.symmetric(
-                          horizontal: 6,
-                          vertical: 2,
-                        ),
-                        decoration: BoxDecoration(
-                          color: AppColors.blue,
-                          borderRadius: BorderRadius.circular(6),
-                        ),
-                        child: Text(
-                          l10n.free,
-                          style: const TextStyle(
-                            color: AppColors.onPrimary,
-                            fontSize: 8,
-                            fontWeight: FontWeight.w800,
-                          ),
+            borderRadius: BorderRadius.circular(10),
+            child: Stack(
+              children: [
+                _DiscoverCoverImage(path: drama.posterUrl),
+                if (free)
+                  Positioned(
+                    top: 6,
+                    left: 6,
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 6,
+                        vertical: 2,
+                      ),
+                      decoration: BoxDecoration(
+                        color: AppColors.blue,
+                        borderRadius: BorderRadius.circular(6),
+                      ),
+                      child: Text(
+                        l10n.free,
+                        style: const TextStyle(
+                          color: AppColors.onPrimary,
+                          fontSize: 8,
+                          fontWeight: FontWeight.w800,
                         ),
                       ),
                     ),
-                ],
-              ),
+                  ),
+              ],
             ),
           ),
           const SizedBox(height: 5),
@@ -179,3 +179,41 @@ class _HomeDramaCard extends StatelessWidget {
     );
   }
 }
+
+class _DiscoverCoverImage extends StatelessWidget {
+  const _DiscoverCoverImage({required this.path});
+
+  final String path;
+
+  @override
+  Widget build(BuildContext context) {
+    final url = AppConfig.mediaUrl(path);
+    if (url.isEmpty) return _placeholder();
+    return Image.network(
+      url,
+      width: double.infinity,
+      fit: BoxFit.fitWidth,
+      loadingBuilder: (context, child, progress) {
+        if (progress == null) return child;
+        return _placeholder();
+      },
+      errorBuilder: (_, _, _) => _placeholder(),
+    );
+  }
+
+  Widget _placeholder() {
+    return AspectRatio(
+      aspectRatio: 3 / 4,
+      child: ColoredBox(
+        color: AppColors.card,
+        child: const Center(
+          child: Icon(
+            Icons.image_not_supported_outlined,
+            color: AppColors.muted,
+            size: 32,
+          ),
+        ),
+      ),
+    );
+  }
+}