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

feat(flutter): 榜单前三铺满与剧场分类吸顶下划线

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-20 15:13:12 +08:00
1 parent d80fff74ba
commit 04a1a4ee82
4 files changed
+130 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/discover/discover_view.dart
+31 -14
View File
@@ -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),
),
),
],
),
);
}
lib/pages/ranking/ranking_page.dart
+66 -34
View File
@@ -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,
),
),
],
),
],
test/discover/home_all_dramas_grid_test.dart
+22 -1
View File
@@ -226,6 +226,27 @@ void main() {
expect(header().color, AppColors.ink);
});
testWidgets('should_show_category_underline_for_selection', (tester) async {
await _pumpTheater(tester, categoryRepository: _GridCategoryRepository());
Color underline(String id) =>
(tester
.widget<Container>(
find.byKey(Key('theater-category-underline-$id')),
)
.decoration!
as BoxDecoration)
.color!;
expect(underline('all'), AppColors.blue);
expect(underline('7'), Colors.transparent);
await tester.tap(find.byKey(const Key('theater-category-7')));
await tester.pumpAndSettle();
expect(underline('all'), Colors.transparent);
expect(underline('7'), AppColors.blue);
});
testWidgets('should_use_compact_refresh_indicator', (tester) async {
await _pumpTheater(tester, categoryRepository: _GridCategoryRepository());
final indicator = tester.widget<RefreshIndicator>(
@@ -234,7 +255,7 @@ void main() {
expect(indicator.color, AppColors.blue);
expect(indicator.strokeWidth, 2);
expect(indicator.edgeOffset, 110);
expect(indicator.edgeOffset, 52);
});
}
test/discover/theater_pages_test.dart
+11 -3
View File
@@ -77,9 +77,10 @@ void main() {
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(top1.width, greaterThan(top2.width));
expect(top3.width, closeTo(top2.width, 0.5));
expect(top2.left, closeTo(14, 0.5));
expect(top3.right, closeTo(376, 0.5));
expect(top2.left, lessThan(top1.left));
expect(top3.left, greaterThan(top1.right));
expect(top1.bottom, closeTo(top2.bottom, 0.5));
@@ -95,6 +96,13 @@ void main() {
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);
expect(
find.descendant(
of: find.byKey(const Key('ranking-row-3')),
matching: find.text('synopsis'),
),
findsOneWidget,
);
});
testWidgets('should_truncate_podium_when_less_than_three', (tester) async {