feat(flutter): 榜单页三强横排与第四名起列表
This commit is contained in:
Zhou Weidong committed
1 parent
ffedde0db5
commit
881088a428
2 files changed
+247
-35
No files matched your search
@@ -15,14 +15,23 @@ import '../../l10n/app_localizations.dart';
|
||||
import '../drama_detail/drama_detail_view.dart';
|
||||
|
||||
const int _topCount = 50;
|
||||
const double _rankColumnWidth = 56;
|
||||
const double _coverWidth = 72;
|
||||
const double _coverHeight = 96;
|
||||
const double _podiumGap = 8;
|
||||
const double _centerCoverWidth = 120;
|
||||
const double _centerCoverHeight = 160;
|
||||
const double _sideCoverWidth = 92;
|
||||
const double _sideCoverHeight = 124;
|
||||
const double _coverRadius = 12;
|
||||
const double _titleSlotHeight = 24;
|
||||
const double _rowGap = 12;
|
||||
const Color _rankSilver = Color(0xFFB8860B);
|
||||
const Color _rankBronze = Color(0xFF8C837B);
|
||||
const double _rankColumnWidth = 56;
|
||||
const double _listCoverWidth = 72;
|
||||
const double _listCoverHeight = 96;
|
||||
const Color _goldStart = Color(0xFFF3B34C);
|
||||
const Color _goldEnd = Color(0xFFD9A23A);
|
||||
const Color _bronzeStart = Color(0xFFCD7F32);
|
||||
const Color _bronzeEnd = Color(0xFFA9713A);
|
||||
|
||||
/// 剧场榜单页：按播放量降序展示 TOP 榜单。
|
||||
/// 剧场榜单页：前三名横排领奖台，第 4 名起纵向列表。
|
||||
class RankingPage extends StatelessWidget {
|
||||
const RankingPage({super.key});
|
||||
|
||||
@@ -32,6 +41,8 @@ class RankingPage extends StatelessWidget {
|
||||
final dramas = [...context.read<CatalogController>().dramas]
|
||||
..sort((a, b) => b.viewCount.compareTo(a.viewCount));
|
||||
final top = dramas.take(_topCount).toList();
|
||||
final podium = top.take(3).toList();
|
||||
final rest = top.skip(3).toList();
|
||||
return PlainPageScaffold(
|
||||
pageKey: const Key('ranking-page'),
|
||||
backKey: const Key('ranking-back'),
|
||||
@@ -39,17 +50,171 @@ class RankingPage extends StatelessWidget {
|
||||
subtitle: l10n.rankingSubtitle,
|
||||
child: top.isEmpty
|
||||
? EmptyState(icon: Icons.leaderboard_outlined, title: l10n.noStories)
|
||||
: ListView.separated(
|
||||
padding: const EdgeInsets.fromLTRB(14, 4, 14, 24),
|
||||
itemCount: top.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(height: _rowGap),
|
||||
itemBuilder: (context, index) =>
|
||||
_RankingRow(index: index, drama: top[index], l10n: l10n),
|
||||
: ListView(
|
||||
padding: const EdgeInsets.only(top: 4, bottom: 24),
|
||||
children: [
|
||||
if (podium.isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: _Podium(podium: podium, l10n: l10n),
|
||||
),
|
||||
if (rest.isNotEmpty) ...[
|
||||
const SizedBox(height: 16),
|
||||
for (var index = 0; index < rest.length; index++) ...[
|
||||
if (index > 0) const SizedBox(height: _rowGap),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: _RankingRow(
|
||||
index: index + 3,
|
||||
drama: rest[index],
|
||||
l10n: l10n,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
SizedBox(width: _sideCoverWidth, child: _slot(2)),
|
||||
const SizedBox(width: _podiumGap),
|
||||
SizedBox(width: _centerCoverWidth, child: _slot(1)),
|
||||
const SizedBox(width: _podiumGap),
|
||||
SizedBox(width: _sideCoverWidth, child: _slot(3)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
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 {
|
||||
const _PodiumCard({
|
||||
required this.rank,
|
||||
required this.drama,
|
||||
required this.l10n,
|
||||
});
|
||||
|
||||
final int rank;
|
||||
final Drama drama;
|
||||
final AppLocalizations l10n;
|
||||
|
||||
bool get _center => rank == 1;
|
||||
|
||||
double get _width => _center ? _centerCoverWidth : _sideCoverWidth;
|
||||
double get _height => _center ? _centerCoverHeight : _sideCoverHeight;
|
||||
|
||||
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],
|
||||
),
|
||||
};
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () => Navigator.of(context).push<void>(
|
||||
MaterialPageRoute(builder: (_) => DramaDetailPage(drama: drama)),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(_coverRadius),
|
||||
child: SizedBox(
|
||||
key: Key('ranking-cover-$rank'),
|
||||
width: _width,
|
||||
height: _height,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
RemoteImage(
|
||||
drama.posterUrl,
|
||||
fit: BoxFit.cover,
|
||||
showFallbackIcon: true,
|
||||
fallbackAspectRatio: 3 / 4,
|
||||
),
|
||||
Positioned(
|
||||
top: 8,
|
||||
left: 8,
|
||||
child: Container(
|
||||
key: Key('ranking-top-$rank'),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 3,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
gradient: _badgeGradient,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
),
|
||||
child: Text(
|
||||
l10n.topLabel(rank),
|
||||
maxLines: 1,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RankingRow extends StatelessWidget {
|
||||
const _RankingRow({
|
||||
required this.index,
|
||||
@@ -63,15 +228,6 @@ class _RankingRow extends StatelessWidget {
|
||||
|
||||
int get _rank => index + 1;
|
||||
|
||||
Color get _rankColor => switch (_rank) {
|
||||
1 => AppColors.blue,
|
||||
2 => _rankSilver,
|
||||
3 => _rankBronze,
|
||||
_ => AppColors.subtle,
|
||||
};
|
||||
|
||||
double get _rankSize => _rank == 1 ? 22 : (_rank <= 3 ? 20 : 18);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final genre = drama.genre.isEmpty ? drama.category : drama.genre;
|
||||
@@ -101,18 +257,18 @@ class _RankingRow extends StatelessWidget {
|
||||
key: Key('ranking-top-$_rank'),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
color: _rankColor,
|
||||
fontSize: _rankSize,
|
||||
fontWeight: FontWeight.w900,
|
||||
style: const TextStyle(
|
||||
color: AppColors.subtle,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: SizedBox(
|
||||
width: _coverWidth,
|
||||
height: _coverHeight,
|
||||
width: _listCoverWidth,
|
||||
height: _listCoverHeight,
|
||||
child: RemoteImage(
|
||||
drama.posterUrl,
|
||||
fit: BoxFit.cover,
|
||||
|
||||
Reference in new issue
Block a user