feat(ranking): 榜单改为统一行布局
This commit is contained in:
1 parent
7f65fe4d48
commit
8c1662475a
16 files changed
+927
-390
No files matched your search
@@ -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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user