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

feat(ranking): 榜单改为统一行布局

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-11-02 14:44:32 +08:00
1 parent 7f65fe4d48
commit 8c1662475a
16 files changed
+927 -390
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/theme/app_dimens.dart
+2 -10
View File
@@ -157,17 +157,9 @@ abstract final class AppDimens {
/// 首页热播榜。
static const double rankingHeroTitle = 22;
static const double rankingHeroSubtitle = 11;
static const double rankingPodiumChampionWidth = 110;
static const double rankingPodiumChampionHeight = 146;
static const double rankingPodiumWidth = 92;
static const double rankingPodiumHeight = 122;
static const double rankingPodiumRadius = 10;
static const double rankingRowHeight = 96;
static const double rankingNumberWidth = 56;
static const double rankingNumberFont = 48;
static const double rankingCoverWidth = 60;
static const double rankingCoverHeight = 80;
static const double rankingCoverRadius = 6;
static const double rankingCardCoverWidth = 96;
static const double rankingCardCoverHeight = 128;
/// 全部短剧筛选与追剧双列。
static const double filterChipFont = 16;
lib/l10n/app_en.arb
+7 -1
View File
@@ -83,6 +83,12 @@
"count": {"type": "String"}
}
},
"likesLabel": "{count} likes",
"@likesLabel": {
"placeholders": {
"count": {"type": "String"}
}
},
"topCharts": "Hot Ranking",
"newReleases": "New Releases",
"newDramas": "New",
@@ -359,7 +365,7 @@
"categoriesError": "Categories could not be loaded.",
"detailError": "The episode list could not be loaded.",
"noMediaNotice": "This episode has no playable media yet.",
"noStories": "No stories available yet.",
"noStories": "No stories available yet",
"notices": "Notices",
"noNotices": "No notices yet.",
"noticesLoadFailed": "Notices could not be loaded.",
lib/l10n/app_id.arb
+2 -1
View File
@@ -72,6 +72,7 @@
"authorNoteLabel": "Catatan penulis",
"reserve": "Reservasi",
"heatLabel": "{count} panas",
"likesLabel": "{count} suka",
"topCharts": "Peringkat Populer",
"newReleases": "Rilisan Baru",
"newDramas": "Baru",
@@ -338,7 +339,7 @@
"categoriesError": "Kategori gagal dimuat.",
"detailError": "Daftar episode gagal dimuat.",
"noMediaNotice": "Episode ini belum punya media yang bisa diputar.",
"noStories": "Belum ada cerita.",
"noStories": "Belum ada cerita",
"notices": "Notifikasi",
"noNotices": "Belum ada notifikasi.",
"noticesLoadFailed": "Notifikasi tidak dapat dimuat.",
lib/l10n/app_localizations.dart
+7 -1
View File
@@ -442,6 +442,12 @@ abstract class AppLocalizations {
/// **'{count} heat'**
String heatLabel(String count);
/// No description provided for @likesLabel.
///
/// In en, this message translates to:
/// **'{count} likes'**
String likesLabel(String count);
/// No description provided for @topCharts.
///
/// In en, this message translates to:
@@ -1393,7 +1399,7 @@ abstract class AppLocalizations {
/// No description provided for @noStories.
///
/// In en, this message translates to:
/// **'No stories available yet.'**
/// **'No stories available yet'**
String get noStories;
/// No description provided for @notices.
lib/l10n/app_localizations_en.dart
+6 -1
View File
@@ -191,6 +191,11 @@ class AppLocalizationsEn extends AppLocalizations {
return '$count heat';
}
@override
String likesLabel(String count) {
return '$count likes';
}
@override
String get topCharts => 'Hot Ranking';
@@ -709,7 +714,7 @@ class AppLocalizationsEn extends AppLocalizations {
String get noMediaNotice => 'This episode has no playable media yet.';
@override
String get noStories => 'No stories available yet.';
String get noStories => 'No stories available yet';
@override
String get notices => 'Notices';
lib/l10n/app_localizations_id.dart
+6 -1
View File
@@ -191,6 +191,11 @@ class AppLocalizationsId extends AppLocalizations {
return '$count panas';
}
@override
String likesLabel(String count) {
return '$count suka';
}
@override
String get topCharts => 'Peringkat Populer';
@@ -712,7 +717,7 @@ class AppLocalizationsId extends AppLocalizations {
'Episode ini belum punya media yang bisa diputar.';
@override
String get noStories => 'Belum ada cerita.';
String get noStories => 'Belum ada cerita';
@override
String get notices => 'Notifikasi';
lib/l10n/app_localizations_zh.dart
+6 -1
View File
@@ -189,6 +189,11 @@ class AppLocalizationsZh extends AppLocalizations {
return '$count热度';
}
@override
String likesLabel(String count) {
return '$count次点赞';
}
@override
String get topCharts => '热播榜';
@@ -702,7 +707,7 @@ class AppLocalizationsZh extends AppLocalizations {
String get noMediaNotice => '该剧集还没有可播放的片源。';
@override
String get noStories => '暂无剧目。';
String get noStories => '暂无剧目';
@override
String get notices => '通知';
lib/l10n/app_zh.arb
+2 -1
View File
@@ -72,6 +72,7 @@
"authorNoteLabel": "作者声明",
"reserve": "预约",
"heatLabel": "{count}热度",
"likesLabel": "{count}次点赞",
"topCharts": "热播榜",
"newReleases": "新剧",
"newDramas": "新剧",
@@ -300,7 +301,7 @@
"categoriesError": "分类加载失败。",
"detailError": "剧集信息加载失败。",
"noMediaNotice": "该剧集还没有可播放的片源。",
"noStories": "暂无剧目。",
"noStories": "暂无剧目",
"notices": "通知",
"noNotices": "暂无通知。",
"noticesLoadFailed": "通知加载失败，请重试。",
lib/pages/home/widgets/home_ranking_dramas.dart
+173
View File
@@ -0,0 +1,173 @@
// Author: fruit.com.cn
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../core/data/models/category_ranking.dart';
import '../../../core/data/models/drama.dart';
import '../../../core/data/services/category_controller.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/app_pull_to_refresh.dart';
import '../../../core/widgets/drama_grid_skeleton.dart';
import '../../../core/widgets/empty_state.dart';
import '../../../l10n/app_localizations.dart';
import '../../ranking/widgets/ranking_drama_row.dart';
/// 榜单页顶部暗红光晕，向下淡入纯黑（与剧场榜单页一致）。
const BoxDecoration _rankingBackdrop = BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
AppColors.followingGlow,
AppColors.followingGlowMid,
AppColors.appBackground,
],
stops: [0, 0.14, 0.3],
),
);
/// 推荐榜频道：服务端排名快照，统一行布局，名次角标压在封面左上角。
class HomeRankingDramas extends StatefulWidget {
const HomeRankingDramas({
super.key,
required this.categoryId,
required this.onOpenDrama,
this.topPadding = AppDimens.spaceLg,
});
final String categoryId;
final ValueChanged<Drama> onOpenDrama;
final double topPadding;
@override
State<HomeRankingDramas> createState() => _HomeRankingDramasState();
}
class _HomeRankingDramasState extends State<HomeRankingDramas> {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => _ensureLoaded());
}
@override
void didUpdateWidget(HomeRankingDramas oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.categoryId != widget.categoryId) _ensureLoaded();
}
void _ensureLoaded() {
if (!mounted) return;
final controller = context.read<CategoryController>();
final slot = controller.rankingSlotOf(widget.categoryId);
if (slot.loading || slot.ranking != null) return;
unawaited(controller.openRanking(widget.categoryId));
}
@override
Widget build(BuildContext context) {
final controller = context.watch<CategoryController>();
final slot = controller.rankingSlotOf(widget.categoryId);
final entries = slot.ranking?.entries ?? const <CategoryRankingEntry>[];
if (slot.loading && entries.isEmpty) {
return const DecoratedBox(
key: Key('home-ranking-surface'),
decoration: _rankingBackdrop,
child: DramaGridSkeleton(
key: Key('home-ranking-skeleton'),
columns: 3,
horizontalPadding: AppDimens.feedPageHorizontal,
crossAxisSpacing: AppDimens.homeGridGap,
mainAxisSpacing: AppDimens.homeGridRowGap,
),
);
}
return DecoratedBox(
key: const Key('home-ranking-surface'),
decoration: _rankingBackdrop,
child: Material(
type: MaterialType.transparency,
child: AppPullToRefresh(
key: const Key('home-ranking-refresh'),
onRefresh: () => controller.openRanking(widget.categoryId),
child: _content(context, entries, slot.error),
),
),
);
}
Widget _content(
BuildContext context,
List<CategoryRankingEntry> entries,
Object? error,
) {
final l10n = AppLocalizations.of(context)!;
if (entries.isEmpty) {
return CustomScrollView(
key: PageStorageKey<String>('home-ranking-scroll-${widget.categoryId}'),
physics: AppPullToRefresh.physics,
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: EmptyState(
key: Key(
error == null ? 'home-ranking-empty' : 'home-ranking-error',
),
icon: error == null
? Icons.leaderboard_outlined
: Icons.cloud_off_rounded,
title: error == null ? l10n.emptyContent : l10n.catalogError,
actionLabel: error == null ? null : l10n.retry,
onAction: error == null
? null
: () => unawaited(
context.read<CategoryController>().openRanking(
widget.categoryId,
),
),
stretchContent: true,
),
),
],
);
}
return CustomScrollView(
key: PageStorageKey<String>('home-ranking-scroll-${widget.categoryId}'),
physics: AppPullToRefresh.physics,
slivers: [
SliverPadding(
padding: EdgeInsets.fromLTRB(
AppDimens.feedPageHorizontal,
widget.topPadding,
AppDimens.feedPageHorizontal,
AppDimens.spaceXl,
),
sliver: SliverList.separated(
itemCount: entries.length,
itemBuilder: (context, index) => _row(entries[index]),
separatorBuilder: (_, _) => const Divider(
height: AppDimens.mineGridDividerWidth,
thickness: AppDimens.mineGridDividerWidth,
color: AppColors.border,
),
),
),
],
);
}
Widget _row(CategoryRankingEntry entry) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: AppDimens.spaceSm),
child: RankingDramaRow(
rank: entry.rank,
drama: entry.drama,
onTap: () => widget.onOpenDrama(entry.drama),
),
);
}
}
lib/pages/ranking/ranking_page.dart
+20 -328
View File
@@ -7,26 +7,20 @@ import 'package:provider/provider.dart';
import '../../core/data/models/drama.dart';
import '../../core/data/services/catalog_controller.dart';
import '../../core/formatting/count_format.dart';
import '../../core/theme/app_colors.dart';
import '../../core/theme/app_dimens.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';
import '../player/open_player.dart';
import 'widgets/ranking_drama_row.dart';
const int _topCount = 50;
const double _loadMoreThreshold = 200;
const double _championLift = 12;
const double _podiumGap = 8;
const double _podiumHorizontal = 8;
const double _championScale = 1.18;
const double _coverAspect = 146 / 110;
/// 剧场榜单页：前三名领奖台，第 4 名起为单列排行行。
/// 剧场榜单页：统一行布局，名次角标压在封面左上角，右侧字段无数据不展示。
class RankingPage extends StatefulWidget {
const RankingPage({super.key, this.embedded = false});
@@ -101,8 +95,6 @@ class _RankingPageState extends State<RankingPage> {
final l10n = AppLocalizations.of(context)!;
final catalog = context.watch<CatalogController>();
final top = _pager!.visibleItems;
final podium = top.take(3).toList(growable: false);
final rest = top.skip(3).toList(growable: false);
final content = NotificationListener<ScrollNotification>(
onNotification: _onScroll,
child: AppPullToRefresh(
@@ -118,38 +110,31 @@ class _RankingPageState extends State<RankingPage> {
: [
if (widget.embedded) _intro(l10n),
const SizedBox(height: AppDimens.spaceMd),
if (podium.isNotEmpty)
for (var index = 0; index < top.length; index++) ...[
Padding(
padding: const EdgeInsets.symmetric(
horizontal: _podiumHorizontal,
horizontal: AppDimens.feedPageHorizontal,
vertical: AppDimens.spaceSm,
),
child: RankingDramaRow(
rank: index + 1,
drama: top[index],
onTap: () => unawaited(
playDramaFromCatalog(context, top[index]),
),
),
child: _Podium(podium: podium, l10n: l10n),
),
if (rest.isNotEmpty) ...[
const SizedBox(height: AppDimens.spaceXl),
for (var index = 0; index < rest.length; index++) ...[
Padding(
padding: const EdgeInsets.symmetric(
if (index != top.length - 1)
const Padding(
padding: EdgeInsets.symmetric(
horizontal: AppDimens.feedPageHorizontal,
),
child: _RankingRow(
index: index + 3,
drama: rest[index],
l10n: l10n,
child: Divider(
height: AppDimens.mineGridDividerWidth,
thickness: AppDimens.mineGridDividerWidth,
color: AppColors.border,
),
),
if (index != rest.length - 1)
const Padding(
padding: EdgeInsets.symmetric(
horizontal: AppDimens.feedPageHorizontal,
),
child: Divider(
height: AppDimens.mineGridDividerWidth,
thickness: AppDimens.mineGridDividerWidth,
color: AppColors.border,
),
),
],
],
PagedLoadFooter(
loading: _pager!.loading,
@@ -221,302 +206,9 @@ class _RankingPageState extends State<RankingPage> {
title: catalog.error == null ? l10n.noStories : l10n.catalogError,
actionLabel: catalog.error == null ? null : l10n.retry,
onAction: catalog.error == null ? null : () => unawaited(_refresh()),
stretchContent: true,
),
),
);
}
}
class _Podium extends StatelessWidget {
const _Podium({required this.podium, required this.l10n});
final List<Drama> podium;
final AppLocalizations l10n;
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
final available = constraints.maxWidth - _podiumGap * 2;
final side = available / (2 + _championScale);
final champion = side * _championScale;
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
width: side,
child: podium.length > 1
? _PodiumCard(
rank: 2,
drama: podium[1],
l10n: l10n,
coverWidth: side,
)
: const SizedBox.shrink(),
),
const SizedBox(width: _podiumGap),
SizedBox(
width: champion,
child: podium.isNotEmpty
? Transform.translate(
offset: const Offset(0, -_championLift),
child: _PodiumCard(
rank: 1,
drama: podium.first,
l10n: l10n,
coverWidth: champion,
),
)
: const SizedBox.shrink(),
),
const SizedBox(width: _podiumGap),
SizedBox(
width: side,
child: podium.length > 2
? _PodiumCard(
rank: 3,
drama: podium[2],
l10n: l10n,
coverWidth: side,
)
: const SizedBox.shrink(),
),
],
);
},
);
}
}
class _PodiumCard extends StatelessWidget {
const _PodiumCard({
required this.rank,
required this.drama,
required this.l10n,
required this.coverWidth,
});
final int rank;
final Drama drama;
final AppLocalizations l10n;
final double coverWidth;
double get _coverHeight => coverWidth * _coverAspect;
Color get _badgeColor => switch (rank) {
1 => AppColors.homeCrownGold,
2 => AppColors.rankSilver,
_ => AppColors.bronze,
};
Color get _badgeTextColor =>
rank == 3 ? AppColors.textPrimary : AppColors.onGold;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => unawaited(playDramaFromCatalog(context, drama)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(AppDimens.rankingPodiumRadius),
child: SizedBox(
key: Key('ranking-cover-$rank'),
width: coverWidth,
height: _coverHeight,
child: Stack(
fit: StackFit.expand,
children: [
RemoteImage(
drama.posterUrl,
fit: BoxFit.cover,
showFallbackIcon: true,
fallbackAspectRatio: 3 / 4,
),
Positioned(
top: 4,
left: 4,
child: Container(
key: Key('ranking-top-$rank'),
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
decoration: BoxDecoration(
color: _badgeColor,
borderRadius: BorderRadius.circular(6),
),
child: Text(
l10n.topLabel(rank),
maxLines: 1,
style: TextStyle(
color: _badgeTextColor,
fontSize: 11,
fontWeight: FontWeight.w800,
),
),
),
),
],
),
),
),
const SizedBox(height: 6),
SizedBox(
height: 34,
child: Text(
drama.title,
key: Key('ranking-title-$rank'),
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: 13,
fontWeight: FontWeight.w600,
height: 1.25,
),
),
),
if (drama.viewCount > 0) ...[
const SizedBox(height: 2),
_heat(drama.viewCount, l10n),
],
],
),
);
}
}
class _RankingRow extends StatelessWidget {
const _RankingRow({
required this.index,
required this.drama,
required this.l10n,
});
final int index;
final Drama drama;
final AppLocalizations l10n;
int get _rank => index + 1;
String get _category {
final values = <String>{};
for (final value in [drama.genre, drama.category]) {
for (final part in value.split(RegExp(r'[,/、·]'))) {
final tag = part.trim();
if (tag.isNotEmpty) values.add(tag);
}
}
return values.join(' · ');
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: AppDimens.rankingRowHeight,
child: Material(
color: AppColors.transparent,
child: InkWell(
key: Key('ranking-row-$index'),
onTap: () => unawaited(playDramaFromCatalog(context, drama)),
child: Row(
children: [
SizedBox(
width: AppDimens.rankingNumberWidth,
child: Text(
'$_rank',
key: Key('ranking-top-$_rank'),
textAlign: TextAlign.center,
maxLines: 1,
style: TextStyle(
color: AppColors.textPrimary.withValues(alpha: 0.12),
fontSize: AppDimens.rankingNumberFont,
fontWeight: FontWeight.w800,
height: 1,
),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(
AppDimens.rankingCoverRadius,
),
child: SizedBox(
key: Key('ranking-row-cover-$_rank'),
width: AppDimens.rankingCoverWidth,
height: AppDimens.rankingCoverHeight,
child: RemoteImage(
drama.posterUrl,
fit: BoxFit.cover,
showFallbackIcon: true,
fallbackAspectRatio: 3 / 4,
),
),
),
const SizedBox(width: AppDimens.spaceMd),
Expanded(
child: SizedBox(
height: AppDimens.rankingCoverHeight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
drama.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: 15,
fontWeight: FontWeight.w500,
),
),
if (_category.isNotEmpty) ...[
const SizedBox(height: AppDimens.spaceXs),
Text(
_category,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textTertiary,
fontSize: 11,
),
),
],
const Spacer(),
if (drama.viewCount > 0) _heat(drama.viewCount, l10n),
],
),
),
),
],
),
),
),
);
}
}
Widget _heat(int count, AppLocalizations l10n) {
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.local_fire_department_rounded,
color: AppColors.textTertiary,
size: 11,
),
const SizedBox(width: 4),
Flexible(
child: Text(
l10n.heatLabel(formatPlayCount(count)),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(color: AppColors.textTertiary, fontSize: 11),
),
),
],
);
}
lib/pages/ranking/widgets/ranking_drama_row.dart
+229
View File
@@ -0,0 +1,229 @@
// Author: fruit.com.cn
// 榜单统一行：名次角标压在封面左上角，右侧字段无数据不展示。
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/remote_image.dart';
import '../../../l10n/app_localizations.dart';
const double _badgeSize = 24;
const double _badgeCornerRadius = 10;
const double _badgeFontSize = 14;
const double _titleFontSize = 16;
const double _metaLineGap = 2;
const double _lineHeight = 1.25;
const int _synopsisMaxLines = 3;
const double _metaFontSize = 12;
const double _tagFontSize = 10;
const double _flameSize = 13;
const double _flameGap = 2;
const double _badgeMutedAlpha = 0.6;
const double _badgeTextHeight = 1;
/// 榜单行：左侧 3:4 封面带名次角标，右侧标题/分类/简介/底行元信息。
class RankingDramaRow extends StatelessWidget {
const RankingDramaRow({
super.key,
required this.rank,
required this.drama,
required this.onTap,
});
final int rank;
final Drama drama;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return SizedBox(
height: AppDimens.rankingCardCoverHeight,
child: Material(
color: AppColors.transparent,
child: InkWell(
key: Key('ranking-row-${rank - 1}'),
onTap: onTap,
child: Row(
children: [
_cover(),
const SizedBox(width: AppDimens.spaceMd),
Expanded(child: _info(l10n)),
],
),
),
),
);
}
String get _category {
final values = <String>{};
for (final value in [drama.genre, drama.category]) {
for (final part in value.split(RegExp(r'[,/、·]'))) {
final tag = part.trim();
if (tag.isNotEmpty) values.add(tag);
}
}
return values.join(' · ');
}
Color get _badgeColor => switch (rank) {
1 => AppColors.brandRed,
2 => AppColors.homeCrownGold,
3 => AppColors.bronze,
_ => AppColors.ink.withValues(alpha: _badgeMutedAlpha),
};
Widget _badge() {
return Container(
key: Key('ranking-top-$rank'),
width: _badgeSize,
height: _badgeSize,
alignment: Alignment.center,
decoration: BoxDecoration(
color: _badgeColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(AppDimens.rankingCoverRadius),
bottomRight: Radius.circular(_badgeCornerRadius),
),
),
child: Text(
'$rank',
maxLines: 1,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: _badgeFontSize,
fontWeight: FontWeight.w700,
height: _badgeTextHeight,
),
),
);
}
Widget _cover() {
return ClipRRect(
borderRadius: BorderRadius.circular(AppDimens.rankingCoverRadius),
child: SizedBox(
key: Key('ranking-row-cover-$rank'),
width: AppDimens.rankingCardCoverWidth,
height: AppDimens.rankingCardCoverHeight,
child: Stack(
fit: StackFit.expand,
children: [
RemoteImage(
drama.posterUrl,
fit: BoxFit.cover,
fallbackWidget: const ColoredBox(color: AppColors.raised),
),
Positioned(top: 0, left: 0, child: _badge()),
],
),
),
);
}
Widget _info(AppLocalizations l10n) {
final category = _category;
final synopsis = drama.synopsis.trim();
return SizedBox(
height: AppDimens.rankingCardCoverHeight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
drama.title,
key: Key('ranking-title-$rank'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: _titleFontSize,
fontWeight: FontWeight.w600,
height: _lineHeight,
),
),
if (category.isNotEmpty) _metaText(category),
if (synopsis.isNotEmpty)
_metaText(synopsis, maxLines: _synopsisMaxLines),
const SizedBox(height: _metaLineGap),
_bottomMeta(l10n),
],
),
);
}
Widget _metaText(String text, {int maxLines = 1}) {
return Padding(
padding: const EdgeInsets.only(top: _metaLineGap),
child: Text(
text,
maxLines: maxLines,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textTertiary,
fontSize: _metaFontSize,
height: _lineHeight,
),
),
);
}
Widget _bottomMeta(AppLocalizations l10n) {
final tag = drama.tag.trim();
final metas = <String>[
if (drama.viewCount > 0) l10n.heatLabel(formatPlayCount(drama.viewCount)),
if (drama.likeCount != null)
l10n.likesLabel(formatInteractionCount(drama.likeCount!)),
];
if (tag.isEmpty && metas.isEmpty) return const SizedBox.shrink();
return Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: AppDimens.spaceSm,
runSpacing: _metaLineGap,
children: [
if (tag.isNotEmpty) _tagText(tag),
if (metas.isNotEmpty)
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.local_fire_department_rounded,
color: AppColors.actionRed,
size: _flameSize,
),
const SizedBox(width: _flameGap),
Flexible(
child: Text(
metas.join(' · '),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textTertiary,
fontSize: _metaFontSize,
height: _lineHeight,
),
),
),
],
),
],
);
}
Widget _tagText(String tag) {
return Text(
tag,
key: Key('ranking-tag-$rank'),
maxLines: 1,
style: TextStyle(
color: drama.tagRibbonColor(AppColors.brandRed),
fontSize: _tagFontSize,
fontWeight: FontWeight.w600,
height: _lineHeight,
),
);
}
}
lib/pages/recommend/recommend_discover_page.dart
+34 -10
View File
@@ -10,11 +10,13 @@ import '../../core/data/models/home_feed.dart';
import '../../core/data/remote/catalog_api.dart';
import '../../core/data/services/category_controller.dart';
import '../../core/theme/app_colors.dart';
import '../../core/theme/app_dimens.dart';
import '../../core/widgets/app_pull_to_refresh.dart';
import '../../core/widgets/empty_state.dart';
import '../../core/widgets/paged_list_footer.dart';
import '../../l10n/app_localizations.dart';
import '../player/open_player.dart';
import '../home/widgets/home_ranking_dramas.dart';
import 'widgets/home_hero_carousel.dart';
import 'widgets/home_recommend_content.dart';
import 'widgets/recommend_channel_nav.dart';
@@ -100,6 +102,21 @@ class _RecommendDiscoverPageState extends State<RecommendDiscoverPage>
if (_requestedCategories.contains(id)) return;
_requestedCategories.add(id);
final categories = context.read<CategoryController>();
final category = categories.categories
.where((item) => item.id == id)
.firstOrNull;
if (category?.isRanking ?? false) {
final slot = categories.rankingSlotOf(id);
if (categories.rankingLoader == null ||
slot.ranking != null ||
slot.loading) {
return;
}
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) unawaited(categories.openRanking(id));
});
return;
}
if (categories.dramaPageLoader == null) return;
final slot = categories.slotOf(id);
if (slot.dramas.isNotEmpty || slot.loading) return;
@@ -171,6 +188,16 @@ class _RecommendDiscoverPageState extends State<RecommendDiscoverPage>
onPageChanged: (i) => _onPageChanged(i, orderedIds),
itemBuilder: (context, index) {
final category = categoryList[index];
if (category.isRanking) {
return HomeRankingDramas(
key: PageStorageKey<String>(
'recommend-ranking-${category.id}',
),
categoryId: category.id,
topPadding: mediaTop + RecommendChannelNav.height,
onOpenDrama: _openDrama,
);
}
return _ChannelFeed(
key: PageStorageKey<String>(
'recommend-channel-${category.id}',
@@ -318,21 +345,14 @@ class _ChannelFeedState extends State<_ChannelFeed>
sliverList.add(
SliverFillRemaining(
hasScrollBody: false,
child: Padding(
padding: EdgeInsets.only(
top: showCarousel
? 0
: widget.mediaTop + RecommendChannelNav.height,
),
child: Center(child: _placeholder(slot.loading)),
),
child: Center(child: _placeholder(slot.loading)),
),
);
} else if (widget.isFeatured) {
// 无轮播图时内容需避开顶部悬浮导航。
final contentTop = showCarousel
? 24.0
: widget.mediaTop + RecommendChannelNav.height + 16;
: widget.mediaTop + RecommendChannelNav.height + AppDimens.spaceSm;
if (newArrivals.isNotEmpty) {
sliverList.add(SliverToBoxAdapter(child: SizedBox(height: contentTop)));
sliverList.add(
@@ -358,7 +378,9 @@ class _ChannelFeedState extends State<_ChannelFeed>
dramas,
topPadding: showCarousel
? 20
: widget.mediaTop + RecommendChannelNav.height + 16,
: widget.mediaTop +
RecommendChannelNav.height +
AppDimens.spaceSm,
crossAxisCount: 3,
),
);
@@ -411,6 +433,8 @@ class _ChannelFeedState extends State<_ChannelFeed>
key: const Key('recommend-category-empty'),
icon: Icons.movie_outlined,
title: l10n.noStories,
compact: true,
stretchContent: true,
);
}