fix(home): 调整封面播放量位置

docs/plans/PROGRESS.md

@@ -1115,5 +1115,5 @@ $ flutter test
 - 四类短剧卡片移除底板/描边，封面统一 8 圆角，网格行距 10、封底到标题 6；热剧/新剧/漫剧角标移至右上角异形丝带。
 - 标题下方恢复左对齐题材文字，使用 `|` 分隔、灰色小字，与封面状态角标保持独立。
 - 首页搜索栏到一级、一级到二级、二级到网格间距为 8/8/10；非精选 tab 直接以 10 衔接网格。
-- 播放量移至标题行最右，使用 spark 图标与 12/w400 纯文字、`w` 格式，整数无小数；四类列表共用。
+- 播放量回到封面右下角，使用 spark 图标与 12/w400 纯文字、`w` 格式，并加极淡底部渐变；四类列表共用。
 - 全部短剧的地区、字幕、配音筛选 UI 已占位；以下接口待补：地区、字幕/配音筛选数据。

lib/core/theme/app_colors.dart

@@ -159,6 +159,8 @@ abstract final class AppColors {
 
   /// 播放器控件胶囊与圆形底色。
   static const playerOverlayPill = Color(0xB3000000);
+  static const cardBottomScrimStart = Color(0x00000000);
+  static const cardBottomScrimEnd = Color(0x40000000);
 
   /// 进度条未激活轨道。
   static const inactiveTrack = Color(0x24FFFFFF);

lib/core/theme/app_dimens.dart

@@ -89,6 +89,8 @@ abstract final class AppDimens {
   static const double cardViewsIcon = 11;
   static const double cardPlayCountFont = 12;
   static const double cardPlayCountGap = 2;
+  static const double cardPlayCountBottom = 6;
+  static const double cardPlayCountScrimHeight = 32;
   static const double cardGenreRibbonHeight = 20;
   static const double cardGenreRibbonRadius = 10;
   static const double cardGenreRibbonLeftInset = 8;

lib/core/widgets/cover_play_count.dart

@@ -0,0 +1,60 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../formatting/count_format.dart';
+import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
+
+class CoverPlayCount extends StatelessWidget {
+  const CoverPlayCount({super.key, required this.count});
+
+  final int count;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        const Icon(
+          Icons.auto_awesome_rounded,
+          color: AppColors.textPrimary,
+          size: AppDimens.cardViewsIcon,
+        ),
+        const SizedBox(width: AppDimens.cardPlayCountGap),
+        Text(
+          formatPlayCount(count),
+          style: const TextStyle(
+            color: AppColors.textPrimary,
+            fontSize: AppDimens.cardPlayCountFont,
+            fontWeight: FontWeight.w400,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class CoverBottomScrim extends StatelessWidget {
+  const CoverBottomScrim({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox(
+      height: AppDimens.cardPlayCountScrimHeight,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+            colors: [
+              AppColors.cardBottomScrimStart,
+              AppColors.cardBottomScrimEnd,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/following/following_grid_card.dart

@@ -2,9 +2,9 @@
 
 import 'package:flutter/material.dart';
 
-import '../../core/formatting/count_format.dart';
 import '../../core/theme/app_colors.dart';
 import '../../core/theme/app_dimens.dart';
+import '../../core/widgets/cover_play_count.dart';
 import '../../core/widgets/remote_image.dart';
 
 class FollowingGridCard extends StatelessWidget {
@@ -80,31 +80,35 @@ class FollowingGridCard extends StatelessWidget {
                       ),
                     ),
                   ),
+                const Positioned(
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  child: CoverBottomScrim(),
+                ),
+                Positioned(
+                  right: 0,
+                  bottom: AppDimens.cardPlayCountBottom,
+                  child: CoverPlayCount(
+                    key: Key('following-views-$dramaId'),
+                    count: viewCount,
+                  ),
+                ),
               ],
             ),
           ),
           const SizedBox(height: AppDimens.cardCoverTitleGap),
-          Row(
+          Text(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            title,
-            crossAxisAlignment: CrossAxisAlignment.center,
+            maxLines: 2,
-            children: [
+            overflow: TextOverflow.ellipsis,
-              Expanded(
+            textAlign: TextAlign.left,
-                child: Text(
+            style: const TextStyle(
-                  title,
+              color: AppColors.textPrimary,
-                  maxLines: 2,
+              fontSize: AppDimens.cardTitleFont,
-                  overflow: TextOverflow.ellipsis,
+              fontWeight: FontWeight.w500,
-                  textAlign: TextAlign.left,
+              height: AppDimens.cardTitleLineHeight,
-                  style: const TextStyle(
+            ),
-                    color: AppColors.textPrimary,
-                    fontSize: AppDimens.cardTitleFont,
-                    fontWeight: FontWeight.w500,
-                    height: AppDimens.cardTitleLineHeight,
-                  ),
-                ),
-              ),
-              const SizedBox(width: AppDimens.spaceXs),
-              _views(),
-            ],
           ),
           if (tags.isNotEmpty) ...[
             const SizedBox(height: AppDimens.cardTitleTagGap),
@@ -140,30 +144,6 @@ class FollowingGridCard extends StatelessWidget {
     );
   }
 
-  Widget _views() {
-    return Row(
-      key: Key('following-views-$dramaId'),
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        const Icon(
-          Icons.auto_awesome_rounded,
-          color: AppColors.textPrimary,
-          size: AppDimens.cardViewsIcon,
-        ),
-        const SizedBox(width: AppDimens.cardPlayCountGap),
-        Text(
-          formatPlayCount(viewCount),
-          style: const TextStyle(
-            color: AppColors.textPrimary,
-            fontSize: AppDimens.cardPlayCountFont,
-            fontWeight: FontWeight.w400,
-          ),
-        ),
-      ],
-    );
-  }
-
   Widget _tags() {
     final visible = tags.take(3).toList(growable: false);
     return Text(

lib/pages/home/widgets/home_feed_card.dart

@@ -3,9 +3,9 @@
 import 'package:flutter/material.dart';
 
 import '../../../core/data/models/drama.dart';
-import '../../../core/formatting/count_format.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/cover_play_count.dart';
 import '../../../core/widgets/drama_cover_badge_ribbon.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
@@ -50,28 +50,18 @@ class HomeFeedCard extends StatelessWidget {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisAlignment: MainAxisAlignment.start,
                   children: [
-                    Row(
+                    Text(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      drama.title,
-                      crossAxisAlignment: CrossAxisAlignment.center,
+                      key: Key('home-feed-title-${drama.id}'),
-                      children: [
+                      maxLines: 2,
-                        Expanded(
+                      overflow: TextOverflow.ellipsis,
-                          child: Text(
+                      textAlign: TextAlign.left,
-                            drama.title,
+                      style: const TextStyle(
-                            key: Key('home-feed-title-${drama.id}'),
+                        color: AppColors.navSelected,
-                            maxLines: 2,
+                        fontSize: AppDimens.cardTitleFont,
-                            overflow: TextOverflow.ellipsis,
+                        fontWeight: FontWeight.w500,
-                            textAlign: TextAlign.left,
+                        height: AppDimens.cardTitleLineHeight,
-                            style: const TextStyle(
+                      ),
-                              color: AppColors.navSelected,
-                              fontSize: AppDimens.cardTitleFont,
-                              fontWeight: FontWeight.w500,
-                              height: AppDimens.cardTitleLineHeight,
-                            ),
-                          ),
-                        ),
-                        const SizedBox(width: AppDimens.spaceXs),
-                        _views(),
-                      ],
                     ),
                     const SizedBox(height: AppDimens.cardTitleTagGap),
                     _tags(),
@@ -112,6 +102,20 @@ class HomeFeedCard extends StatelessWidget {
                   keyPrefix: '${drama.id}-${badge.name}',
                 ),
               ),
+            const Positioned(
+              left: 0,
+              right: 0,
+              bottom: 0,
+              child: CoverBottomScrim(),
+            ),
+            Positioned(
+              right: 0,
+              bottom: AppDimens.cardPlayCountBottom,
+              child: CoverPlayCount(
+                key: Key('home-feed-views-${drama.id}'),
+                count: drama.viewCount,
+              ),
+            ),
           ],
         ),
       ),
@@ -145,31 +149,6 @@ class HomeFeedCard extends StatelessWidget {
     };
   }
 
-  Widget _views() {
-    return Row(
-      key: Key('home-feed-views-${drama.id}'),
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        const Icon(
-          Icons.auto_awesome_rounded,
-          size: AppDimens.cardViewsIcon,
-          color: AppColors.navSelected,
-        ),
-        const SizedBox(width: AppDimens.cardPlayCountGap),
-        Text(
-          formatPlayCount(drama.viewCount),
-          style: const TextStyle(
-            color: AppColors.navSelected,
-            fontSize: AppDimens.cardPlayCountFont,
-            fontWeight: FontWeight.w400,
-            letterSpacing: 0,
-          ),
-        ),
-      ],
-    );
-  }
-
   Widget _tags() {
     final tags = _cardTags();
     if (tags.isEmpty) return const SizedBox.shrink();

lib/pages/recommend/widgets/recommend_section_card.dart

@@ -3,9 +3,9 @@
 import 'package:flutter/material.dart';
 
 import '../../../core/data/models/drama.dart';
-import '../../../core/formatting/count_format.dart';
 import '../../../core/theme/app_colors.dart';
 import '../../../core/theme/app_dimens.dart';
+import '../../../core/widgets/cover_play_count.dart';
 import '../../../core/widgets/drama_cover_badge_ribbon.dart';
 import '../../../core/widgets/remote_image.dart';
 import '../../../l10n/app_localizations.dart';
@@ -62,32 +62,36 @@ class RecommendSectionCard extends StatelessWidget {
                           keyPrefix: '$sectionKey-${drama.id}-hot',
                         ),
                       ),
+                    const Positioned(
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      child: CoverBottomScrim(),
+                    ),
+                    Positioned(
+                      right: 0,
+                      bottom: AppDimens.cardPlayCountBottom,
+                      child: CoverPlayCount(
+                        key: Key('recommend-views-$sectionKey-${drama.id}'),
+                        count: drama.viewCount,
+                      ),
+                    ),
                   ],
                 ),
               ),
             ),
             const SizedBox(height: AppDimens.cardCoverTitleGap),
-            Row(
+            Text(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              drama.title,
-              crossAxisAlignment: CrossAxisAlignment.center,
+              key: Key('recommend-title-$sectionKey-${drama.id}'),
-              children: [
+              maxLines: 2,
-                Expanded(
+              overflow: TextOverflow.ellipsis,
-                  child: Text(
+              style: const TextStyle(
-                    drama.title,
+                color: AppColors.textPrimary,
-                    key: Key('recommend-title-$sectionKey-${drama.id}'),
+                fontSize: AppDimens.cardTitleFont,
-                    maxLines: 2,
+                fontWeight: FontWeight.w500,
-                    overflow: TextOverflow.ellipsis,
+                height: AppDimens.cardTitleLineHeight,
-                    style: const TextStyle(
+              ),
-                      color: AppColors.textPrimary,
-                      fontSize: AppDimens.cardTitleFont,
-                      fontWeight: FontWeight.w500,
-                      height: AppDimens.cardTitleLineHeight,
-                    ),
-                  ),
-                ),
-                const SizedBox(width: AppDimens.spaceXs),
-                _views(),
-              ],
             ),
             const SizedBox(height: AppDimens.cardTitleTagGap),
             _tags(),
@@ -97,30 +101,6 @@ class RecommendSectionCard extends StatelessWidget {
     );
   }
 
-  Widget _views() {
-    return Row(
-      key: Key('recommend-views-$sectionKey-${drama.id}'),
-      mainAxisSize: MainAxisSize.min,
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        const Icon(
-          Icons.auto_awesome_rounded,
-          color: AppColors.textPrimary,
-          size: AppDimens.cardViewsIcon,
-        ),
-        const SizedBox(width: AppDimens.cardPlayCountGap),
-        Text(
-          formatPlayCount(drama.viewCount),
-          style: const TextStyle(
-            color: AppColors.textPrimary,
-            fontSize: AppDimens.cardPlayCountFont,
-            fontWeight: FontWeight.w400,
-          ),
-        ),
-      ],
-    );
-  }
-
   List<String> _cardTags() {
     final seen = <String>{};
     return [drama.genre, drama.category]

test/following/following_page_test.dart

@@ -64,9 +64,10 @@ void main() {
     expect(delegate.mainAxisSpacing, AppDimens.homeGridRowGap);
     expect(delegate.childAspectRatio, AppDimens.followingGridAspectRatio);
     final card = find.byKey(const Key('following-card-the-signal-demo'));
-    final cover = tester.widget<AspectRatio>(
+    final coverFinder = find.byKey(
-      find.byKey(const Key('following-cover-the-signal-demo')),
+      const Key('following-cover-the-signal-demo'),
     );
+    final cover = tester.widget<AspectRatio>(coverFinder);
     expect(cover.aspectRatio, AppDimens.cardCoverAspectRatio);
     final coverClip = tester.widget<ClipRRect>(
       find.descendant(
@@ -89,6 +90,13 @@ void main() {
     );
     expect(views.style?.fontSize, AppDimens.cardPlayCountFont);
     expect(views.style?.fontWeight, FontWeight.w400);
+    expect(
+      find.descendant(
+        of: coverFinder,
+        matching: find.byKey(const Key('following-views-the-signal-demo')),
+      ),
+      findsOneWidget,
+    );
     expect(views.style?.color, AppColors.textPrimary);
     expect(
       find.descendant(
@@ -103,7 +111,7 @@ void main() {
     expect(tags.data, 'Suspense | Mystery');
     expect(tags.style?.fontSize, AppDimens.cardTagFont);
     expect(tags.style?.color, AppColors.textTertiary);
-    expect(tester.getTopLeft(title).dx, tester.getTopLeft(cover).dx);
+    expect(tester.getTopLeft(title).dx, tester.getTopLeft(coverFinder).dx);
     expect(tester.getTopLeft(tags).dx, tester.getTopLeft(cover).dx);
 
     await tester.tap(find.byKey(const Key('following-edit')));

test/home/home_card_style_test.dart

@@ -79,6 +79,18 @@ void main() {
     expect(viewsText.style?.color, AppColors.navSelected);
     expect(
       find.descendant(of: cover, matching: find.byKey(views)),
+      findsOneWidget,
+    );
+    expect(
+      tester.getTopRight(views).dx,
+      closeTo(tester.getTopRight(cover).dx, 1),
+    );
+    expect(
+      tester.getBottomLeft(cover).dy - tester.getBottomLeft(views).dy,
+      AppDimens.cardPlayCountBottom,
+    );
+    expect(
+      find.descendant(of: views, matching: find.byType(Container)),
       findsNothing,
     );
     expect(

test/recommend/recommend_sections_test.dart

@@ -92,9 +92,11 @@ void main() {
       coverClip.borderRadius,
       BorderRadius.circular(AppDimens.cardCoverRadius),
     );
-    final cover = tester.widget<AspectRatio>(
+    final coverFinder = find.descendant(
-      find.descendant(of: card, matching: find.byType(AspectRatio)),
+      of: card,
+      matching: find.byType(AspectRatio),
     );
+    final cover = tester.widget<AspectRatio>(coverFinder);
     expect(cover.aspectRatio, AppDimens.cardCoverAspectRatio);
     final cardTitle = tester.widget<Text>(
       find.byKey(const Key('recommend-title-hits-the-signal-demo')),
@@ -110,6 +112,13 @@ void main() {
     );
     expect(views.style?.fontSize, AppDimens.cardPlayCountFont);
     expect(views.style?.fontWeight, FontWeight.w400);
+    expect(
+      find.descendant(
+        of: coverFinder,
+        matching: find.byKey(const Key('recommend-views-hits-the-signal-demo')),
+      ),
+      findsOneWidget,
+    );
     expect(views.style?.color, AppColors.textPrimary);
     final viewIcon = find.descendant(
       of: find.byKey(const Key('recommend-views-hits-the-signal-demo')),
@@ -132,7 +141,7 @@ void main() {
     expect(tags.data, 'Suspense | Mystery');
     expect(tags.style?.fontSize, AppDimens.cardTagFont);
     expect(tags.style?.color, AppColors.textTertiary);
-    expect(tester.getTopLeft(cardTitle).dx, tester.getTopLeft(cover).dx);
+    expect(tester.getTopLeft(cardTitle).dx, tester.getTopLeft(coverFinder).dx);
     expect(tester.getTopLeft(tags).dx, tester.getTopLeft(cover).dx);
   });