fix(home): 调整榜单版式并去掉二级分类
This commit is contained in:
Zhou Weidong committed
1 parent
60489d6dca
commit
f4cf7bc2dd
7 files changed
+90
-316
No files matched your search
@@ -10,7 +10,6 @@ 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';
|
||||
@@ -20,7 +19,12 @@ import '../../l10n/app_localizations.dart';
|
||||
import '../player/open_player.dart';
|
||||
|
||||
const int _topCount = 50;
|
||||
const double _loadMoreThreshold = 200, _championLift = 12;
|
||||
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 {
|
||||
@@ -117,7 +121,7 @@ class _RankingPageState extends State<RankingPage> {
|
||||
if (podium.isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.feedPageHorizontal,
|
||||
horizontal: _podiumHorizontal,
|
||||
),
|
||||
child: _Podium(podium: podium, l10n: l10n),
|
||||
),
|
||||
@@ -156,11 +160,7 @@ class _RankingPageState extends State<RankingPage> {
|
||||
),
|
||||
);
|
||||
if (widget.embedded) {
|
||||
return DecoratedBox(
|
||||
key: const Key('ranking-page'),
|
||||
decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
|
||||
child: SafeArea(bottom: false, child: content),
|
||||
);
|
||||
return KeyedSubtree(key: const Key('ranking-page'), child: content);
|
||||
}
|
||||
return PlainPageScaffold(
|
||||
pageKey: const Key('ranking-page'),
|
||||
@@ -233,33 +233,55 @@ class _Podium extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
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(),
|
||||
),
|
||||
],
|
||||
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(),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -269,19 +291,15 @@ class _PodiumCard extends StatelessWidget {
|
||||
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 _coverWidth => rank == 1
|
||||
? AppDimens.rankingPodiumChampionWidth
|
||||
: AppDimens.rankingPodiumWidth;
|
||||
|
||||
double get _coverHeight => rank == 1
|
||||
? AppDimens.rankingPodiumChampionHeight
|
||||
: AppDimens.rankingPodiumHeight;
|
||||
double get _coverHeight => coverWidth * _coverAspect;
|
||||
|
||||
Color get _badgeColor => switch (rank) {
|
||||
1 => AppColors.homeCrownGold,
|
||||
@@ -303,7 +321,7 @@ class _PodiumCard extends StatelessWidget {
|
||||
borderRadius: BorderRadius.circular(AppDimens.rankingPodiumRadius),
|
||||
child: SizedBox(
|
||||
key: Key('ranking-cover-$rank'),
|
||||
width: _coverWidth,
|
||||
width: coverWidth,
|
||||
height: _coverHeight,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
|
||||
Reference in new issue
Block a user