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:26:52 +08:00
1 parent 3abf69e886
commit e16faa258a
10 files changed
+199 -199
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/plans/PROGRESS.md
+2 -1
View File
@@ -1112,7 +1112,8 @@ $ flutter test
## 2026-10-22 首页布局对齐修正
- 一级分类改为页内切换 6 个列表，未选 16/w400 灰字、选中 20/w700 白字，无下划线；二级 chips 仅精选显示。
- 四类短剧卡片移除底板/描边，封面统一 8 圆角，网格行距 10、封底到标题 6，题材移至右上角异形丝带。
- 四类短剧卡片移除底板/描边，封面统一 8 圆角，网格行距 10、封底到标题 6；热剧/新剧/漫剧角标移至右上角异形丝带。
- 标题下方恢复左对齐题材文字，使用 `|` 分隔、灰色小字，与封面状态角标保持独立。
- 首页搜索栏到一级、一级到二级、二级到网格间距为 8/8/10；非精选 tab 直接以 10 衔接网格。
- 播放量统一 spark 图标与 `w` 格式，整数无小数；首页、剧单、全部短剧、追剧共用。
- 全部短剧的地区、字幕、配音筛选 UI 已占位；以下接口待补：地区、字幕/配音筛选数据。
lib/core/theme/app_dimens.dart
-5
View File
@@ -92,13 +92,8 @@ abstract final class AppDimens {
static const double cardGenreRibbonLeftInset = 8;
static const double cardGenreRibbonMaxWidth = 86;
static const double cardTagFont = 11;
static const double cardTagHeight = 18;
static const double cardTagRadius = 9;
static const double cardTagHorizontalPadding = 6;
static const double cardBadgeFont = 10;
static const double cardBadgeRadius = 3;
static const double cardBadgeHorizontalPadding = 6;
static const double cardBadgeVerticalPadding = 2;
static const double cardCoverTitleGap = 6;
static const double cardTitleTagGap = 6;
static const double cardCoverAspectRatio = 5 / 6;
lib/core/widgets/drama_cover_badge_ribbon.dart
+69
View File
@@ -0,0 +1,69 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import '../theme/app_dimens.dart';
/// 封面右上角的斜边状态角标。
class DramaCoverBadgeRibbon extends StatelessWidget {
const DramaCoverBadgeRibbon({
super.key,
required this.label,
required this.color,
required this.keyPrefix,
});
final String label;
final Color color;
final String keyPrefix;
@override
Widget build(BuildContext context) {
return ClipPath(
key: Key('drama-cover-badge-ribbon-$keyPrefix'),
clipper: const _SlantedRibbonClipper(),
child: Container(
constraints: const BoxConstraints(
maxWidth: AppDimens.cardGenreRibbonMaxWidth,
),
height: AppDimens.cardGenreRibbonHeight,
padding: const EdgeInsets.only(
left:
AppDimens.cardTagHorizontalPadding +
AppDimens.cardGenreRibbonLeftInset,
right: AppDimens.cardTagHorizontalPadding,
),
alignment: Alignment.center,
color: color,
child: Text(
label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.cardBadgeFont,
fontWeight: FontWeight.w600,
),
),
),
);
}
}
class _SlantedRibbonClipper extends CustomClipper<Path> {
const _SlantedRibbonClipper();
@override
Path getClip(Size size) {
return Path()
..moveTo(AppDimens.cardGenreRibbonLeftInset, 0)
..lineTo(size.width, 0)
..lineTo(size.width, size.height)
..lineTo(0, size.height)
..close();
}
@override
bool shouldReclip(_SlantedRibbonClipper oldClipper) => false;
}
lib/core/widgets/drama_genre_ribbon.dart
-88
View File
@@ -1,88 +0,0 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import '../theme/app_colors.dart';
import '../theme/app_dimens.dart';
const List<Color> _ribbonColors = [
AppColors.badgeHot,
AppColors.badgeNew,
AppColors.badgeAnime,
];
/// 封面右上角的斜边题材丝带。
class DramaGenreRibbon extends StatelessWidget {
const DramaGenreRibbon({
super.key,
required this.tags,
required this.keyPrefix,
});
final List<String> tags;
final String keyPrefix;
@override
Widget build(BuildContext context) {
final visible = tags
.map((tag) => tag.trim())
.where((tag) => tag.isNotEmpty)
.take(3)
.toList(growable: false);
if (visible.isEmpty) return const SizedBox.shrink();
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
for (final (index, tag) in visible.indexed) ...[
if (index > 0) const SizedBox(height: 2),
ClipPath(
key: Key('drama-genre-ribbon-$keyPrefix-$index'),
clipper: const _SlantedRibbonClipper(),
child: Container(
constraints: const BoxConstraints(
maxWidth: AppDimens.cardGenreRibbonMaxWidth,
),
height: AppDimens.cardGenreRibbonHeight,
padding: const EdgeInsets.only(
left:
AppDimens.cardTagHorizontalPadding +
AppDimens.cardGenreRibbonLeftInset,
right: AppDimens.cardTagHorizontalPadding,
),
alignment: Alignment.center,
color: _ribbonColors[index % _ribbonColors.length],
child: Text(
tag,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.cardBadgeFont,
fontWeight: FontWeight.w600,
),
),
),
),
],
],
);
}
}
class _SlantedRibbonClipper extends CustomClipper<Path> {
const _SlantedRibbonClipper();
@override
Path getClip(Size size) {
return Path()
..moveTo(AppDimens.cardGenreRibbonLeftInset, 0)
..lineTo(size.width, 0)
..lineTo(size.width, size.height)
..lineTo(0, size.height)
..close();
}
@override
bool shouldReclip(_SlantedRibbonClipper oldClipper) => false;
}
lib/pages/following/following_grid_card.dart
+19 -7
View File
@@ -5,7 +5,6 @@ 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/drama_genre_ribbon.dart';
import '../../core/widgets/remote_image.dart';
class FollowingGridCard extends StatelessWidget {
@@ -95,12 +94,6 @@ class FollowingGridCard extends StatelessWidget {
),
),
),
if (!editing)
Positioned(
top: 0,
right: 0,
child: DramaGenreRibbon(tags: tags, keyPrefix: dramaId),
),
if (editing)
Positioned(
top: -6,
@@ -135,6 +128,10 @@ class FollowingGridCard extends StatelessWidget {
height: AppDimens.cardTitleLineHeight,
),
),
if (tags.isNotEmpty) ...[
const SizedBox(height: AppDimens.cardTitleTagGap),
_tags(),
],
const SizedBox(height: AppDimens.spaceXs),
Text(
subtitle,
@@ -164,4 +161,19 @@ class FollowingGridCard extends StatelessWidget {
),
);
}
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,
),
);
}
}
lib/pages/home/widgets/home_feed_card.dart
+40 -34
View File
@@ -6,7 +6,7 @@ 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/drama_genre_ribbon.dart';
import '../../../core/widgets/drama_cover_badge_ribbon.dart';
import '../../../core/widgets/remote_image.dart';
import '../../../l10n/app_localizations.dart';
import 'home_drama_classification.dart';
@@ -63,6 +63,8 @@ class HomeFeedCard extends StatelessWidget {
height: AppDimens.cardTitleLineHeight,
),
),
const SizedBox(height: AppDimens.cardTitleTagGap),
_tags(),
],
),
),
@@ -92,15 +94,14 @@ class HomeFeedCard extends StatelessWidget {
),
if (badge != null)
Positioned(
top: AppDimens.spaceXs,
left: AppDimens.spaceXs,
child: _badgeChip(l10n, badge),
top: 0,
right: 0,
child: DramaCoverBadgeRibbon(
label: _badgeLabel(l10n, badge),
color: _badgeColor(badge),
keyPrefix: '${drama.id}-${badge.name}',
),
),
Positioned(
top: 0,
right: 0,
child: DramaGenreRibbon(tags: _cardTags(), keyPrefix: drama.id),
),
Positioned(
left: AppDimens.spaceXs,
bottom: AppDimens.spaceXs,
@@ -123,32 +124,20 @@ class HomeFeedCard extends StatelessWidget {
return null;
}
Widget _badgeChip(AppLocalizations l10n, HomeDramaBadge badge) {
final (label, color) = switch (badge) {
HomeDramaBadge.hot => (l10n.homeBadgeHot, AppColors.badgeHot),
HomeDramaBadge.newRelease => (l10n.homeBadgeNew, AppColors.badgeNew),
HomeDramaBadge.anime => (l10n.homeBadgeAnime, AppColors.badgeAnime),
String _badgeLabel(AppLocalizations l10n, HomeDramaBadge badge) {
return switch (badge) {
HomeDramaBadge.hot => l10n.homeBadgeHot,
HomeDramaBadge.newRelease => l10n.homeBadgeNew,
HomeDramaBadge.anime => l10n.homeBadgeAnime,
};
}
Color _badgeColor(HomeDramaBadge badge) {
return switch (badge) {
HomeDramaBadge.hot => AppColors.badgeHot,
HomeDramaBadge.newRelease => AppColors.badgeNew,
HomeDramaBadge.anime => AppColors.badgeAnime,
};
return Container(
key: Key('home-feed-badge-${badge.name}-${drama.id}'),
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.cardBadgeHorizontalPadding,
vertical: AppDimens.cardBadgeVerticalPadding,
),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(AppDimens.cardBadgeRadius),
),
child: Text(
label,
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.cardBadgeFont,
fontWeight: FontWeight.w700,
letterSpacing: 0,
),
),
);
}
Widget _views() {
@@ -182,6 +171,23 @@ class HomeFeedCard extends StatelessWidget {
);
}
Widget _tags() {
final tags = _cardTags();
if (tags.isEmpty) return const SizedBox.shrink();
return Text(
tags.join(' | '),
key: Key('home-feed-tags-${drama.id}'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: const TextStyle(
color: AppColors.textTertiary,
fontSize: AppDimens.cardTagFont,
letterSpacing: 0,
),
);
}
List<String> _cardTags() {
final seen = <String>{};
return [drama.genre, drama.category]
lib/pages/recommend/widgets/recommend_section_card.dart
+25 -31
View File
@@ -6,7 +6,7 @@ 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/drama_genre_ribbon.dart';
import '../../../core/widgets/drama_cover_badge_ribbon.dart';
import '../../../core/widgets/remote_image.dart';
import '../../../l10n/app_localizations.dart';
import '../../home/widgets/home_drama_classification.dart';
@@ -54,38 +54,14 @@ class RecommendSectionCard extends StatelessWidget {
),
if (isHotDrama(drama))
Positioned(
top: AppDimens.spaceXs,
left: AppDimens.spaceXs,
child: Container(
key: Key('recommend-hot-$sectionKey-${drama.id}'),
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.cardBadgeHorizontalPadding,
vertical: AppDimens.cardBadgeVerticalPadding,
),
decoration: BoxDecoration(
color: AppColors.badgeHot,
borderRadius: BorderRadius.circular(
AppDimens.cardBadgeRadius,
),
),
child: Text(
l10n.homeBadgeHot,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.cardBadgeFont,
fontWeight: FontWeight.w700,
),
),
top: 0,
right: 0,
child: DramaCoverBadgeRibbon(
label: l10n.homeBadgeHot,
color: AppColors.badgeHot,
keyPrefix: '$sectionKey-${drama.id}-hot',
),
),
Positioned(
top: 0,
right: 0,
child: DramaGenreRibbon(
tags: _cardTags(),
keyPrefix: '$sectionKey-${drama.id}',
),
),
],
),
),
@@ -123,6 +99,8 @@ class RecommendSectionCard extends StatelessWidget {
height: AppDimens.cardTitleLineHeight,
),
),
const SizedBox(height: AppDimens.cardTitleTagGap),
_tags(),
],
),
),
@@ -138,4 +116,20 @@ class RecommendSectionCard extends StatelessWidget {
.take(3)
.toList(growable: false);
}
Widget _tags() {
final tags = _cardTags();
if (tags.isEmpty) return const SizedBox.shrink();
return Text(
tags.join(' | '),
key: Key('recommend-tags-$sectionKey-${drama.id}'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.left,
style: const TextStyle(
color: AppColors.textTertiary,
fontSize: AppDimens.cardTagFont,
),
);
}
}
test/following/following_page_test.dart
+6 -9
View File
@@ -96,17 +96,14 @@ void main() {
),
findsOneWidget,
);
final ribbon = find.byKey(
const Key('drama-genre-ribbon-the-signal-demo-0'),
final tags = tester.widget<Text>(
find.byKey(const Key('following-tags-the-signal-demo')),
);
expect(ribbon, findsOneWidget);
final ribbonText = tester.widget<Text>(
find.descendant(of: ribbon, matching: find.byType(Text)),
);
expect(ribbonText.data, 'Suspense');
expect(ribbonText.style?.fontSize, AppDimens.cardBadgeFont);
expect(ribbonText.style?.color, AppColors.textPrimary);
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(tags).dx, tester.getTopLeft(cover).dx);
await tester.tap(find.byKey(const Key('following-edit')));
await tester.pumpAndSettle();
test/home/home_card_style_test.dart
+23 -16
View File
@@ -48,13 +48,10 @@ void main() {
coverClip.borderRadius,
BorderRadius.circular(AppDimens.cardCoverRadius),
);
final badge = find.byKey(const Key('home-feed-badge-anime-anime-card'));
expect(badge, findsOneWidget);
final badgeContainer = tester.widget<Container>(badge);
expect(
(badgeContainer.decoration! as BoxDecoration).borderRadius,
BorderRadius.circular(AppDimens.cardBadgeRadius),
final badge = find.byKey(
const Key('drama-cover-badge-ribbon-anime-card-anime'),
);
expect(badge, findsOneWidget);
expect(
tester
.widget<Text>(find.descendant(of: badge, matching: find.byType(Text)))
@@ -62,6 +59,14 @@ void main() {
?.fontSize,
AppDimens.cardBadgeFont,
);
expect(
tester.getTopRight(badge).dx,
closeTo(tester.getTopRight(cover).dx, 1),
);
expect(
tester.getTopRight(badge).dy,
closeTo(tester.getTopRight(cover).dy, 1),
);
expect(find.text('Anime'), findsOneWidget);
expect(find.byKey(const Key('home-feed-views-anime-card')), findsOneWidget);
final views = find.byKey(const Key('home-feed-views-anime-card'));
@@ -85,15 +90,14 @@ void main() {
expect(title.style?.fontSize, AppDimens.cardTitleFont);
expect(title.style?.fontWeight, FontWeight.w500);
expect(title.style?.height, AppDimens.cardTitleLineHeight);
final ribbon = find.byKey(const Key('drama-genre-ribbon-anime-card-0'));
expect(ribbon, findsOneWidget);
final ribbonText = tester.widget<Text>(
find.descendant(of: ribbon, matching: find.byType(Text)),
final tags = tester.widget<Text>(
find.byKey(const Key('home-feed-tags-anime-card')),
);
expect(ribbonText.data, 'Romance');
expect(ribbonText.style?.fontSize, AppDimens.cardBadgeFont);
expect(ribbonText.style?.color, AppColors.textPrimary);
expect(tags.data, 'Romance | Urban');
expect(tags.style?.fontSize, AppDimens.cardTagFont);
expect(tags.style?.color, AppColors.textTertiary);
expect(tester.getTopLeft(title).dx, tester.getTopLeft(cover).dx);
expect(tester.getTopLeft(tags).dx, tester.getTopLeft(cover).dx);
await tester.tap(card);
expect(taps, 1);
@@ -134,14 +138,17 @@ void main() {
await tester.pumpAndSettle();
expect(
find.byKey(const Key('home-feed-badge-anime-anime')),
find.byKey(const Key('drama-cover-badge-ribbon-anime-anime')),
findsOneWidget,
);
expect(
find.byKey(const Key('home-feed-badge-newRelease-new')),
find.byKey(const Key('drama-cover-badge-ribbon-new-newRelease')),
findsOneWidget,
);
expect(
find.byKey(const Key('drama-cover-badge-ribbon-hot-hot')),
findsOneWidget,
);
expect(find.byKey(const Key('home-feed-badge-hot-hot')), findsOneWidget);
});
}
test/recommend/recommend_sections_test.dart
+15 -8
View File
@@ -115,17 +115,24 @@ void main() {
matching: find.byIcon(Icons.auto_awesome_rounded),
);
expect(viewIcon, findsOneWidget);
final ribbon = find.byKey(
const Key('drama-genre-ribbon-hits-the-signal-demo-0'),
final badge = find.byKey(
const Key('drama-cover-badge-ribbon-hits-the-signal-demo-hot'),
);
expect(ribbon, findsOneWidget);
final ribbonText = tester.widget<Text>(
find.descendant(of: ribbon, matching: find.byType(Text)),
expect(badge, findsOneWidget);
final badgeText = tester.widget<Text>(
find.descendant(of: badge, matching: find.byType(Text)),
);
expect(ribbonText.data, 'Suspense');
expect(ribbonText.style?.fontSize, AppDimens.cardBadgeFont);
expect(ribbonText.style?.color, AppColors.textPrimary);
expect(badgeText.data, 'Hit');
expect(badgeText.style?.fontSize, AppDimens.cardBadgeFont);
expect(badgeText.style?.color, AppColors.textPrimary);
final tags = tester.widget<Text>(
find.byKey(const Key('recommend-tags-hits-the-signal-demo')),
);
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(tags).dx, tester.getTopLeft(cover).dx);
});
testWidgets('should_switch_inner_tabs_without_losing_grid_filter_state', (