From 881088a428fad27486e8d4a04e2b584804309bb6 Mon Sep 17 00:00:00 2001 From: Zhou Weidong <502333560@qq.com> Date: Tue, 20 Oct 2026 15:08:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(flutter):=20=E6=A6=9C=E5=8D=95=E9=A1=B5?= =?UTF-8?q?=E4=B8=89=E5=BC=BA=E6=A8=AA=E6=8E=92=E4=B8=8E=E7=AC=AC=E5=9B=9B?= =?UTF-8?q?=E5=90=8D=E8=B5=B7=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/pages/ranking/ranking_page.dart | 210 ++++++++++++++++++++++---- test/discover/theater_pages_test.dart | 72 ++++++++- 2 files changed, 247 insertions(+), 35 deletions(-) diff --git a/lib/pages/ranking/ranking_page.dart b/lib/pages/ranking/ranking_page.dart index 6f40663..34de13b 100644 --- a/lib/pages/ranking/ranking_page.dart +++ b/lib/pages/ranking/ranking_page.dart @@ -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().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 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( + 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, diff --git a/test/discover/theater_pages_test.dart b/test/discover/theater_pages_test.dart index d18f091..bf6d11b 100644 --- a/test/discover/theater_pages_test.dart +++ b/test/discover/theater_pages_test.dart @@ -3,6 +3,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:fruitshorts/app.dart'; +import 'package:fruitshorts/core/data/models/drama.dart'; import 'package:fruitshorts/core/data/repositories/favorite_repository.dart'; import 'package:fruitshorts/core/data/repositories/playback_repository.dart'; import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart'; @@ -31,14 +32,11 @@ void main() { expect(find.byKey(const Key('ranking-page')), findsOneWidget); expect(find.text('TOP 1'), findsOneWidget); expect( - find.descendant( - of: find.byKey(const Key('ranking-row-0')), - matching: find.text('The Signal'), - ), - findsOneWidget, + tester.widget(find.byKey(const Key('ranking-title-1'))).data, + 'The Signal', ); - await tester.tap(find.byKey(const Key('ranking-row-0'))); + await tester.tap(find.byKey(const Key('ranking-top-1'))); await tester.pumpAndSettle(); expect(find.byType(DramaDetailPage), findsOneWidget); }); @@ -71,6 +69,44 @@ void main() { ); }); + testWidgets('should_render_podium_with_center_on_top', (tester) async { + await _pumpTheater(tester); + await tester.tap(find.byKey(const Key('theater-toolbar-ranking'))); + await tester.pumpAndSettle(); + + final top1 = tester.getRect(find.byKey(const Key('ranking-cover-1'))); + final top2 = tester.getRect(find.byKey(const Key('ranking-cover-2'))); + final top3 = tester.getRect(find.byKey(const Key('ranking-cover-3'))); + expect(top1.size, const Size(120, 160)); + expect(top2.size, const Size(92, 124)); + expect(top3.size, const Size(92, 124)); + expect(top2.left, lessThan(top1.left)); + expect(top3.left, greaterThan(top1.right)); + expect(top1.bottom, closeTo(top2.bottom, 0.5)); + expect(top1.bottom, closeTo(top3.bottom, 0.5)); + expect(find.byKey(const Key('ranking-row-3')), findsNothing); + }); + + testWidgets('should_list_rank_four_and_below', (tester) async { + await _pumpTheater(tester, dramas: _rankDramas(5)); + await tester.tap(find.byKey(const Key('theater-toolbar-ranking'))); + await tester.pumpAndSettle(); + + expect(find.byKey(const Key('ranking-row-3')), findsOneWidget); + expect(find.byKey(const Key('ranking-row-2')), findsNothing); + expect(find.byKey(const Key('ranking-top-4')), findsOneWidget); + }); + + testWidgets('should_truncate_podium_when_less_than_three', (tester) async { + await _pumpTheater(tester, dramas: _rankDramas(1)); + await tester.tap(find.byKey(const Key('theater-toolbar-ranking'))); + await tester.pumpAndSettle(); + + expect(find.byKey(const Key('ranking-top-1')), findsOneWidget); + expect(find.byKey(const Key('ranking-top-2')), findsNothing); + expect(find.byKey(const Key('ranking-top-3')), findsNothing); + }); + testWidgets('should_go_back_to_theater_from_ranking_page', (tester) async { await _pumpTheater(tester); await tester.tap(find.byKey(const Key('theater-toolbar-ranking'))); @@ -84,12 +120,12 @@ void main() { }); } -Future _pumpTheater(WidgetTester tester) async { +Future _pumpTheater(WidgetTester tester, {List? dramas}) async { tester.view.physicalSize = const Size(390, 844); tester.view.devicePixelRatio = 1; addTearDown(tester.view.resetPhysicalSize); addTearDown(tester.view.resetDevicePixelRatio); - final catalog = FakeCatalogRepository(); + final catalog = FakeCatalogRepository(dramas: dramas); await tester.pumpWidget( LumaDramaApp( playerFactory: createWidgetPlayer, @@ -108,3 +144,23 @@ Future _pumpTheater(WidgetTester tester) async { await tester.tap(find.byKey(const Key('tab-theater'))); await tester.pumpAndSettle(); } + +List _rankDramas(int count) => [ + for (var index = 0; index < count; index++) + Drama( + id: 'rank-$index', + title: 'Rank $index', + synopsis: 'synopsis', + posterUrl: '', + totalEpisodes: 10, + viewCount: (count - index) * 100, + episodes: [ + Episode( + id: 'rank-$index-1', + number: 1, + title: 'Episode 1', + isFree: true, + ), + ], + ), +];