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

feat(home): 首页改为三列探索网格

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-22 17:03:45 +08:00
1 parent 6dea9d479e
commit dd96792e33
29 files changed
+1912 -256
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/core/data/models/drama.dart
+12
View File
@@ -86,6 +86,8 @@ class Drama {
this.favoriteCount,
this.commentCount,
this.language = '',
this.dramaType = '',
this.createdAt,
this.detailLoaded = false,
});
@@ -109,6 +111,12 @@ class Drama {
/// 卡片语种（如 zh-CN / id），用于剧场语言筛选。
final String language;
/// 内容类型：ANIME 漫剧，LIVE 真人剧。
final String dramaType;
/// 上架时间；卡片接口未直接下发时可由 Snowflake id 估算。
final DateTime? createdAt;
/// 详情接口是否已经取过完整剧集列表。
/// 列表卡片只带一集可播预览，需要完整剧集时再进详情。
final bool detailLoaded;
@@ -137,6 +145,8 @@ class Drama {
favoriteCount: _optionalInt(json['favoriteCount']),
commentCount: _optionalInt(json['commentCount']),
language: json['language'] as String? ?? '',
dramaType: json['dramaType'] as String? ?? '',
createdAt: DateTime.tryParse(json['createdAt']?.toString() ?? ''),
);
}
@@ -157,6 +167,8 @@ class Drama {
favoriteCount: _optionalInt(json['favoriteCount']),
commentCount: _optionalInt(json['commentCount']),
language: json['language'] as String? ?? '',
dramaType: json['dramaType'] as String? ?? '',
createdAt: DateTime.tryParse(json['createdAt']?.toString() ?? ''),
detailLoaded: true,
episodes: (json['episodes'] as List? ?? const [])
.whereType<Map<String, dynamic>>()
lib/core/theme/app_colors.dart
+18 -1
View File
@@ -60,6 +60,18 @@ abstract final class AppColors {
/// 页面背景。
static const ink = Color(0xFF0B1020);
/// 首页/追剧/我的统一的纯黑内容背景。
static const appBackground = Color(0xFF000000);
/// 中性深灰卡片与控件表面。
static const contentCard = Color(0xFF171717);
static const contentSurface = Color(0xFF1C1C1E);
static const contentChip = Color(0xFF2C2C2E);
static const contentBorder = Color(0x1AFFFFFF);
/// 次级文字与列表 chevron。
static const textSecondary = Color(0xFF8E8E93);
/// 原生开屏与冷启动过渡底色。
static const splashInk = ink;
@@ -125,7 +137,12 @@ abstract final class AppColors {
static const badgeBeige = raised;
/// 导航未选中。
static const navUnselected = Color(0xFF8E8E93);
static const navUnselected = textSecondary;
/// 首页内容角标。
static const badgeHot = Color(0xFFE5484D);
static const badgeNew = Color(0xFF3B82F6);
static const badgeAnime = Color(0xFF8B5CF6);
/// 播放器次要文字。
static const playerMuted = Color(0xA3FFFFFF);
lib/core/theme/app_dimens.dart
+14
View File
@@ -73,4 +73,18 @@ abstract final class AppDimens {
static const double cardTitle = 15;
static const double cardShadowBlur = 0;
static const double cardShadowY = 0;
/// 首页探索网格。
static const double homeGridGap = 8;
static const double homeCardRadius = 8;
static const double homeCardPadding = 8;
static const double homeCardTitle = 13;
static const double homeCardMeta = 10;
static const double homeCardBadge = 9;
static const double homeTagFont = 10;
static const double homeCardBodyExtent = 84;
static const double homeSectionFont = 14;
static const double homeSectionIndicator = 2;
static const double homeIconSlot = 44;
static const double homeHeaderIcon = 22;
}
lib/l10n/app_en.arb
+18 -1
View File
@@ -697,5 +697,22 @@
"danmakuSettings": "Danmaku settings",
"offlineCache": "Offline cache",
"screenCast": "Cast",
"sleepTimer": "Sleep timer"
"sleepTimer": "Sleep timer",
"homeSearchHint": "Search dramas, actors, genres...",
"homeSectionFeatured": "Featured",
"homeSectionNew": "New",
"homeSectionCategories": "Categories",
"homeSectionRanking": "Charts",
"homeSectionCostume": "Costume",
"homeSectionCommunity": "Community",
"homeTagHot": "Hot",
"homeTagUplifting": "Thrilling",
"homeTagSweet": "Sweet",
"homeTagFaceSlap": "Revenge",
"homeTagAngst": "Angst",
"homeBadgeHot": "Hot",
"homeBadgeNew": "New",
"homeBadgeAnime": "Anime",
"homeGridFilterEmpty": "No dramas match these filters",
"homeGridClearFilter": "Clear filters"
}
lib/l10n/app_id.arb
+18 -1
View File
@@ -654,5 +654,22 @@
"danmakuSettings": "Pengaturan komentar layar",
"offlineCache": "Cache offline",
"screenCast": "Cast",
"sleepTimer": "Timer tidur"
"sleepTimer": "Timer tidur",
"homeSearchHint": "Cari drama, aktor, genre...",
"homeSectionFeatured": "Unggulan",
"homeSectionNew": "Baru",
"homeSectionCategories": "Kategori",
"homeSectionRanking": "Peringkat",
"homeSectionCostume": "Kostum",
"homeSectionCommunity": "Komunitas",
"homeTagHot": "Populer",
"homeTagUplifting": "Membara",
"homeTagSweet": "Manis",
"homeTagFaceSlap": "Balas Dendam",
"homeTagAngst": "Cinta Penuh Luka",
"homeBadgeHot": "Populer",
"homeBadgeNew": "Baru",
"homeBadgeAnime": "Anime",
"homeGridFilterEmpty": "Tidak ada drama yang cocok dengan filter",
"homeGridClearFilter": "Hapus filter"
}
lib/l10n/app_localizations.dart
+102
View File
@@ -2997,6 +2997,108 @@ abstract class AppLocalizations {
/// In en, this message translates to:
/// **'Sleep timer'**
String get sleepTimer;
/// No description provided for @homeSearchHint.
///
/// In en, this message translates to:
/// **'Search dramas, actors, genres...'**
String get homeSearchHint;
/// No description provided for @homeSectionFeatured.
///
/// In en, this message translates to:
/// **'Featured'**
String get homeSectionFeatured;
/// No description provided for @homeSectionNew.
///
/// In en, this message translates to:
/// **'New'**
String get homeSectionNew;
/// No description provided for @homeSectionCategories.
///
/// In en, this message translates to:
/// **'Categories'**
String get homeSectionCategories;
/// No description provided for @homeSectionRanking.
///
/// In en, this message translates to:
/// **'Charts'**
String get homeSectionRanking;
/// No description provided for @homeSectionCostume.
///
/// In en, this message translates to:
/// **'Costume'**
String get homeSectionCostume;
/// No description provided for @homeSectionCommunity.
///
/// In en, this message translates to:
/// **'Community'**
String get homeSectionCommunity;
/// No description provided for @homeTagHot.
///
/// In en, this message translates to:
/// **'Hot'**
String get homeTagHot;
/// No description provided for @homeTagUplifting.
///
/// In en, this message translates to:
/// **'Thrilling'**
String get homeTagUplifting;
/// No description provided for @homeTagSweet.
///
/// In en, this message translates to:
/// **'Sweet'**
String get homeTagSweet;
/// No description provided for @homeTagFaceSlap.
///
/// In en, this message translates to:
/// **'Revenge'**
String get homeTagFaceSlap;
/// No description provided for @homeTagAngst.
///
/// In en, this message translates to:
/// **'Angst'**
String get homeTagAngst;
/// No description provided for @homeBadgeHot.
///
/// In en, this message translates to:
/// **'Hot'**
String get homeBadgeHot;
/// No description provided for @homeBadgeNew.
///
/// In en, this message translates to:
/// **'New'**
String get homeBadgeNew;
/// No description provided for @homeBadgeAnime.
///
/// In en, this message translates to:
/// **'Anime'**
String get homeBadgeAnime;
/// No description provided for @homeGridFilterEmpty.
///
/// In en, this message translates to:
/// **'No dramas match these filters'**
String get homeGridFilterEmpty;
/// No description provided for @homeGridClearFilter.
///
/// In en, this message translates to:
/// **'Clear filters'**
String get homeGridClearFilter;
}
class _AppLocalizationsDelegate
lib/l10n/app_localizations_en.dart
+51
View File
@@ -1565,4 +1565,55 @@ class AppLocalizationsEn extends AppLocalizations {
@override
String get sleepTimer => 'Sleep timer';
@override
String get homeSearchHint => 'Search dramas, actors, genres...';
@override
String get homeSectionFeatured => 'Featured';
@override
String get homeSectionNew => 'New';
@override
String get homeSectionCategories => 'Categories';
@override
String get homeSectionRanking => 'Charts';
@override
String get homeSectionCostume => 'Costume';
@override
String get homeSectionCommunity => 'Community';
@override
String get homeTagHot => 'Hot';
@override
String get homeTagUplifting => 'Thrilling';
@override
String get homeTagSweet => 'Sweet';
@override
String get homeTagFaceSlap => 'Revenge';
@override
String get homeTagAngst => 'Angst';
@override
String get homeBadgeHot => 'Hot';
@override
String get homeBadgeNew => 'New';
@override
String get homeBadgeAnime => 'Anime';
@override
String get homeGridFilterEmpty => 'No dramas match these filters';
@override
String get homeGridClearFilter => 'Clear filters';
}
lib/l10n/app_localizations_id.dart
+51
View File
@@ -1565,4 +1565,55 @@ class AppLocalizationsId extends AppLocalizations {
@override
String get sleepTimer => 'Timer tidur';
@override
String get homeSearchHint => 'Cari drama, aktor, genre...';
@override
String get homeSectionFeatured => 'Unggulan';
@override
String get homeSectionNew => 'Baru';
@override
String get homeSectionCategories => 'Kategori';
@override
String get homeSectionRanking => 'Peringkat';
@override
String get homeSectionCostume => 'Kostum';
@override
String get homeSectionCommunity => 'Komunitas';
@override
String get homeTagHot => 'Populer';
@override
String get homeTagUplifting => 'Membara';
@override
String get homeTagSweet => 'Manis';
@override
String get homeTagFaceSlap => 'Balas Dendam';
@override
String get homeTagAngst => 'Cinta Penuh Luka';
@override
String get homeBadgeHot => 'Populer';
@override
String get homeBadgeNew => 'Baru';
@override
String get homeBadgeAnime => 'Anime';
@override
String get homeGridFilterEmpty => 'Tidak ada drama yang cocok dengan filter';
@override
String get homeGridClearFilter => 'Hapus filter';
}
lib/l10n/app_localizations_zh.dart
+51
View File
@@ -1541,4 +1541,55 @@ class AppLocalizationsZh extends AppLocalizations {
@override
String get sleepTimer => '定时关闭';
@override
String get homeSearchHint => '搜索短剧、演员、类型…';
@override
String get homeSectionFeatured => '精选';
@override
String get homeSectionNew => '新剧';
@override
String get homeSectionCategories => '分类';
@override
String get homeSectionRanking => '榜单';
@override
String get homeSectionCostume => '古装';
@override
String get homeSectionCommunity => '社群';
@override
String get homeTagHot => '热门';
@override
String get homeTagUplifting => '爽剧';
@override
String get homeTagSweet => '甜宠';
@override
String get homeTagFaceSlap => '打脸虐渣';
@override
String get homeTagAngst => '虐恋';
@override
String get homeBadgeHot => '热剧';
@override
String get homeBadgeNew => '新剧';
@override
String get homeBadgeAnime => '漫剧';
@override
String get homeGridFilterEmpty => '没有符合筛选条件的短剧';
@override
String get homeGridClearFilter => '清除筛选';
}
lib/l10n/app_zh.arb
+18 -1
View File
@@ -616,5 +616,22 @@
"danmakuSettings": "弹幕设置",
"offlineCache": "离线缓存",
"screenCast": "投屏",
"sleepTimer": "定时关闭"
"sleepTimer": "定时关闭",
"homeSearchHint": "搜索短剧、演员、类型…",
"homeSectionFeatured": "精选",
"homeSectionNew": "新剧",
"homeSectionCategories": "分类",
"homeSectionRanking": "榜单",
"homeSectionCostume": "古装",
"homeSectionCommunity": "社群",
"homeTagHot": "热门",
"homeTagUplifting": "爽剧",
"homeTagSweet": "甜宠",
"homeTagFaceSlap": "打脸虐渣",
"homeTagAngst": "虐恋",
"homeBadgeHot": "热剧",
"homeBadgeNew": "新剧",
"homeBadgeAnime": "漫剧",
"homeGridFilterEmpty": "没有符合筛选条件的短剧",
"homeGridClearFilter": "清除筛选"
}
lib/pages/home/home_view.dart
+57 -46
View File
@@ -13,24 +13,32 @@ import '../../core/data/services/home_feed_controller.dart';
import '../../core/data/services/catalog_controller.dart';
import '../../core/data/services/catalog_retry.dart';
import '../../core/data/services/category_controller.dart';
import '../../core/data/services/wallet_controller.dart';
import '../../core/platform/haptics.dart';
import '../../core/theme/app_colors.dart';
import '../../core/theme/app_theme.dart';
import '../../core/widgets/auth_gate.dart';
import '../../core/widgets/app_root_tab.dart';
import '../../core/widgets/catalog_debug_info.dart';
import '../../core/widgets/catalog_endpoint_editor.dart';
import '../../core/widgets/empty_state.dart';
import '../../l10n/app_localizations.dart';
import '../discover/discover_types.dart';
import '../discover/discover_view.dart';
import '../favorites/favorites_page.dart';
import '../filter/filter_page.dart';
import '../mine/mine_types.dart';
import '../new_releases/new_releases_page.dart';
import '../player/widgets/home_feed_header.dart';
import '../player/player_view.dart';
import '../ranking/ranking_page.dart';
import '../mine/mine_view.dart';
import '../store/vip_page.dart';
import '../wallet/wallet_page.dart';
import 'home_feed_channel.dart';
import 'home_binding.dart';
import 'home_logic.dart';
import 'widgets/home_feed_grid.dart';
import 'widgets/home_failure_view.dart';
import 'widgets/home_grid_header.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@@ -189,34 +197,6 @@ class _HomePageState extends State<HomePage> with WidgetsBindingObserver {
}
}
/// 首页目录加载失败与重试入口。
class HomeFailureView extends StatelessWidget {
const HomeFailureView({
super.key,
this.error,
required this.onRetry,
this.onEditEndpoint,
});
final String? error;
final VoidCallback onRetry;
final VoidCallback? onEditEndpoint;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return EmptyState(
icon: Icons.cloud_off_rounded,
title: l10n.catalogError,
actionLabel: l10n.retry,
onAction: onRetry,
footer: kDebugMode
? CatalogDebugInfo(error: error, onEditEndpoint: onEditEndpoint)
: null,
);
}
}
/// 四个根页面共享同一路由并保持各自状态。
class _HomeTabs extends StatefulWidget {
const _HomeTabs({super.key, required this.feedController});
@@ -261,7 +241,7 @@ class _HomeTabsState extends State<_HomeTabs> {
}
Widget _scaffold(BuildContext context) {
final feed = logic.tab == 0;
final mediaTab = logic.tab == 0 || logic.tab == 1;
final content = PopScope(
canPop: false,
onPopInvokedWithResult: (didPop, _) {
@@ -278,7 +258,7 @@ class _HomeTabsState extends State<_HomeTabs> {
);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: feed
child: mediaTab
? content
: DecoratedBox(
key: const Key('home-page-gradient'),
@@ -292,15 +272,31 @@ class _HomeTabsState extends State<_HomeTabs> {
return IndexedStack(
index: logic.tab,
children: [
_home(context),
_discover(context),
_homeGrid(context),
_recommend(context),
const FavoritesContent(key: Key('favorites-page'), showBack: false),
_my(context),
],
);
}
Widget _home(BuildContext context) {
Widget _homeGrid(BuildContext context) {
return HomeFeedGrid(
feedController: widget.feedController,
callbacks: HomeGridCallbacks(
onSearch: () => _openSearch(context),
onOpenVip: () => unawaited(_openVip(context)),
onOpenWallet: () => unawaited(_openWallet(context)),
onOpenNewReleases: () => _pushPage(context, const NewReleasesPage()),
onOpenCategories: () => _pushPage(context, const FilterPage()),
onOpenRanking: () => _pushPage(context, const RankingPage()),
onOpenFilter: () => _pushPage(context, const FilterPage()),
),
onOpenDrama: (drama) => unawaited(logic.playDrama(context, drama)),
);
}
Widget _recommend(BuildContext context) {
final currentDramas = widget.feedController.dramas;
final currentChannel = widget.feedController.channel;
if (currentDramas.isNotEmpty) {
@@ -329,7 +325,7 @@ class _HomeTabsState extends State<_HomeTabs> {
PlayerPage(
homeMode: true,
embedded: true,
active: logic.tab == 0,
active: logic.tab == 1,
drama: playerDramas.first,
initialIndex: 0,
feedDramas: playerDramas,
@@ -342,7 +338,7 @@ class _HomeTabsState extends State<_HomeTabs> {
onChannelSelected: _selectFeedChannel,
onDramaChanged: logic.onDramaChanged,
onImmersiveChanged: logic.onImmersiveChanged,
onSearch: () => logic.select(1, search: true),
onSearch: () => _openSearch(context),
onDiscover: () => logic.select(1),
onMy: () => logic.select(3),
),
@@ -383,7 +379,7 @@ class _HomeTabsState extends State<_HomeTabs> {
channel: widget.feedController.channel,
onChannelSelected: _selectFeedChannel,
onRefresh: () => _refreshPlaceholder(context),
onSearch: () => logic.select(1, search: true),
onSearch: () => _openSearch(context),
onMore: () {},
),
Expanded(
@@ -427,18 +423,33 @@ class _HomeTabsState extends State<_HomeTabs> {
unawaited(widget.feedController.selectChannel(channel));
}
Widget _discover(BuildContext context) {
return DiscoverPage(
active: logic.tab == 1,
searchRequest: logic.searchRequest,
callbacks: DiscoverPageCallbacks(
onAction: logic.discoverAction,
onDramaSelected: (drama) => logic.playDrama(context, drama),
onProfile: logic.openProfile,
void _openSearch(BuildContext context) {
Navigator.of(context).push<void>(
MaterialPageRoute(builder: (_) => const DiscoverPage(focusSearch: true)),
);
}
void _pushPage(BuildContext context, Widget page) {
Navigator.of(context).push<void>(MaterialPageRoute(builder: (_) => page));
}
Future<void> _openVip(BuildContext context) async {
if (!await ensureSignedIn(context) || !context.mounted) return;
final wallet = context.read<WalletController>();
await Navigator.of(context).push<void>(
MaterialPageRoute(
builder: (_) => VipPage(onPurchased: () => unawaited(wallet.load())),
),
);
}
Future<void> _openWallet(BuildContext context) async {
if (!await ensureSignedIn(context) || !context.mounted) return;
await Navigator.of(
context,
).push<void>(MaterialPageRoute(builder: (_) => const WalletPage()));
}
Widget _my(BuildContext context) {
return MyPage(
active: logic.tab == 3,
lib/pages/home/widgets/home_drama_classification.dart
+49
View File
@@ -0,0 +1,49 @@
// Author: fruit.com.cn
import '../../../core/data/models/drama.dart';
const int homeNewReleaseDays = 7;
const int homeHotViewThreshold = 100000;
const int _snowflakeEpochMillis = 1288834974657;
const int _snowflakeTimestampShift = 22;
const Map<String, List<String>> _tagAliases = {
'uplifting': ['爽剧', '逆袭', '复仇', 'revenge', 'balas'],
'sweet': ['甜宠', '甜', 'sweet', 'romantis'],
'faceSlap': ['打脸', '虐渣', 'comeuppance', 'comeback'],
'angst': ['虐恋', '虐心', 'angst', 'heartbreak'],
};
DateTime? publishedAtForDrama(Drama drama) {
if (drama.createdAt != null) return drama.createdAt;
final snowflake = BigInt.tryParse(drama.id);
if (snowflake == null) return null;
final timestamp =
(snowflake >> _snowflakeTimestampShift).toInt() + _snowflakeEpochMillis;
final publishedAt = DateTime.fromMillisecondsSinceEpoch(timestamp);
return publishedAt.year >= 2015 ? publishedAt : null;
}
bool isNewDrama(Drama drama, {DateTime? now}) {
final publishedAt = publishedAtForDrama(drama);
if (publishedAt == null) return false;
final age = (now ?? DateTime.now()).difference(publishedAt);
return !age.isNegative && age <= const Duration(days: homeNewReleaseDays);
}
bool isHotDrama(Drama drama) {
return drama.isHot || drama.viewCount >= homeHotViewThreshold;
}
bool matchesHomeTag(Drama drama, String tagId) {
if (tagId == 'hot') return isHotDrama(drama);
return tagMatchesText(tagId, drama.genre) ||
tagMatchesText(tagId, drama.category);
}
bool tagMatchesText(String tagId, String text) {
if (tagId == 'hot') return false;
final normalized = text.toLowerCase();
final aliases = _tagAliases[tagId] ?? const [];
return aliases.any(normalized.contains);
}
lib/pages/home/widgets/home_failure_view.dart
+36
View File
@@ -0,0 +1,36 @@
// Author: fruit.com.cn
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import '../../../core/widgets/catalog_debug_info.dart';
import '../../../core/widgets/empty_state.dart';
import '../../../l10n/app_localizations.dart';
/// 首页目录加载失败与重试入口。
class HomeFailureView extends StatelessWidget {
const HomeFailureView({
super.key,
this.error,
required this.onRetry,
this.onEditEndpoint,
});
final String? error;
final VoidCallback onRetry;
final VoidCallback? onEditEndpoint;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return EmptyState(
icon: Icons.cloud_off_rounded,
title: l10n.catalogError,
actionLabel: l10n.retry,
onAction: onRetry,
footer: kDebugMode
? CatalogDebugInfo(error: error, onEditEndpoint: onEditEndpoint)
: null,
);
}
}
lib/pages/home/widgets/home_feed_card.dart
+225
View File
@@ -0,0 +1,225 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import '../../../core/data/models/drama.dart';
import '../../../core/formatting/count_format.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/remote_image.dart';
import '../../../l10n/app_localizations.dart';
import 'home_drama_classification.dart';
const double _coverAspectRatio = 5 / 6;
final RegExp _tagSplitter = RegExp(r'[,/、·]');
enum HomeDramaBadge { hot, newRelease, anime }
class HomeFeedCard extends StatelessWidget {
const HomeFeedCard({
super.key,
required this.drama,
required this.onTap,
this.now,
});
final Drama drama;
final VoidCallback onTap;
final DateTime? now;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Container(
key: Key('home-feed-card-${drama.id}'),
decoration: BoxDecoration(
color: AppColors.contentCard,
borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
border: Border.all(color: AppColors.contentBorder),
),
child: Material(
color: AppColors.transparent,
borderRadius: BorderRadius.circular(AppDimens.homeCardRadius),
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: onTap,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_cover(l10n),
Expanded(
child: Padding(
padding: const EdgeInsets.all(AppDimens.homeCardPadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
drama.title,
key: Key('home-feed-title-${drama.id}'),
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.homeCardTitle,
fontWeight: FontWeight.w600,
height: 1.25,
),
),
const SizedBox(height: AppDimens.spaceXs),
_tags(),
],
),
),
),
],
),
),
),
);
}
Widget _cover(AppLocalizations l10n) {
final badge = _badge();
return AspectRatio(
aspectRatio: _coverAspectRatio,
child: Stack(
fit: StackFit.expand,
children: [
RemoteImage(
drama.posterUrl,
key: Key('home-feed-cover-${drama.id}'),
fit: BoxFit.cover,
showFallbackIcon: true,
fallbackColor: AppColors.contentSurface,
),
if (badge != null)
Positioned(
top: AppDimens.spaceXs,
left: AppDimens.spaceXs,
child: _badgeChip(l10n, badge),
),
Positioned(
left: AppDimens.spaceXs,
bottom: AppDimens.spaceXs,
child: _views(),
),
],
),
);
}
HomeDramaBadge? _badge() {
if (drama.dramaType.toUpperCase() == 'ANIME') {
return HomeDramaBadge.anime;
}
if (isNewDrama(drama, now: now)) return HomeDramaBadge.newRelease;
if (isHotDrama(drama)) {
return HomeDramaBadge.hot;
}
return null;
}
Widget _badgeChip(AppLocalizations l10n, HomeDramaBadge badge) {
final (label, color) = switch (badge) {
HomeDramaBadge.hot => (l10n.homeBadgeHot, AppColors.badgeHot),
HomeDramaBadge.newRelease => (l10n.homeBadgeNew, AppColors.badgeNew),
HomeDramaBadge.anime => (l10n.homeBadgeAnime, AppColors.badgeAnime),
};
return Container(
key: Key('home-feed-badge-${badge.name}-${drama.id}'),
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.spaceSm,
vertical: 2,
),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(AppDimens.chipRadius),
),
child: Text(
label,
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.homeCardBadge,
fontWeight: FontWeight.w700,
letterSpacing: 0,
),
),
);
}
Widget _views() {
return Container(
key: Key('home-feed-views-${drama.id}'),
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
decoration: BoxDecoration(
color: AppColors.playerOverlayPill,
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.play_arrow_rounded,
size: AppDimens.homeCardMeta,
color: AppColors.navSelected,
),
const SizedBox(width: 1),
Text(
formatInteractionCount(drama.viewCount),
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.homeCardMeta,
fontWeight: FontWeight.w600,
letterSpacing: 0,
),
),
],
),
);
}
Widget _tags() {
final tags = _cardTags();
if (tags.isEmpty) return const SizedBox.shrink();
return Row(
children: [
for (final (index, tag) in tags.indexed)
Flexible(
child: Padding(
padding: EdgeInsets.only(
right: index == tags.length - 1 ? 0 : AppDimens.spaceXs,
),
child: Container(
key: Key('home-feed-tag-${drama.id}-$index'),
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
decoration: BoxDecoration(
color: AppColors.contentSurface,
borderRadius: BorderRadius.circular(AppDimens.chipRadius),
),
child: Text(
tag,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textSecondary,
fontSize: AppDimens.homeTagFont,
letterSpacing: 0,
),
),
),
),
),
],
);
}
List<String> _cardTags() {
final seen = <String>{};
return [drama.genre, drama.category]
.expand((value) => value.split(_tagSplitter))
.map((value) => value.trim())
.where((value) => value.isNotEmpty && seen.add(value))
.take(2)
.toList(growable: false);
}
}
lib/pages/home/widgets/home_feed_grid.dart
+294
View File
@@ -0,0 +1,294 @@
// Author: fruit.com.cn
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../../core/data/models/content_category.dart';
import '../../../core/data/models/drama.dart';
import '../../../core/data/services/auth_controller.dart';
import '../../../core/data/services/category_controller.dart';
import '../../../core/data/services/home_feed_controller.dart';
import '../../../core/data/services/wallet_controller.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../core/widgets/app_pull_to_refresh.dart';
import '../../../core/widgets/empty_state.dart';
import '../../../core/widgets/paged_list_footer.dart';
import '../../../l10n/app_localizations.dart';
import 'home_drama_classification.dart';
import 'home_feed_card.dart';
import 'home_grid_header.dart';
const double _loadMoreThreshold = 240;
const List<String> _costumeAliases = ['古装', 'costume', 'period'];
const List<String> _communityAliases = ['社群', 'community', 'komunitas'];
class HomeFeedGrid extends StatefulWidget {
const HomeFeedGrid({
super.key,
required this.feedController,
required this.callbacks,
required this.onOpenDrama,
});
final HomeFeedController feedController;
final HomeGridCallbacks callbacks;
final ValueChanged<Drama> onOpenDrama;
@override
State<HomeFeedGrid> createState() => _HomeFeedGridState();
}
class _HomeFeedGridState extends State<HomeFeedGrid> {
String? _selectedCategory;
String? _selectedTag;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final categories = context.watch<CategoryController>().categories;
final auth = context.watch<AuthController>();
final wallet = context.watch<WalletController>();
final shortcuts = _categoryShortcuts(categories, l10n);
final tags = _availableTags(l10n);
final activeCategory =
shortcuts.any((shortcut) => shortcut.categoryName == _selectedCategory)
? _selectedCategory
: null;
final activeTag = tags.any((tag) => tag.id == _selectedTag)
? _selectedTag
: null;
final dramas = _filteredDramas(activeCategory, activeTag);
final walletBadge = auth.isSignedIn && wallet.snapshot != null
? wallet.balance
: null;
return ColoredBox(
key: const Key('home-grid'),
color: AppColors.appBackground,
child: SafeArea(
bottom: false,
child: LayoutBuilder(
builder: (context, constraints) {
final itemWidth =
(constraints.maxWidth -
AppDimens.pageHorizontal * 2 -
AppDimens.homeGridGap * 2) /
3;
final itemExtent = itemWidth * 6 / 5 + AppDimens.homeCardBodyExtent;
return NotificationListener<ScrollNotification>(
onNotification: _onScroll,
child: AppPullToRefresh(
key: const Key('home-grid-refresh'),
onRefresh: _refresh,
child: CustomScrollView(
key: const Key('home-grid-scroll'),
physics: AppPullToRefresh.physics,
slivers: [
SliverToBoxAdapter(
child: HomeGridHeader(
callbacks: widget.callbacks,
categories: shortcuts,
tags: tags,
selectedCategory: activeCategory,
selectedTag: activeTag,
onCategorySelected: _selectCategory,
onTagSelected: (tag) =>
setState(() => _selectedTag = tag),
walletBadge: walletBadge,
),
),
if (widget.feedController.loadingFirstPage)
const SliverFillRemaining(
hasScrollBody: false,
child: Center(
child: SizedBox.square(
dimension: 24,
child: CircularProgressIndicator(strokeWidth: 2),
),
),
)
else if (dramas.isEmpty)
SliverFillRemaining(
hasScrollBody: false,
child: _emptyState(l10n, activeCategory, activeTag),
)
else
SliverPadding(
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.pageHorizontal,
),
sliver: SliverGrid(
key: const Key('home-grid-cards'),
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: AppDimens.homeGridGap,
mainAxisSpacing: AppDimens.homeGridGap,
mainAxisExtent: itemExtent,
),
delegate: SliverChildBuilderDelegate(
(context, index) => HomeFeedCard(
drama: dramas[index],
onTap: () => widget.onOpenDrama(dramas[index]),
),
childCount: dramas.length,
),
),
),
if (dramas.isNotEmpty)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(
bottom: AppDimens.spaceXl,
),
child: PagedListFooter(
loading: widget.feedController.loadingMore,
hasMore: widget.feedController.hasMore,
hasItems: dramas.isNotEmpty,
errorMessage:
widget.feedController.lastError == null
? null
: l10n.catalogError,
onRetry: widget.feedController.loadMore,
),
),
),
],
),
),
);
},
),
),
);
}
Future<void> _refresh() async {
await widget.feedController.refreshCurrent();
}
bool _onScroll(ScrollNotification notification) {
if (notification.depth != 0) return false;
final reachedBottom =
notification.metrics.extentAfter <= _loadMoreThreshold;
if (reachedBottom &&
(notification is ScrollUpdateNotification ||
notification is ScrollEndNotification ||
notification is OverscrollNotification)) {
unawaited(widget.feedController.loadMore());
}
return false;
}
void _selectCategory(String? category) {
setState(() {
_selectedCategory = category;
_selectedTag = null;
});
}
List<HomeGridCategoryShortcut> _categoryShortcuts(
List<ContentCategory> categories,
AppLocalizations l10n,
) {
final shortcuts = <HomeGridCategoryShortcut>[];
final costume = _findCategory(categories, _costumeAliases);
final community = _findCategory(categories, _communityAliases);
if (costume != null) {
shortcuts.add(
HomeGridCategoryShortcut(
label: l10n.homeSectionCostume,
categoryName: costume.name,
),
);
}
if (community != null) {
shortcuts.add(
HomeGridCategoryShortcut(
label: l10n.homeSectionCommunity,
categoryName: community.name,
),
);
}
return shortcuts;
}
ContentCategory? _findCategory(
List<ContentCategory> categories,
List<String> aliases,
) {
for (final category in categories) {
final name = category.name.toLowerCase();
if (aliases.any(name.contains)) return category;
}
return null;
}
List<HomeGridTagOption> _availableTags(AppLocalizations l10n) {
final definitions = [
HomeGridTagOption(id: 'hot', label: l10n.homeTagHot),
HomeGridTagOption(id: 'uplifting', label: l10n.homeTagUplifting),
HomeGridTagOption(id: 'sweet', label: l10n.homeTagSweet),
HomeGridTagOption(id: 'faceSlap', label: l10n.homeTagFaceSlap),
HomeGridTagOption(id: 'angst', label: l10n.homeTagAngst),
];
final categoryText = context
.read<CategoryController>()
.categories
.map((category) => category.name)
.toList(growable: false);
return definitions
.where((option) {
if (option.id == 'hot') {
return widget.feedController.dramas.any(isHotDrama);
}
return categoryText.any((text) => tagMatchesText(option.id, text)) ||
widget.feedController.dramas.any(
(drama) => matchesHomeTag(drama, option.id),
);
})
.toList(growable: false);
}
List<Drama> _filteredDramas(String? category, String? tag) {
final normalizedCategory = category?.toLowerCase();
return widget.feedController.dramas
.where((drama) {
final categoryMatches =
normalizedCategory == null ||
drama.category.toLowerCase().contains(normalizedCategory) ||
drama.genre.toLowerCase().contains(normalizedCategory);
final tagMatches = tag == null || matchesHomeTag(drama, tag);
return categoryMatches && tagMatches;
})
.toList(growable: false);
}
Widget _emptyState(AppLocalizations l10n, String? category, String? tag) {
if (widget.feedController.lastError != null) {
return EmptyState(
key: const Key('home-grid-error'),
icon: Icons.cloud_off_rounded,
title: l10n.catalogError,
actionLabel: l10n.retry,
onAction: () => unawaited(widget.feedController.refreshCurrent()),
);
}
final filtered = category != null || tag != null;
return EmptyState(
key: const Key('home-grid-empty'),
icon: Icons.movie_filter_outlined,
title: filtered ? l10n.homeGridFilterEmpty : l10n.noStories,
subtitle: filtered ? null : l10n.emptyHint,
actionLabel: filtered ? l10n.homeGridClearFilter : null,
onAction: filtered
? () => setState(() {
_selectedCategory = null;
_selectedTag = null;
})
: null,
);
}
}
lib/pages/home/widgets/home_grid_header.dart
+365
View File
@@ -0,0 +1,365 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import '../../../core/formatting/count_format.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
import '../../../l10n/app_localizations.dart';
class HomeGridCategoryShortcut {
const HomeGridCategoryShortcut({
required this.label,
required this.categoryName,
});
final String label;
final String categoryName;
}
class HomeGridTagOption {
const HomeGridTagOption({required this.id, required this.label});
final String id;
final String label;
}
class HomeGridCallbacks {
const HomeGridCallbacks({
required this.onSearch,
required this.onOpenVip,
required this.onOpenWallet,
required this.onOpenNewReleases,
required this.onOpenCategories,
required this.onOpenRanking,
required this.onOpenFilter,
});
final VoidCallback onSearch;
final VoidCallback onOpenVip;
final VoidCallback onOpenWallet;
final VoidCallback onOpenNewReleases;
final VoidCallback onOpenCategories;
final VoidCallback onOpenRanking;
final VoidCallback onOpenFilter;
}
class HomeGridHeader extends StatelessWidget {
const HomeGridHeader({
super.key,
required this.callbacks,
required this.categories,
required this.tags,
required this.selectedCategory,
required this.selectedTag,
required this.onCategorySelected,
required this.onTagSelected,
this.walletBadge,
});
final HomeGridCallbacks callbacks;
final List<HomeGridCategoryShortcut> categories;
final List<HomeGridTagOption> tags;
final String? selectedCategory;
final String? selectedTag;
final ValueChanged<String?> onCategorySelected;
final ValueChanged<String?> onTagSelected;
final int? walletBadge;
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Column(
key: const Key('home-grid-header'),
children: [_searchRow(l10n), _primaryRow(l10n), _tagRow(l10n)],
);
}
Widget _searchRow(AppLocalizations l10n) {
return Padding(
padding: const EdgeInsets.fromLTRB(
AppDimens.pageHorizontal,
AppDimens.spaceSm,
AppDimens.pageHorizontal,
AppDimens.spaceSm,
),
child: Row(
children: [
Expanded(
child: InkWell(
key: const Key('home-search-entry'),
borderRadius: BorderRadius.circular(AppDimens.inputRadius),
onTap: callbacks.onSearch,
child: Container(
height: AppDimens.searchHeight,
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.spaceMd,
),
decoration: BoxDecoration(
color: AppColors.contentSurface,
borderRadius: BorderRadius.circular(AppDimens.inputRadius),
),
child: Row(
children: [
const Icon(
Icons.search_rounded,
size: AppDimens.homeHeaderIcon,
color: AppColors.textSecondary,
),
const SizedBox(width: AppDimens.spaceSm),
Expanded(
child: Text(
l10n.homeSearchHint,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.textSecondary,
fontSize: AppDimens.body,
),
),
),
],
),
),
),
),
const SizedBox(width: AppDimens.spaceSm),
_headerAction(
key: const Key('home-vip-entry'),
icon: Icons.workspace_premium_outlined,
tooltip: l10n.vipMembership,
onTap: callbacks.onOpenVip,
),
const SizedBox(width: AppDimens.spaceXs),
_headerAction(
key: const Key('home-wallet-entry'),
icon: Icons.card_giftcard_rounded,
tooltip: l10n.wallet,
onTap: callbacks.onOpenWallet,
badge: walletBadge,
),
],
),
);
}
Widget _headerAction({
required Key key,
required IconData icon,
required String tooltip,
required VoidCallback onTap,
int? badge,
}) {
return SizedBox.square(
dimension: AppDimens.homeIconSlot,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
child: Tooltip(
message: tooltip,
child: Material(
color: AppColors.contentSurface,
borderRadius: BorderRadius.circular(AppDimens.inputRadius),
child: InkWell(
key: key,
borderRadius: BorderRadius.circular(AppDimens.inputRadius),
onTap: onTap,
child: Icon(
icon,
size: AppDimens.homeHeaderIcon,
color: AppColors.navSelected,
),
),
),
),
),
if (badge != null && badge > 0)
Positioned(
key: const Key('home-wallet-badge'),
top: -5,
right: -6,
child: Container(
constraints: const BoxConstraints(minWidth: 20, minHeight: 16),
padding: const EdgeInsets.symmetric(horizontal: 5),
alignment: Alignment.center,
decoration: BoxDecoration(
color: AppColors.badgeHot,
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
),
child: Text(
formatInteractionCount(badge),
style: const TextStyle(
color: AppColors.navSelected,
fontSize: AppDimens.homeCardBadge,
fontWeight: FontWeight.w700,
),
),
),
),
],
),
);
}
Widget _primaryRow(AppLocalizations l10n) {
return SingleChildScrollView(
key: const Key('home-primary-sections'),
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: AppDimens.pageHorizontal),
child: Row(
children: [
_primaryItem(
key: const Key('home-section-featured'),
label: l10n.homeSectionFeatured,
selected: selectedCategory == null,
onTap: () => onCategorySelected(null),
),
_primaryItem(
key: const Key('home-section-new'),
label: l10n.homeSectionNew,
selected: false,
onTap: callbacks.onOpenNewReleases,
),
_primaryItem(
key: const Key('home-section-categories'),
label: l10n.homeSectionCategories,
selected: false,
onTap: callbacks.onOpenCategories,
),
_primaryItem(
key: const Key('home-section-ranking'),
label: l10n.homeSectionRanking,
selected: false,
onTap: callbacks.onOpenRanking,
),
for (final category in categories)
_primaryItem(
key: Key('home-section-category-${category.categoryName}'),
label: category.label,
selected: selectedCategory == category.categoryName,
onTap: () => onCategorySelected(category.categoryName),
),
],
),
);
}
Widget _primaryItem({
required Key key,
required String label,
required bool selected,
required VoidCallback onTap,
}) {
return InkWell(
key: key,
onTap: onTap,
child: Padding(
padding: const EdgeInsets.only(right: AppDimens.spaceXl),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
label,
style: TextStyle(
color: selected
? AppColors.navSelected
: AppColors.textSecondary,
fontSize: AppDimens.homeSectionFont,
fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
letterSpacing: 0,
),
),
const SizedBox(height: AppDimens.spaceXs),
Container(
height: AppDimens.homeSectionIndicator,
width: selected ? 20 : 0,
decoration: BoxDecoration(
color: AppColors.navSelected,
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
),
),
],
),
),
);
}
Widget _tagRow(AppLocalizations l10n) {
return Padding(
padding: const EdgeInsets.fromLTRB(
AppDimens.pageHorizontal,
AppDimens.spaceMd,
AppDimens.pageHorizontal,
AppDimens.spaceSm,
),
child: Row(
children: [
Expanded(
child: SingleChildScrollView(
key: const Key('home-secondary-tags'),
scrollDirection: Axis.horizontal,
child: Row(
children: [
for (final tag in tags) ...[
_tagChip(tag),
const SizedBox(width: AppDimens.spaceSm),
],
],
),
),
),
const SizedBox(width: AppDimens.spaceXs),
Tooltip(
message: l10n.filter,
child: SizedBox.square(
dimension: AppDimens.tapTarget,
child: Material(
color: AppColors.contentSurface,
borderRadius: BorderRadius.circular(AppDimens.inputRadius),
child: InkWell(
key: const Key('home-grid-filter'),
borderRadius: BorderRadius.circular(AppDimens.inputRadius),
onTap: callbacks.onOpenFilter,
child: const Icon(
Icons.filter_list_rounded,
color: AppColors.navSelected,
size: AppDimens.homeHeaderIcon,
),
),
),
),
),
],
),
);
}
Widget _tagChip(HomeGridTagOption tag) {
final selected = selectedTag == tag.id;
return InkWell(
key: Key('home-tag-${tag.id}'),
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
onTap: () => onTagSelected(selected ? null : tag.id),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: AppDimens.spaceMd,
vertical: AppDimens.spaceSm,
),
decoration: BoxDecoration(
color: selected ? AppColors.contentChip : AppColors.contentSurface,
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
),
child: Text(
tag.label,
style: TextStyle(
color: selected ? AppColors.navSelected : AppColors.textSecondary,
fontSize: AppDimens.homeSectionFont - 2,
fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
letterSpacing: 0,
),
),
),
);
}
}