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

feat(flutter): 重构四 Tab 与浏览页

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-20 09:49:42 +08:00
1 parent 99c72e2c32
commit 959edc0a32
41 files changed
+2148 -1179
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/pages/discover/discover_logic.dart
+16
View File
@@ -28,6 +28,8 @@ class DiscoverLogic extends ChangeNotifier {
String _lastRequestedQuery = '';
int _searchRequest = 0;
bool _disposed = false;
TheaterLanguage language = TheaterLanguage.all;
String? selectedCategoryId;
bool get hasSearchQuery => search.text.trim().isNotEmpty;
@@ -48,6 +50,20 @@ class DiscoverLogic extends ChangeNotifier {
void openSearch() => searchFocus.requestFocus();
/// Selects a language for the visual filter state.
void selectLanguage(TheaterLanguage value) {
if (language == value) return;
language = value;
notify();
}
/// Selects one category chip; null represents all categories.
void selectCategory(String? categoryId) {
if (selectedCategoryId == categoryId) return;
selectedCategoryId = categoryId;
notify();
}
void retrySearch() {
final query = search.text.trim();
if (query.isNotEmpty) unawaited(_runSearch(query));
lib/pages/discover/discover_types.dart
+5 -2
View File
@@ -4,8 +4,11 @@ import 'package:flutter/foundation.dart';
import '../../core/data/models/drama.dart';
/// 剧场页与播放器之间的返回动作。
enum DiscoverPageAction { home, my }
/// 剧场页与根导航之间的动作。
enum DiscoverPageAction { home, create, my }
/// Language choices shown by the theater filter UI.
enum TheaterLanguage { all, zh, id, ms, en }
/// 剧场页导航回调；没有 `onAction` 时按独立页面处理。
class DiscoverPageCallbacks {
lib/pages/discover/discover_view.dart
+129 -107
View File
@@ -4,12 +4,8 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import '../../core/data/models/content_category.dart';
import '../../core/data/models/drama.dart';
import '../../core/data/models/home_feed.dart';
import '../../core/data/repositories/catalog_repository.dart';
import '../../core/data/repositories/search_repository.dart';
import '../../core/data/services/catalog_controller.dart';
import '../../core/data/services/category_controller.dart';
import '../../core/formatting/error_text.dart';
import '../../core/theme/app_colors.dart';
@@ -19,19 +15,14 @@ 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 'category_dramas_page.dart';
import 'discover_binding.dart';
import 'discover_logic.dart';
import 'discover_types.dart';
import 'widgets/category_grid.dart';
import 'widgets/discover_header.dart';
import 'widgets/discover_search_field.dart';
import 'widgets/discover_search_results.dart';
import 'widgets/drama_grid.dart';
import 'widgets/feed_banner_carousel.dart';
import 'widgets/ranking_section.dart';
/// 剧场页：搜索 + 分类九宫格 + 榜单 + 全部剧目。
/// Theater page with fixed search, category chips, and a two-column catalogue.
class DiscoverPage extends StatefulWidget {
const DiscoverPage({
super.key,
@@ -96,13 +87,18 @@ class _DiscoverPageState extends State<DiscoverPage> {
Widget _page(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final categories = context.watch<CategoryController>();
final banners = context.watch<CatalogController>().banners;
final content = SafeArea(
bottom: !embedded,
child: Column(
children: [
DiscoverHeader(onSearch: logic.openSearch, onProfile: _openProfile),
Expanded(child: _feed(l10n, categories, banners)),
DiscoverHeader(
controller: logic.search,
focusNode: logic.searchFocus,
onChanged: (_) => logic.onSearchChanged(),
loading: logic.searchLoading,
onProfile: _openProfile,
),
Expanded(child: _feed(l10n, categories)),
if (!embedded) _bottomNav(l10n),
],
),
@@ -118,43 +114,28 @@ class _DiscoverPageState extends State<DiscoverPage> {
);
}
Widget _feed(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
return RefreshIndicator(
key: const Key('discover-refresh'),
color: AppColors.blue,
backgroundColor: AppColors.card,
onRefresh: categories.load,
child: ListView(
controller: logic.scroll,
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.only(bottom: 24),
children: [
Padding(
padding: const EdgeInsets.only(top: 8),
child: DiscoverSearchField(
controller: logic.search,
focusNode: logic.searchFocus,
onChanged: (_) => logic.onSearchChanged(),
loading: logic.searchLoading,
),
),
..._content(l10n, categories, banners),
],
Widget _feed(AppLocalizations l10n, CategoryController categories) {
return GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: logic.searchFocus.unfocus,
child: RefreshIndicator(
key: const Key('discover-refresh'),
color: AppColors.blue,
backgroundColor: AppColors.card,
onRefresh: categories.load,
child: ListView(
controller: logic.scroll,
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.only(bottom: 24),
children: _content(l10n, categories),
),
),
);
}
List<Widget> _content(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
List<Widget> _content(AppLocalizations l10n, CategoryController categories) {
if (logic.hasSearchQuery) return [_searchContent(l10n)];
return _theaterContent(l10n, categories, banners);
return _theaterContent(l10n, categories);
}
Widget _searchContent(AppLocalizations l10n) => DiscoverSearchResults(
@@ -168,7 +149,6 @@ class _DiscoverPageState extends State<DiscoverPage> {
List<Widget> _theaterContent(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
if (categories.loading && categories.feed.sections.isEmpty) {
return [_block(const CircularProgressIndicator(strokeWidth: 2))];
@@ -188,38 +168,19 @@ class _DiscoverPageState extends State<DiscoverPage> {
),
];
}
return _theaterBlocks(l10n, categories, banners);
return _theaterBlocks(l10n, categories);
}
List<Widget> _theaterBlocks(
AppLocalizations l10n,
CategoryController categories,
List<FeedBanner> banners,
) {
final dramas = categories.feed.dramas;
final dramas = logic.selectedCategoryId == null
? categories.feed.dramas
: categories.dramasOf(logic.selectedCategoryId!);
return [
Padding(
padding: const EdgeInsets.only(top: 12),
child: CategoryGrid(
categories: categories.categories,
onTap: (category) => _openCategory(category, categories),
),
),
if (banners.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 12),
child: FeedBannerCarousel(
banners: banners,
active: widget.active,
onOpen: _openBanner,
),
),
if (categories.feed.sections.isNotEmpty || dramas.isNotEmpty)
RankingSection(
sections: categories.feed.sections,
fallback: dramas,
onOpen: _openDrama,
),
_categoryChips(l10n, categories),
_languageChips(l10n),
_sectionTitle(l10n.allDramas),
if (dramas.isEmpty) _emptyCatalog(l10n) else _dramaGrid(l10n, dramas),
];
@@ -242,6 +203,93 @@ class _DiscoverPageState extends State<DiscoverPage> {
return DramaGrid(l10n: l10n, dramas: dramas, onOpen: _openDrama);
}
Widget _categoryChips(AppLocalizations l10n, CategoryController categories) {
return Padding(
padding: const EdgeInsets.fromLTRB(
AppDimens.pageHorizontal,
AppDimens.spaceMd,
AppDimens.pageHorizontal,
0,
),
child: Wrap(
key: const Key('theater-category-chips'),
spacing: AppDimens.spaceSm,
runSpacing: AppDimens.spaceSm,
children: [
_filterChip(
key: const Key('theater-category-all'),
label: l10n.all,
selected: logic.selectedCategoryId == null,
onSelected: () => logic.selectCategory(null),
),
for (final category in categories.categories)
_filterChip(
key: Key('theater-category-${category.id}'),
label: category.name,
selected: logic.selectedCategoryId == category.id,
onSelected: () => logic.selectCategory(category.id),
),
],
),
);
}
Widget _languageChips(AppLocalizations l10n) {
final entries = [
(TheaterLanguage.all, l10n.allLanguages),
(TheaterLanguage.zh, l10n.simplifiedChinese),
(TheaterLanguage.id, l10n.bahasaIndonesia),
(TheaterLanguage.ms, l10n.bahasaMelayu),
(TheaterLanguage.en, l10n.english),
];
return Padding(
padding: const EdgeInsets.fromLTRB(
AppDimens.pageHorizontal,
AppDimens.spaceSm,
AppDimens.pageHorizontal,
0,
),
child: Wrap(
key: const Key('theater-language-chips'),
spacing: AppDimens.spaceSm,
runSpacing: AppDimens.spaceSm,
children: [
for (final entry in entries)
_filterChip(
key: Key('theater-language-${entry.$1.name}'),
label: entry.$2,
selected: logic.language == entry.$1,
onSelected: () => logic.selectLanguage(entry.$1),
),
],
),
);
}
Widget _filterChip({
required Key key,
required String label,
required bool selected,
required VoidCallback onSelected,
}) {
return ChoiceChip(
key: key,
label: Text(label),
selected: selected,
showCheckmark: false,
onSelected: (_) => onSelected(),
backgroundColor: AppColors.card,
selectedColor: AppColors.blue,
side: BorderSide(color: selected ? AppColors.blue : AppColors.border),
labelStyle: TextStyle(
color: selected ? AppColors.onPrimary : AppColors.muted,
fontSize: AppDimens.chipFont,
fontWeight: FontWeight.w700,
),
shape: const StadiumBorder(),
);
}
Widget _sectionTitle(String title) {
return Padding(
padding: const EdgeInsets.fromLTRB(14, 18, 14, 10),
@@ -291,18 +339,6 @@ class _DiscoverPageState extends State<DiscoverPage> {
);
}
void _openCategory(ContentCategory category, CategoryController categories) {
Navigator.of(context).push<void>(
MaterialPageRoute(
builder: (_) => CategoryDramasPage(
title: category.name,
dramas: categories.dramasOf(category.id),
onOpen: widget.callbacks.onDramaSelected == null ? null : _openDrama,
),
),
);
}
void _openDrama(Drama drama) {
final callback = widget.callbacks.onDramaSelected;
if (callback != null) {
@@ -318,33 +354,12 @@ class _DiscoverPageState extends State<DiscoverPage> {
);
}
Future<void> _openBanner(FeedBanner banner) async {
final dramaId = banner.dramaId;
if (dramaId == null) return;
for (final drama in context.read<CatalogController>().dramas) {
if (drama.id == dramaId) {
_pushDetail(drama);
return;
}
}
try {
final drama = await context.read<CatalogRepository>().fetchDrama(dramaId);
if (mounted) _pushDetail(drama);
} catch (_) {
if (!mounted) return;
final message = AppLocalizations.of(context)!.detailLoadFailed;
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text(message)));
}
}
Widget _bottomNav(AppLocalizations l10n) => AppBottomNav(
items: [
AppBottomNavItem(
tabKey: const Key('discover-nav-home'),
icon: Icons.play_circle_outline_rounded,
selectedIcon: Icons.play_circle_fill_rounded,
icon: Icons.home_outlined,
selectedIcon: Icons.home_rounded,
label: l10n.homeTab,
onTap: () => _act(DiscoverPageAction.home),
),
@@ -352,10 +367,17 @@ class _DiscoverPageState extends State<DiscoverPage> {
tabKey: const Key('discover-nav-current'),
icon: Icons.explore_outlined,
selectedIcon: Icons.explore_rounded,
label: l10n.discoverTab,
label: l10n.theaterTab,
selected: true,
onTap: () {},
),
AppBottomNavItem(
tabKey: const Key('discover-nav-create'),
icon: Icons.add_box_outlined,
selectedIcon: Icons.add_box_rounded,
label: l10n.createTab,
onTap: () => _act(DiscoverPageAction.create),
),
AppBottomNavItem(
tabKey: const Key('discover-nav-my'),
icon: Icons.video_library_outlined,
lib/pages/discover/widgets/discover_header.dart
+24 -75
View File
@@ -3,37 +3,48 @@
import 'package:flutter/material.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../l10n/app_localizations.dart';
import 'discover_search_field.dart';
/// 剧场页页头：品牌、搜索与个人页入口。
/// Theater header with a persistent search field and profile entry.
class DiscoverHeader extends StatelessWidget {
const DiscoverHeader({
super.key,
required this.onSearch,
required this.controller,
required this.focusNode,
required this.onChanged,
required this.loading,
required this.onProfile,
});
final VoidCallback onSearch;
final TextEditingController controller;
final FocusNode focusNode;
final ValueChanged<String> onChanged;
final bool loading;
final VoidCallback onProfile;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return SizedBox(
height: 46,
height: AppDimens.contentHeaderHeight,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.pageHorizontal,
),
child: Row(
children: [
_brand(l10n),
const Spacer(),
_HeaderIcon(
key: const Key('discover-search-button'),
icon: Icons.search_rounded,
tooltip: l10n.search,
onTap: onSearch,
Expanded(
child: DiscoverSearchField(
controller: controller,
focusNode: focusNode,
onChanged: onChanged,
loading: loading,
horizontalPadding: 0,
),
),
const SizedBox(width: 8),
const SizedBox(width: AppDimens.spaceSm),
_profile(l10n),
],
),
@@ -41,37 +52,6 @@ class DiscoverHeader extends StatelessWidget {
);
}
Widget _brand(AppLocalizations l10n) {
return Row(
children: [
Container(
width: 24,
height: 24,
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.blue,
borderRadius: BorderRadius.circular(7),
),
child: const Icon(
Icons.play_arrow_rounded,
color: AppColors.onPrimary,
size: 16,
),
),
const SizedBox(width: 8),
Text(
l10n.discoverTab,
style: const TextStyle(
fontFamily: 'Outfit',
color: AppColors.onSurface,
fontSize: 15,
fontWeight: FontWeight.w800,
),
),
],
);
}
Widget _profile(AppLocalizations l10n) {
return Semantics(
button: true,
@@ -101,34 +81,3 @@ class DiscoverHeader extends StatelessWidget {
);
}
}
class _HeaderIcon extends StatelessWidget {
const _HeaderIcon({
super.key,
required this.icon,
required this.tooltip,
required this.onTap,
});
final IconData icon;
final String tooltip;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return SizedBox(
width: 36,
height: 36,
child: IconButton(
tooltip: tooltip,
onPressed: onTap,
padding: EdgeInsets.zero,
style: IconButton.styleFrom(
backgroundColor: const Color(0xFF2C2D33),
foregroundColor: AppColors.onSurface,
),
icon: Icon(icon, size: 18),
),
);
}
}
lib/pages/discover/widgets/discover_search_field.dart
+3 -1
View File
@@ -13,17 +13,19 @@ class DiscoverSearchField extends StatelessWidget {
required this.focusNode,
required this.onChanged,
required this.loading,
this.horizontalPadding = 14,
});
final TextEditingController controller;
final FocusNode focusNode;
final ValueChanged<String> onChanged;
final bool loading;
final double horizontalPadding;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 14),
padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
child: SizedBox(
height: 36,
child: TextField(
lib/pages/discover/widgets/drama_grid.dart
+43 -29
View File
@@ -2,9 +2,10 @@
import 'package:flutter/material.dart';
import '../../../core/config/app_config.dart';
import '../../../core/data/models/drama.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/remote_image.dart';
import '../../../l10n/app_localizations.dart';
const int _columns = 2;
@@ -83,6 +84,8 @@ class DramaGridCard extends StatelessWidget {
_title(),
const SizedBox(height: 2),
_genre(),
const SizedBox(height: AppDimens.spaceXs),
_metadata(),
],
),
);
@@ -115,7 +118,7 @@ class DramaGridCard extends StatelessWidget {
l10n.free,
style: const TextStyle(
color: AppColors.onPrimary,
fontSize: 8,
fontSize: AppDimens.cardMeta,
fontWeight: FontWeight.w800,
),
),
@@ -130,7 +133,7 @@ class DramaGridCard extends StatelessWidget {
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 11,
fontSize: AppDimens.previewSectionTitle,
fontWeight: FontWeight.w800,
),
);
@@ -143,7 +146,39 @@ class DramaGridCard extends StatelessWidget {
key: Key('home-drama-genre-${drama.id}'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
style: const TextStyle(
color: AppColors.muted,
fontSize: AppDimens.cardMeta,
),
);
}
Widget _metadata() {
return Wrap(
spacing: AppDimens.spaceSm,
runSpacing: AppDimens.spaceXs,
children: [
Text(
l10n.episodeCount(drama.episodeCount),
key: Key('home-drama-episode-count-${drama.id}'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.subtle,
fontSize: AppDimens.cardViews,
),
),
Text(
l10n.viewCountLabel(drama.viewCount),
key: Key('home-drama-views-${drama.id}'),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.subtle,
fontSize: AppDimens.cardViews,
),
),
],
);
}
}
@@ -155,33 +190,12 @@ class _DiscoverCoverImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final url = AppConfig.mediaUrl(path);
if (url.isEmpty) return _placeholder();
return Image.network(
url,
return RemoteImage(
path,
width: double.infinity,
fit: BoxFit.fitWidth,
loadingBuilder: (context, child, progress) {
if (progress == null) return child;
return _placeholder();
},
errorBuilder: (_, _, _) => _placeholder(),
);
}
Widget _placeholder() {
return AspectRatio(
aspectRatio: 3 / 4,
child: ColoredBox(
color: AppColors.card,
child: const Center(
child: Icon(
Icons.image_not_supported_outlined,
color: AppColors.muted,
size: 32,
),
),
),
showFallbackIcon: true,
fallbackAspectRatio: 3 / 4,
);
}
}
lib/pages/discover/widgets/feed_banner_carousel.dart
+40 -3
View File
@@ -5,12 +5,12 @@ import 'dart:async';
import 'package:flutter/material.dart';
import '../../../core/data/models/home_feed.dart';
import '../../../core/data/models/drama.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/remote_image.dart';
import '../../../l10n/app_localizations.dart';
const double _carouselHeight = 154;
const double _indicatorHeight = 24;
const double _dotSize = 6;
const double _activeDotWidth = 18;
@@ -25,11 +25,13 @@ class FeedBannerCarousel extends StatefulWidget {
required this.banners,
required this.onOpen,
this.active = true,
this.dramaFor,
});
final List<FeedBanner> banners;
final ValueChanged<FeedBanner> onOpen;
final bool active;
final Drama? Function(FeedBanner banner)? dramaFor;
@override
State<FeedBannerCarousel> createState() => _FeedBannerCarouselState();
@@ -121,7 +123,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
child: Column(
children: [
SizedBox(
height: _carouselHeight,
height: AppDimens.heroBannerHeight,
child: PageView.builder(
controller: _controller,
itemCount: widget.banners.length,
@@ -138,6 +140,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
Widget _bannerCard(int index) {
final banner = widget.banners[index];
final dramaId = banner.dramaId;
final drama = widget.dramaFor?.call(banner);
final card = ClipRRect(
borderRadius: BorderRadius.circular(AppDimens.authCardRadius),
child: Stack(
@@ -149,10 +152,44 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0x00000000), Color(0x8A0B0C10)],
colors: [Color(0x120B0C10), Color(0xE60B0C10)],
),
),
),
if (drama != null)
Positioned(
left: 16,
right: 64,
bottom: 14,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
drama.title,
key: Key('home-hero-title-$index'),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontFamily: 'Outfit',
color: AppColors.onSurface,
fontSize: AppDimens.pageTitle,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: AppDimens.spaceXs),
Text(
drama.synopsis,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.muted,
fontSize: AppDimens.caption,
),
),
],
),
),
if (dramaId != null)
const Positioned(right: 14, bottom: 14, child: _PlayMark()),
],