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

feat: 重做首页热播榜布局

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-22 22:19:55 +08:00
1 parent db8433ace3
commit 9b83283689
14 files changed
+285 -233
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/home/widgets/home_feed_grid.dart
+4
View File
@@ -17,6 +17,7 @@ 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 '../../ranking/ranking_page.dart';
import 'home_drama_classification.dart';
import 'home_feed_card.dart';
import 'home_grid_header.dart';
@@ -155,6 +156,9 @@ class _HomeFeedGridState extends State<HomeFeedGrid> {
required HomePrimaryTab tab,
required List<HomeGridCategoryShortcut> shortcuts,
}) {
if (tab == HomePrimaryTab.ranking) {
return const RankingPage(embedded: true);
}
if (widget.feedController.loadingFirstPage) {
return const Center(
child: SizedBox.square(
lib/pages/ranking/ranking_page.dart
+227 -209
View File
@@ -10,6 +10,7 @@ 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/theme/app_theme.dart';
import '../../core/widgets/app_pull_to_refresh.dart';
import '../../core/widgets/empty_state.dart';
import '../../core/widgets/paged_local_list.dart';
@@ -19,20 +20,9 @@ import '../../l10n/app_localizations.dart';
import '../player/open_player.dart';
const int _topCount = 50;
const double _podiumGap = 8;
const double _coverRadius = 12;
const double _titleSlotHeight = 24;
const double _rowGap = 12;
const double _rankColumnWidth = 56;
const double _listCoverWidth = 72;
const double _listCoverHeight = 96;
const double _loadMoreThreshold = 200;
const Color _goldStart = AppColors.gold;
const Color _goldEnd = AppColors.goldDeep;
const Color _bronzeStart = AppColors.bronze;
const Color _bronzeEnd = AppColors.bronzeDeep;
const double _loadMoreThreshold = 200, _championLift = 12;
/// 剧场榜单页：前三名横排领奖台，第 4 名起纵向列表。
/// 剧场榜单页：前三名领奖台，第 4 名起为单列排行行。
class RankingPage extends StatefulWidget {
const RankingPage({super.key, this.embedded = false});
@@ -93,12 +83,10 @@ class _RankingPageState extends State<RankingPage> {
bool _onScroll(ScrollNotification notification) {
if (notification.depth != 0 || _refreshing) return false;
final reachedBottom =
notification.metrics.extentAfter <= _loadMoreThreshold;
if (reachedBottom &&
(notification is ScrollUpdateNotification ||
notification is ScrollEndNotification ||
notification is OverscrollNotification)) {
if (notification.metrics.extentAfter > _loadMoreThreshold) return false;
if (notification is ScrollUpdateNotification ||
notification is ScrollEndNotification ||
notification is OverscrollNotification) {
unawaited(_pager!.loadMore());
}
return false;
@@ -107,10 +95,10 @@ class _RankingPageState extends State<RankingPage> {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final pager = _pager!;
final top = pager.visibleItems;
final podium = top.take(3).toList();
final rest = top.skip(3).toList();
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(
@@ -120,39 +108,47 @@ class _RankingPageState extends State<RankingPage> {
key: const Key('ranking-list'),
controller: _scroll,
physics: AppPullToRefresh.physics,
padding: const EdgeInsets.only(top: 4, bottom: 24),
padding: const EdgeInsets.only(top: 8, bottom: 24),
children: top.isEmpty
? [
SizedBox(
height: 420,
child: EmptyState(
icon: Icons.leaderboard_outlined,
title: l10n.noStories,
),
),
]
? [_emptyState(l10n, catalog)]
: [
if (widget.embedded) _intro(l10n),
const SizedBox(height: AppDimens.spaceMd),
if (podium.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.feedPageHorizontal,
),
child: _Podium(podium: podium, l10n: l10n),
),
if (rest.isNotEmpty) ...[
const SizedBox(height: 16),
const SizedBox(height: AppDimens.spaceXl),
for (var index = 0; index < rest.length; index++) ...[
if (index > 0) const SizedBox(height: _rowGap),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.feedPageHorizontal,
),
child: _RankingRow(
index: index + 3,
drama: rest[index],
l10n: l10n,
),
),
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,
loading: _pager!.loading,
loadMoreKey: const Key('ranking-load-more'),
),
],
@@ -160,9 +156,9 @@ class _RankingPageState extends State<RankingPage> {
),
);
if (widget.embedded) {
return ColoredBox(
return DecoratedBox(
key: const Key('ranking-page'),
color: AppColors.appBackground,
decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
child: SafeArea(bottom: false, child: content),
);
}
@@ -174,6 +170,59 @@ class _RankingPageState extends State<RankingPage> {
child: content,
);
}
Widget _intro(AppLocalizations l10n) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.feedPageHorizontal,
),
child: Column(
key: const Key('ranking-hero'),
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.topCharts,
style: const TextStyle(
color: AppColors.textPrimary,
fontSize: AppDimens.rankingHeroTitle,
fontWeight: FontWeight.w700,
),
),
const SizedBox(height: 2),
Text(
l10n.rankingSubtitle,
style: const TextStyle(
color: AppColors.textTertiary,
fontSize: AppDimens.rankingHeroSubtitle,
),
),
],
),
);
}
Widget _emptyState(AppLocalizations l10n, CatalogController catalog) {
final theme = Theme.of(context);
return SizedBox(
height: 420,
child: Theme(
data: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
onSurface: AppColors.textTertiary,
),
),
child: EmptyState(
key: Key(catalog.error == null ? 'ranking-empty' : 'ranking-error'),
icon: catalog.error == null
? Icons.leaderboard_outlined
: Icons.cloud_off_rounded,
title: catalog.error == null ? l10n.noStories : l10n.catalogError,
actionLabel: catalog.error == null ? null : l10n.retry,
onAction: catalog.error == null ? null : () => unawaited(_refresh()),
),
),
);
}
}
class _Podium extends StatelessWidget {
@@ -187,19 +236,32 @@ class _Podium extends StatelessWidget {
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(flex: 100, child: _slot(2)),
const SizedBox(width: _podiumGap),
Expanded(flex: 115, child: _slot(1)),
const SizedBox(width: _podiumGap),
Expanded(flex: 100, child: _slot(3)),
SizedBox(
width: AppDimens.rankingPodiumWidth,
child: podium.length > 1
? _PodiumCard(rank: 2, drama: podium[1], l10n: l10n)
: const SizedBox.shrink(),
),
const Spacer(),
SizedBox(
width: AppDimens.rankingPodiumChampionWidth,
child: podium.isNotEmpty
? Transform.translate(
offset: const Offset(0, -_championLift),
child: _PodiumCard(rank: 1, drama: podium.first, l10n: l10n),
)
: const SizedBox.shrink(),
),
const Spacer(),
SizedBox(
width: AppDimens.rankingPodiumWidth,
child: podium.length > 2
? _PodiumCard(rank: 3, drama: podium[2], l10n: l10n)
: const SizedBox.shrink(),
),
],
);
}
Widget _slot(int rank) {
if (podium.length < rank) return const SizedBox.shrink();
return _PodiumCard(rank: rank, drama: podium[rank - 1], l10n: l10n);
}
}
class _PodiumCard extends StatelessWidget {
@@ -213,26 +275,23 @@ class _PodiumCard extends StatelessWidget {
final Drama drama;
final AppLocalizations l10n;
bool get _center => rank == 1;
double get _coverWidth => rank == 1
? AppDimens.rankingPodiumChampionWidth
: AppDimens.rankingPodiumWidth;
LinearGradient get _badgeGradient => switch (rank) {
1 => const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [AppColors.blue, AppColors.bluePressed],
),
2 => const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [_goldStart, _goldEnd],
),
_ => const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [_bronzeStart, _bronzeEnd],
),
double get _coverHeight => rank == 1
? AppDimens.rankingPodiumChampionHeight
: AppDimens.rankingPodiumHeight;
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(
@@ -241,10 +300,11 @@ class _PodiumCard extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(_coverRadius),
child: AspectRatio(
borderRadius: BorderRadius.circular(AppDimens.rankingPodiumRadius),
child: SizedBox(
key: Key('ranking-cover-$rank'),
aspectRatio: 3 / 4,
width: _coverWidth,
height: _coverHeight,
child: Stack(
fit: StackFit.expand,
children: [
@@ -255,23 +315,23 @@ class _PodiumCard extends StatelessWidget {
fallbackAspectRatio: 3 / 4,
),
Positioned(
top: 8,
left: 8,
top: 4,
left: 4,
child: Container(
key: Key('ranking-top-$rank'),
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 3,
horizontal: 6,
vertical: 2,
),
decoration: BoxDecoration(
gradient: _badgeGradient,
borderRadius: BorderRadius.circular(999),
color: _badgeColor,
borderRadius: BorderRadius.circular(6),
),
child: Text(
l10n.topLabel(rank),
maxLines: 1,
style: const TextStyle(
color: AppColors.onPrimary,
style: TextStyle(
color: _badgeTextColor,
fontSize: 11,
fontWeight: FontWeight.w800,
),
@@ -284,22 +344,25 @@ class _PodiumCard extends StatelessWidget {
),
const SizedBox(height: 6),
SizedBox(
height: _titleSlotHeight,
child: Center(
child: Text(
drama.title,
key: Key('ranking-title-$rank'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
color: AppColors.onSurface,
fontSize: _center ? 15 : 13,
fontWeight: _center ? FontWeight.w800 : FontWeight.w700,
),
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),
],
],
),
);
@@ -319,164 +382,119 @@ class _RankingRow extends StatelessWidget {
int get _rank => index + 1;
List<String> _tagValues() {
final result = <String>[];
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.isEmpty || result.contains(tag)) continue;
result.add(tag);
if (result.length == 3) return result;
if (tag.isNotEmpty) values.add(tag);
}
}
return result;
return values.join(' · ');
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.circular(AppDimens.cardRadius),
border: Border.all(color: AppColors.border),
),
return SizedBox(
height: AppDimens.rankingRowHeight,
child: Material(
color: AppColors.transparent,
borderRadius: BorderRadius.circular(AppDimens.cardRadius),
clipBehavior: Clip.antiAlias,
child: InkWell(
key: Key('ranking-row-$index'),
onTap: () => unawaited(playDramaFromCatalog(context, drama)),
child: Padding(
padding: const EdgeInsets.all(10),
child: Row(
children: [
SizedBox(
width: _rankColumnWidth,
child: Text(
l10n.topLabel(_rank),
key: Key('ranking-top-$_rank'),
textAlign: TextAlign.center,
maxLines: 1,
style: const TextStyle(
color: AppColors.subtle,
fontSize: 18,
fontWeight: FontWeight.w800,
),
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(10),
child: SizedBox(
width: _listCoverWidth,
height: _listCoverHeight,
child: RemoteImage(
drama.posterUrl,
fit: BoxFit.cover,
showFallbackIcon: true,
fallbackAspectRatio: 3 / 4,
),
),
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: 12),
Expanded(
),
const SizedBox(width: AppDimens.spaceMd),
Expanded(
child: SizedBox(
height: AppDimens.rankingCoverHeight,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
drama.title,
maxLines: 2,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.onSurface,
color: AppColors.textPrimary,
fontSize: 15,
fontWeight: FontWeight.w700,
fontWeight: FontWeight.w500,
),
),
if (drama.synopsis.trim().isNotEmpty) ...[
const SizedBox(height: 4),
if (_category.isNotEmpty) ...[
const SizedBox(height: AppDimens.spaceXs),
Text(
drama.synopsis,
maxLines: 2,
_category,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.muted,
fontSize: 12,
height: 1.3,
color: AppColors.textTertiary,
fontSize: 11,
),
),
],
if (_tagValues().isNotEmpty) ...[
const SizedBox(height: 6),
Wrap(
spacing: 6,
runSpacing: 4,
children: [
for (final tag in _tagValues())
Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColors.raised,
borderRadius: BorderRadius.circular(6),
),
child: Text(
tag,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.muted,
fontSize: 11,
),
),
),
],
),
],
const SizedBox(height: 8),
Row(
children: [
const Icon(
Icons.local_fire_department_rounded,
color: AppColors.blue,
size: 12,
),
const SizedBox(width: 4),
Flexible(
child: Text(
l10n.heatLabel(
formatInteractionCount(drama.viewCount),
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.muted,
fontSize: 11,
),
),
),
const SizedBox(width: 8),
Text(
l10n.episodeCount(drama.episodeCount),
maxLines: 1,
style: const TextStyle(
color: AppColors.muted,
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),
Text(
l10n.heatLabel(formatPlayCount(count)),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(color: AppColors.textTertiary, fontSize: 11),
),
],
);
}