jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-22 18:30:33 +08:00
1 parent e11f55777e
commit 972e542e5c
10 files changed
+179 -147
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/plans/PROGRESS.md
+1 -1
View File
@@ -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
+2
View File
@@ -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
+2
View File
@@ -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
+60
View File
@@ -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
+26 -46
View File
@@ -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(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text(
title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.cardTitleFont,
fontWeight: FontWeight.w500,
height: AppDimens.cardTitleLineHeight,
),
),
),
const SizedBox(width: AppDimens.spaceXs),
_views(),
],
Text(
title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.cardTitleFont,
fontWeight: FontWeight.w500,
height: AppDimens.cardTitleLineHeight,
),
),
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
+27 -48
View File
@@ -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(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text(
drama.title,
key: Key('home-feed-title-${drama.id}'),
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.cardTitleFont,
fontWeight: FontWeight.w500,
height: AppDimens.cardTitleLineHeight,
),
),
),
const SizedBox(width: AppDimens.spaceXs),
_views(),
],
Text(
drama.title,
key: Key('home-feed-title-${drama.id}'),
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.cardTitleFont,
fontWeight: FontWeight.w500,
height: AppDimens.cardTitleLineHeight,
),
),
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
+26 -46
View File
@@ -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(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text(
drama.title,
key: Key('recommend-title-$sectionKey-${drama.id}'),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.cardTitleFont,
fontWeight: FontWeight.w500,
height: AppDimens.cardTitleLineHeight,
),
),
),
const SizedBox(width: AppDimens.spaceXs),
_views(),
],
Text(
drama.title,
key: Key('recommend-title-$sectionKey-${drama.id}'),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.cardTitleFont,
fontWeight: FontWeight.w500,
height: AppDimens.cardTitleLineHeight,
),
),
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
+11 -3
View File
@@ -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>(
find.byKey(const Key('following-cover-the-signal-demo')),
final coverFinder = find.byKey(
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
+12
View File
@@ -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
+12 -3
View File
@@ -92,9 +92,11 @@ void main() {
coverClip.borderRadius,
BorderRadius.circular(AppDimens.cardCoverRadius),
);
final cover = tester.widget<AspectRatio>(
find.descendant(of: card, matching: find.byType(AspectRatio)),
final coverFinder = find.descendant(
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);
});