feat(flutter): 榜单前三铺满与剧场分类吸顶下划线
This commit is contained in:
Zhou Weidong committed
1 parent
d80fff74ba
commit
04a1a4ee82
4 files changed
+130
-52
No files matched your search
@@ -34,7 +34,7 @@ const double _categoryTabHeight = 44;
|
||||
const double _categoryTabGap = 20;
|
||||
const double _categorySelectedFontSize = 16;
|
||||
const double _categoryFontSize = 15;
|
||||
const double _stickyHeaderHeight = 102;
|
||||
const double _stickyHeaderHeight = 44;
|
||||
const Duration _stickyHeaderTransition = Duration(milliseconds: 200);
|
||||
|
||||
/// K28-A2 剧场页：搜索、分类/语言 chips 与双列剧库。
|
||||
@@ -203,10 +203,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
]
|
||||
: const [],
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [_categoryTabs(l10n, categories), _toolbar(l10n, categories)],
|
||||
),
|
||||
child: _categoryTabs(l10n, categories),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -251,6 +248,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
? categories.feed.dramas
|
||||
: categories.dramasOf(logic.selectedCategoryId!);
|
||||
return [
|
||||
_toolbar(l10n, categories),
|
||||
if (dramas.isEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 40),
|
||||
@@ -279,6 +277,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
if (index == 0) {
|
||||
return _categoryTab(
|
||||
key: const Key('theater-category-all'),
|
||||
id: 'all',
|
||||
label: l10n.all,
|
||||
selected: logic.selectedCategoryId == null,
|
||||
onTap: () => logic.selectCategory(null),
|
||||
@@ -287,6 +286,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
final category = categories.categories[index - 1];
|
||||
return _categoryTab(
|
||||
key: Key('theater-category-${category.id}'),
|
||||
id: category.id,
|
||||
label: category.name,
|
||||
selected: logic.selectedCategoryId == category.id,
|
||||
onTap: () => logic.selectCategory(category.id),
|
||||
@@ -298,6 +298,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
|
||||
Widget _categoryTab({
|
||||
required Key key,
|
||||
required String id,
|
||||
required String label,
|
||||
required bool selected,
|
||||
required VoidCallback onTap,
|
||||
@@ -306,16 +307,32 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
key: key,
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: Center(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
color: selected ? AppColors.onSurface : AppColors.muted,
|
||||
fontSize: selected ? _categorySelectedFontSize : _categoryFontSize,
|
||||
fontWeight: selected ? FontWeight.w800 : FontWeight.w500,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
color: selected ? AppColors.onSurface : AppColors.muted,
|
||||
fontSize: selected
|
||||
? _categorySelectedFontSize
|
||||
: _categoryFontSize,
|
||||
fontWeight: selected ? FontWeight.w800 : FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
key: Key('theater-category-underline-$id'),
|
||||
width: 18,
|
||||
height: 2,
|
||||
decoration: BoxDecoration(
|
||||
color: selected ? AppColors.blue : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(1),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -16,10 +16,6 @@ import '../drama_detail/drama_detail_view.dart';
|
||||
|
||||
const int _topCount = 50;
|
||||
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;
|
||||
@@ -87,14 +83,13 @@ class _Podium extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
SizedBox(width: _sideCoverWidth, child: _slot(2)),
|
||||
Expanded(flex: 100, child: _slot(2)),
|
||||
const SizedBox(width: _podiumGap),
|
||||
SizedBox(width: _centerCoverWidth, child: _slot(1)),
|
||||
Expanded(flex: 115, child: _slot(1)),
|
||||
const SizedBox(width: _podiumGap),
|
||||
SizedBox(width: _sideCoverWidth, child: _slot(3)),
|
||||
Expanded(flex: 100, child: _slot(3)),
|
||||
],
|
||||
);
|
||||
}
|
||||
@@ -118,9 +113,6 @@ class _PodiumCard extends StatelessWidget {
|
||||
|
||||
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,
|
||||
@@ -150,10 +142,9 @@ class _PodiumCard extends StatelessWidget {
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(_coverRadius),
|
||||
child: SizedBox(
|
||||
child: AspectRatio(
|
||||
key: Key('ranking-cover-$rank'),
|
||||
width: _width,
|
||||
height: _height,
|
||||
aspectRatio: 3 / 4,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
@@ -228,9 +219,21 @@ class _RankingRow extends StatelessWidget {
|
||||
|
||||
int get _rank => index + 1;
|
||||
|
||||
List<String> _tagValues() {
|
||||
final result = <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;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final genre = drama.genre.isEmpty ? drama.category : drama.genre;
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.card,
|
||||
@@ -293,26 +296,46 @@ class _RankingRow extends StatelessWidget {
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
if (genre.isNotEmpty) ...[
|
||||
if (drama.synopsis.trim().isNotEmpty) ...[
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
drama.synopsis,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.muted,
|
||||
fontSize: 12,
|
||||
height: 1.3,
|
||||
),
|
||||
),
|
||||
],
|
||||
if (_tagValues().isNotEmpty) ...[
|
||||
const SizedBox(height: 6),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.raised,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
genre,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.muted,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
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),
|
||||
@@ -337,6 +360,15 @@ class _RankingRow extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
l10n.episodeCount(drama.episodeCount),
|
||||
maxLines: 1,
|
||||
style: const TextStyle(
|
||||
color: AppColors.muted,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
|
||||
Reference in new issue
Block a user