feat(flutter): 剧场搜索框改白底并新增榜单新剧预约页
This commit is contained in:
Zhou Weidong committed
1 parent
7a75ee6de8
commit
bfba2b7c72
15 files changed
+588
-9
No files matched your search
@@ -15,6 +15,9 @@ import '../../core/widgets/app_bottom_nav.dart';
|
||||
import '../../core/widgets/empty_state.dart';
|
||||
import '../../l10n/app_localizations.dart';
|
||||
import '../drama_detail/drama_detail_view.dart';
|
||||
import '../new_releases/new_releases_page.dart';
|
||||
import '../ranking/ranking_page.dart';
|
||||
import '../reserve/reserve_page.dart';
|
||||
import 'discover_binding.dart';
|
||||
import 'discover_logic.dart';
|
||||
import 'discover_types.dart';
|
||||
@@ -338,7 +341,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
icon: Icons.local_fire_department_rounded,
|
||||
color: AppColors.blue,
|
||||
label: l10n.rankingTab,
|
||||
onTap: () => _showComingSoon(l10n),
|
||||
onTap: () => _openPage(context, const RankingPage()),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: _toolbarGap),
|
||||
@@ -348,7 +351,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
icon: Icons.play_circle_fill_rounded,
|
||||
color: _newIconColor,
|
||||
label: l10n.newDramas,
|
||||
onTap: () => _showComingSoon(l10n),
|
||||
onTap: () => _openPage(context, const NewReleasesPage()),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: _toolbarGap),
|
||||
@@ -358,7 +361,7 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
icon: Icons.calendar_month_rounded,
|
||||
color: AppColors.blue,
|
||||
label: l10n.reserve,
|
||||
onTap: () => _showComingSoon(l10n),
|
||||
onTap: () => _openPage(context, const ReservePage()),
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -447,10 +450,8 @@ class _DiscoverPageState extends State<DiscoverPage> {
|
||||
);
|
||||
}
|
||||
|
||||
void _showComingSoon(AppLocalizations l10n) {
|
||||
ScaffoldMessenger.of(
|
||||
context,
|
||||
).showSnackBar(SnackBar(content: Text(l10n.comingSoon)));
|
||||
void _openPage(BuildContext context, Widget page) {
|
||||
Navigator.of(context).push<void>(MaterialPageRoute(builder: (_) => page));
|
||||
}
|
||||
|
||||
Widget _block(Widget child) =>
|
||||
|
||||
@@ -74,7 +74,7 @@ class _DiscoverSearchFieldState extends State<DiscoverSearchField> {
|
||||
height: _searchHeight,
|
||||
padding: const EdgeInsets.symmetric(horizontal: _searchPadding),
|
||||
decoration: BoxDecoration(
|
||||
color: _focused ? AppColors.card : AppColors.commentInput,
|
||||
color: AppColors.card,
|
||||
borderRadius: BorderRadius.circular(_searchRadius),
|
||||
border: Border.all(
|
||||
color: _focused ? AppColors.blue : Colors.transparent,
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../../core/data/services/catalog_controller.dart';
|
||||
import '../../core/widgets/empty_state.dart';
|
||||
import '../../core/widgets/plain_page_scaffold.dart';
|
||||
import '../../l10n/app_localizations.dart';
|
||||
import '../discover/widgets/drama_grid.dart';
|
||||
import '../drama_detail/drama_detail_view.dart';
|
||||
|
||||
/// 剧场新剧页：按 id 倒序展示最新上架短剧。
|
||||
class NewReleasesPage extends StatelessWidget {
|
||||
const NewReleasesPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final dramas = [...context.read<CatalogController>().dramas]
|
||||
..sort((a, b) => b.id.compareTo(a.id));
|
||||
return PlainPageScaffold(
|
||||
pageKey: const Key('new-releases-page'),
|
||||
backKey: const Key('new-releases-back'),
|
||||
title: l10n.rankingNew,
|
||||
subtitle: l10n.newReleasesSubtitle,
|
||||
child: dramas.isEmpty
|
||||
? EmptyState(icon: Icons.fiber_new_outlined, title: l10n.noStories)
|
||||
: SingleChildScrollView(
|
||||
padding: const EdgeInsets.only(top: 4, bottom: 24),
|
||||
child: DramaGrid(
|
||||
l10n: l10n,
|
||||
dramas: dramas,
|
||||
onOpen: (drama) => Navigator.of(context).push<void>(
|
||||
MaterialPageRoute(
|
||||
builder: (_) => DramaDetailPage(drama: drama),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../../core/data/models/drama.dart';
|
||||
import '../../core/data/services/catalog_controller.dart';
|
||||
import '../../core/formatting/count_format.dart';
|
||||
import '../../core/theme/app_colors.dart';
|
||||
import '../../core/theme/app_theme.dart';
|
||||
import '../../core/widgets/empty_state.dart';
|
||||
import '../../core/widgets/plain_page_scaffold.dart';
|
||||
import '../../core/widgets/remote_image.dart';
|
||||
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 _rowGap = 12;
|
||||
const Color _rankSilver = Color(0xFFB8860B);
|
||||
const Color _rankBronze = Color(0xFF8C837B);
|
||||
|
||||
/// 剧场榜单页：按播放量降序展示 TOP 榜单。
|
||||
class RankingPage extends StatelessWidget {
|
||||
const RankingPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final dramas = [...context.read<CatalogController>().dramas]
|
||||
..sort((a, b) => b.viewCount.compareTo(a.viewCount));
|
||||
final top = dramas.take(_topCount).toList();
|
||||
return PlainPageScaffold(
|
||||
pageKey: const Key('ranking-page'),
|
||||
backKey: const Key('ranking-back'),
|
||||
title: l10n.topCharts,
|
||||
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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RankingRow extends StatelessWidget {
|
||||
const _RankingRow({
|
||||
required this.index,
|
||||
required this.drama,
|
||||
required this.l10n,
|
||||
});
|
||||
|
||||
final int index;
|
||||
final Drama drama;
|
||||
final AppLocalizations l10n;
|
||||
|
||||
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;
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.card,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
boxShadow: const [AppTheme.cardShadow],
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
key: Key('ranking-row-$index'),
|
||||
onTap: () => Navigator.of(context).push<void>(
|
||||
MaterialPageRoute(builder: (_) => DramaDetailPage(drama: drama)),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: _rankColumnWidth,
|
||||
child: Text(
|
||||
l10n.topLabel(_rank),
|
||||
key: Key('ranking-top-$_rank'),
|
||||
textAlign: TextAlign.center,
|
||||
maxLines: 1,
|
||||
style: TextStyle(
|
||||
color: _rankColor,
|
||||
fontSize: _rankSize,
|
||||
fontWeight: FontWeight.w900,
|
||||
),
|
||||
),
|
||||
),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: SizedBox(
|
||||
width: _coverWidth,
|
||||
height: _coverHeight,
|
||||
child: RemoteImage(
|
||||
drama.posterUrl,
|
||||
fit: BoxFit.cover,
|
||||
showFallbackIcon: true,
|
||||
fallbackAspectRatio: 3 / 4,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
drama.title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
if (genre.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,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.local_fire_department_rounded,
|
||||
color: AppColors.blue,
|
||||
size: 12,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Flexible(
|
||||
child: Text(
|
||||
l10n.heatLabel(
|
||||
formatInteractionCount(drama.viewCount),
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.muted,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../core/theme/app_colors.dart';
|
||||
import '../../core/widgets/empty_state.dart';
|
||||
import '../../core/widgets/plain_page_scaffold.dart';
|
||||
import '../../l10n/app_localizations.dart';
|
||||
|
||||
/// 剧场预约页：暂无预约数据源，展示空态与即将上线说明。
|
||||
class ReservePage extends StatelessWidget {
|
||||
const ReservePage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return PlainPageScaffold(
|
||||
pageKey: const Key('reserve-page'),
|
||||
backKey: const Key('reserve-back'),
|
||||
title: l10n.reserve,
|
||||
subtitle: l10n.reserveSubtitle,
|
||||
child: Center(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
EmptyState(
|
||||
key: const Key('reserve-empty'),
|
||||
icon: Icons.event_available_outlined,
|
||||
title: l10n.reserveEmptyTitle,
|
||||
subtitle: l10n.reserveEmptyHint,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
TextButton(
|
||||
onPressed: null,
|
||||
child: Text(
|
||||
l10n.comingSoon,
|
||||
style: const TextStyle(color: AppColors.subtle),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user