feat(app): 剧场页九宫格与极简我的页
This commit is contained in:
Zhou Weidong committed
1 parent
dc8ca7b743
commit
35338cbfc8
46 files changed
+2353
-4358
No files matched your search
@@ -0,0 +1,114 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/data/models/content_category.dart';
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
|
||||
const double _gridPadding = 14;
|
||||
const double _tileSpacing = 8;
|
||||
const double _tileAspectRatio = 1.1;
|
||||
const int _columns = 3;
|
||||
const List<IconData> _icons = [
|
||||
Icons.favorite_rounded,
|
||||
Icons.bolt_rounded,
|
||||
Icons.theater_comedy_rounded,
|
||||
Icons.auto_awesome_rounded,
|
||||
Icons.psychology_alt_rounded,
|
||||
Icons.local_fire_department_rounded,
|
||||
Icons.family_restroom_rounded,
|
||||
Icons.work_history_rounded,
|
||||
];
|
||||
|
||||
/// 剧场顶部分类九宫格。
|
||||
class CategoryGrid extends StatelessWidget {
|
||||
const CategoryGrid({
|
||||
super.key,
|
||||
required this.categories,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final List<ContentCategory> categories;
|
||||
final ValueChanged<ContentCategory> onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (categories.isEmpty) return const SizedBox.shrink();
|
||||
return GridView.builder(
|
||||
key: const Key('discover-category-grid'),
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
padding: const EdgeInsets.symmetric(horizontal: _gridPadding),
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: _columns,
|
||||
mainAxisSpacing: _tileSpacing,
|
||||
crossAxisSpacing: _tileSpacing,
|
||||
childAspectRatio: _tileAspectRatio,
|
||||
),
|
||||
itemCount: categories.length,
|
||||
itemBuilder: (context, index) {
|
||||
final category = categories[index];
|
||||
return _CategoryTile(
|
||||
category: category,
|
||||
icon: _icons[index % _icons.length],
|
||||
onTap: () => onTap(category),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CategoryTile extends StatelessWidget {
|
||||
const _CategoryTile({
|
||||
required this.category,
|
||||
required this.icon,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final ContentCategory category;
|
||||
final IconData icon;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
key: Key('discover-category-${category.id}'),
|
||||
color: AppColors.card,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: 30,
|
||||
height: 30,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.blueSoft.withValues(alpha: 0.16),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(icon, color: AppColors.blueSoft, size: 16),
|
||||
),
|
||||
const SizedBox(height: 5),
|
||||
Text(
|
||||
category.name,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 9,
|
||||
fontWeight: FontWeight.w600,
|
||||
height: 1.1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
|
||||
/// 剧场页页头：品牌、搜索与个人页入口。
|
||||
class DiscoverHeader extends StatelessWidget {
|
||||
const DiscoverHeader({
|
||||
super.key,
|
||||
required this.onSearch,
|
||||
required this.onProfile,
|
||||
});
|
||||
|
||||
final VoidCallback onSearch;
|
||||
final VoidCallback onProfile;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return SizedBox(
|
||||
height: 46,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
_brand(l10n),
|
||||
const Spacer(),
|
||||
_HeaderIcon(
|
||||
key: const Key('discover-search-button'),
|
||||
icon: Icons.search_rounded,
|
||||
tooltip: l10n.search,
|
||||
onTap: onSearch,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
_profile(l10n),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
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,
|
||||
label: l10n.myTab,
|
||||
child: InkWell(
|
||||
key: const Key('discover-profile'),
|
||||
customBorder: const CircleBorder(),
|
||||
onTap: onProfile,
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: const BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFF6A5CFF), AppColors.blue],
|
||||
),
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.person_rounded,
|
||||
color: AppColors.onSurface,
|
||||
size: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
|
||||
/// 剧场顶部搜索框。
|
||||
class DiscoverSearchField extends StatelessWidget {
|
||||
const DiscoverSearchField({
|
||||
super.key,
|
||||
required this.controller,
|
||||
required this.focusNode,
|
||||
required this.onChanged,
|
||||
required this.loading,
|
||||
});
|
||||
|
||||
final TextEditingController controller;
|
||||
final FocusNode focusNode;
|
||||
final ValueChanged<String> onChanged;
|
||||
final bool loading;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: SizedBox(
|
||||
height: 36,
|
||||
child: TextField(
|
||||
key: const Key('discover-search'),
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
onChanged: onChanged,
|
||||
onTapOutside: (_) => focusNode.unfocus(),
|
||||
textInputAction: TextInputAction.search,
|
||||
style: const TextStyle(color: AppColors.onSurface, fontSize: 13),
|
||||
decoration: InputDecoration(
|
||||
isDense: true,
|
||||
filled: true,
|
||||
fillColor: AppColors.input,
|
||||
hintText: AppLocalizations.of(context)!.searchDiscover,
|
||||
hintStyle: const TextStyle(color: AppColors.cream, fontSize: 11),
|
||||
prefixIcon: const Icon(
|
||||
Icons.search_rounded,
|
||||
color: AppColors.subtle,
|
||||
size: 17,
|
||||
),
|
||||
suffixIcon: loading
|
||||
? const Padding(
|
||||
padding: EdgeInsets.all(11),
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
)
|
||||
: null,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
borderSide: const BorderSide(color: AppColors.blue, width: 1),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/data/models/drama.dart';
|
||||
import '../../../core/formatting/error_text.dart';
|
||||
import '../../../core/widgets/empty_state.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
import 'drama_grid.dart';
|
||||
|
||||
/// 剧场搜索结果：加载、失败与空结果都留在同一页内。
|
||||
class DiscoverSearchResults extends StatelessWidget {
|
||||
const DiscoverSearchResults({
|
||||
super.key,
|
||||
required this.loading,
|
||||
required this.error,
|
||||
required this.results,
|
||||
required this.onRetry,
|
||||
required this.onOpen,
|
||||
});
|
||||
|
||||
final bool loading;
|
||||
final String? error;
|
||||
final List<Drama> results;
|
||||
final VoidCallback onRetry;
|
||||
final ValueChanged<Drama> onOpen;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 12),
|
||||
child: _content(l10n),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _content(AppLocalizations l10n) {
|
||||
if (loading) {
|
||||
return const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 80),
|
||||
child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
|
||||
);
|
||||
}
|
||||
final message = error;
|
||||
if (message != null) {
|
||||
return EmptyState(
|
||||
key: const Key('discover-search-error'),
|
||||
icon: Icons.cloud_off_rounded,
|
||||
title: errorText(l10n, message, l10n.searchFailed),
|
||||
actionLabel: l10n.retry,
|
||||
actionKey: const Key('discover-search-retry'),
|
||||
onAction: onRetry,
|
||||
);
|
||||
}
|
||||
if (results.isEmpty) {
|
||||
return EmptyState(
|
||||
key: const Key('discover-search-empty'),
|
||||
icon: Icons.search_off_rounded,
|
||||
title: l10n.noSearchResults,
|
||||
subtitle: l10n.emptyHint,
|
||||
);
|
||||
}
|
||||
return DramaGrid(l10n: l10n, dramas: results, onOpen: onOpen);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/config/app_config.dart';
|
||||
import '../../../core/data/models/drama.dart';
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
|
||||
const int _columns = 2;
|
||||
const double _columnGap = 10;
|
||||
const double _cardGap = 10;
|
||||
|
||||
/// 剧场/分类页共用的双列剧目网格。
|
||||
class DramaGrid extends StatelessWidget {
|
||||
const DramaGrid({
|
||||
super.key,
|
||||
required this.l10n,
|
||||
required this.dramas,
|
||||
required this.onOpen,
|
||||
});
|
||||
|
||||
final AppLocalizations l10n;
|
||||
final List<Drama> dramas;
|
||||
final ValueChanged<Drama> onOpen;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
key: const Key('home-all-dramas-section'),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: Row(
|
||||
key: const Key('home-all-dramas-grid'),
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(child: _column(0)),
|
||||
const SizedBox(width: _columnGap),
|
||||
Expanded(child: _column(1)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _column(int start) {
|
||||
final children = <Widget>[];
|
||||
for (var index = start; index < dramas.length; index += _columns) {
|
||||
final drama = dramas[index];
|
||||
children.add(
|
||||
DramaGridCard(l10n: l10n, drama: drama, onTap: () => onOpen(drama)),
|
||||
);
|
||||
if (index + _columns < dramas.length) {
|
||||
children.add(const SizedBox(height: _cardGap));
|
||||
}
|
||||
}
|
||||
return Column(children: children);
|
||||
}
|
||||
}
|
||||
|
||||
/// 双列网格中的剧目卡片。
|
||||
class DramaGridCard extends StatelessWidget {
|
||||
const DramaGridCard({
|
||||
super.key,
|
||||
required this.l10n,
|
||||
required this.drama,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final AppLocalizations l10n;
|
||||
final Drama drama;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return InkWell(
|
||||
key: Key('home-drama-card-${drama.id}'),
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_cover(),
|
||||
const SizedBox(height: 5),
|
||||
_title(),
|
||||
const SizedBox(height: 2),
|
||||
_genre(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _cover() {
|
||||
final free =
|
||||
drama.freeEpisodes > 0 ||
|
||||
drama.episodes.any((episode) => episode.isFree);
|
||||
return ClipRRect(
|
||||
key: Key('home-drama-cover-${drama.id}'),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: Stack(
|
||||
children: [
|
||||
_DiscoverCoverImage(path: drama.posterUrl),
|
||||
if (free) Positioned(top: 6, left: 6, child: _freeBadge()),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _freeBadge() {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.blue,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
l10n.free,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onPrimary,
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _title() {
|
||||
return Text(
|
||||
drama.title,
|
||||
key: Key('home-drama-title-${drama.id}'),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _genre() {
|
||||
final genre = drama.genre.isEmpty ? drama.category : drama.genre;
|
||||
return Text(
|
||||
genre.isEmpty ? l10n.videoPending : genre,
|
||||
key: Key('home-drama-genre-${drama.id}'),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DiscoverCoverImage extends StatelessWidget {
|
||||
const _DiscoverCoverImage({required this.path});
|
||||
|
||||
final String path;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final url = AppConfig.mediaUrl(path);
|
||||
if (url.isEmpty) return _placeholder();
|
||||
return Image.network(
|
||||
url,
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,258 +0,0 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
part of '../discover_view.dart';
|
||||
|
||||
class _HomeDramaGrid extends StatelessWidget {
|
||||
const _HomeDramaGrid({
|
||||
required this.l10n,
|
||||
required this.categories,
|
||||
required this.dramas,
|
||||
required this.searching,
|
||||
required this.searchLoading,
|
||||
required this.searchError,
|
||||
required this.onRetrySearch,
|
||||
required this.onOpen,
|
||||
});
|
||||
|
||||
final AppLocalizations l10n;
|
||||
final CategoryController categories;
|
||||
final List<Drama> dramas;
|
||||
final bool searching;
|
||||
final bool searchLoading;
|
||||
final String? searchError;
|
||||
final VoidCallback onRetrySearch;
|
||||
final ValueChanged<Drama> onOpen;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final loading = _loadingState();
|
||||
if (loading != null) return loading;
|
||||
final search = _searchState();
|
||||
if (search != null) return search;
|
||||
if (dramas.isEmpty) return _emptyState();
|
||||
return SliverMainAxisGroup(
|
||||
slivers: [
|
||||
SliverToBoxAdapter(child: _masonry(dramas)),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 24)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget? _loadingState() {
|
||||
if (categories.loading && categories.feed.sections.isEmpty) {
|
||||
return const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator(strokeWidth: 2)),
|
||||
);
|
||||
}
|
||||
if (categories.error == null) return null;
|
||||
return _fill(
|
||||
EmptyState(
|
||||
key: const Key('home-categories-error'),
|
||||
icon: Icons.cloud_off_rounded,
|
||||
title: l10n.categoriesError,
|
||||
subtitle: l10n.emptyHint,
|
||||
actionLabel: l10n.retry,
|
||||
onAction: categories.load,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget? _searchState() {
|
||||
if (searching && searchLoading) {
|
||||
return const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: CircularProgressIndicator(
|
||||
key: Key('discover-search-loading'),
|
||||
strokeWidth: 2,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
if (!searching || searchError == null) return null;
|
||||
return _fill(
|
||||
EmptyState(
|
||||
key: const Key('discover-search-error'),
|
||||
icon: Icons.cloud_off_rounded,
|
||||
title: errorText(l10n, searchError, l10n.searchFailed),
|
||||
actionLabel: l10n.retry,
|
||||
actionKey: const Key('discover-search-retry'),
|
||||
onAction: onRetrySearch,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _emptyState() {
|
||||
return _fill(
|
||||
EmptyState(
|
||||
key: const Key('home-all-dramas-empty'),
|
||||
icon: searching
|
||||
? Icons.search_off_rounded
|
||||
: Icons.movie_filter_outlined,
|
||||
title: searching
|
||||
? l10n.noSearchResults
|
||||
: categories.selectedSectionMissing
|
||||
? l10n.noCategoryDramas
|
||||
: l10n.noSearchResults,
|
||||
subtitle: l10n.emptyHint,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _masonry(List<Drama> items) {
|
||||
return Padding(
|
||||
key: const Key('home-all-dramas-section'),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: Row(
|
||||
key: const Key('home-all-dramas-grid'),
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(child: _column(items, 0)),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(child: _column(items, 1)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _column(List<Drama> items, int start) {
|
||||
final children = <Widget>[];
|
||||
for (var index = start; index < items.length; index += 2) {
|
||||
children.add(
|
||||
_HomeDramaCard(
|
||||
l10n: l10n,
|
||||
drama: items[index],
|
||||
onTap: () => onOpen(items[index]),
|
||||
),
|
||||
);
|
||||
if (index + 2 < items.length) {
|
||||
children.add(const SizedBox(height: 10));
|
||||
}
|
||||
}
|
||||
return Column(children: children);
|
||||
}
|
||||
|
||||
Widget _fill(Widget child) =>
|
||||
SliverFillRemaining(hasScrollBody: false, child: child);
|
||||
}
|
||||
|
||||
class _HomeDramaCard extends StatelessWidget {
|
||||
const _HomeDramaCard({
|
||||
required this.l10n,
|
||||
required this.drama,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final AppLocalizations l10n;
|
||||
final Drama drama;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final genre = drama.genre.isEmpty ? drama.category : drama.genre;
|
||||
final free =
|
||||
drama.freeEpisodes > 0 ||
|
||||
drama.episodes.any((episode) => episode.isFree);
|
||||
return InkWell(
|
||||
key: Key('home-drama-card-${drama.id}'),
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
ClipRRect(
|
||||
key: Key('home-drama-cover-${drama.id}'),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: Stack(
|
||||
children: [
|
||||
_DiscoverCoverImage(path: drama.posterUrl),
|
||||
if (free)
|
||||
Positioned(
|
||||
top: 6,
|
||||
left: 6,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 6,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.blue,
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
),
|
||||
child: Text(
|
||||
l10n.free,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onPrimary,
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 5),
|
||||
Text(
|
||||
drama.title,
|
||||
key: Key('home-drama-title-${drama.id}'),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
genre.isEmpty ? l10n.videoPending : genre,
|
||||
key: Key('home-drama-genre-${drama.id}'),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DiscoverCoverImage extends StatelessWidget {
|
||||
const _DiscoverCoverImage({required this.path});
|
||||
|
||||
final String path;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final url = AppConfig.mediaUrl(path);
|
||||
if (url.isEmpty) return _placeholder();
|
||||
return Image.network(
|
||||
url,
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/data/models/drama.dart';
|
||||
import '../../../core/data/models/home_feed.dart';
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../core/widgets/empty_state.dart';
|
||||
import '../../../core/widgets/remote_image.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
import '../ranking_logic.dart';
|
||||
|
||||
const int _topLimit = 5;
|
||||
const double _rowHeight = 68;
|
||||
const double _posterWidth = 40;
|
||||
const double _posterHeight = 54;
|
||||
const double _badgeSize = 24;
|
||||
|
||||
/// 发现页内嵌榜单区块：热播/新剧切换 + 前 5 名。
|
||||
class RankingSection extends StatefulWidget {
|
||||
const RankingSection({
|
||||
super.key,
|
||||
required this.sections,
|
||||
required this.fallback,
|
||||
required this.onOpen,
|
||||
});
|
||||
|
||||
final List<FeedSection> sections;
|
||||
final List<Drama> fallback;
|
||||
final ValueChanged<Drama> onOpen;
|
||||
|
||||
@override
|
||||
State<RankingSection> createState() => _RankingSectionState();
|
||||
}
|
||||
|
||||
class _RankingSectionState extends State<RankingSection> {
|
||||
late final RankingLogic logic = RankingLogic(
|
||||
sections: widget.sections,
|
||||
fallback: widget.fallback,
|
||||
);
|
||||
|
||||
@override
|
||||
void didUpdateWidget(covariant RankingSection oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (!identical(oldWidget.sections, widget.sections) ||
|
||||
!identical(oldWidget.fallback, widget.fallback)) {
|
||||
logic.updateSources(sections: widget.sections, fallback: widget.fallback);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
logic.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => ListenableBuilder(
|
||||
listenable: logic,
|
||||
builder: (context, _) => _content(context),
|
||||
);
|
||||
|
||||
Widget _content(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final entries = logic.entries.take(_topLimit).toList();
|
||||
return Container(
|
||||
key: const Key('discover-ranking-section'),
|
||||
margin: const EdgeInsets.fromLTRB(14, 16, 14, 8),
|
||||
padding: const EdgeInsets.fromLTRB(12, 12, 12, 8),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.card,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(color: AppColors.border),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_header(l10n),
|
||||
const SizedBox(height: 8),
|
||||
if (entries.isEmpty)
|
||||
EmptyState(
|
||||
key: const Key('ranking-empty'),
|
||||
icon: Icons.leaderboard_outlined,
|
||||
title: l10n.rankingEmptyTitle,
|
||||
subtitle: l10n.rankingEmptyBody,
|
||||
compact: true,
|
||||
)
|
||||
else
|
||||
for (final entry in entries) _row(entry, l10n),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _header(AppLocalizations l10n) {
|
||||
return Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.local_fire_department_rounded,
|
||||
color: AppColors.blue,
|
||||
size: 18,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
l10n.rankingTitle,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
),
|
||||
_boardChip(
|
||||
key: const Key('ranking-tab-hot'),
|
||||
label: l10n.rankingHot,
|
||||
board: RankingBoard.hot,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
_boardChip(
|
||||
key: const Key('ranking-tab-new'),
|
||||
label: l10n.rankingNew,
|
||||
board: RankingBoard.newReleases,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _boardChip({
|
||||
required Key key,
|
||||
required String label,
|
||||
required RankingBoard board,
|
||||
}) {
|
||||
final selected = logic.board == board;
|
||||
return Material(
|
||||
key: key,
|
||||
color: selected ? AppColors.blue : AppColors.raised,
|
||||
borderRadius: BorderRadius.circular(999),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: () => logic.select(board),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 5),
|
||||
child: Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
color: selected ? AppColors.onPrimary : AppColors.muted,
|
||||
fontSize: 9,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _row(RankingEntry entry, AppLocalizations l10n) {
|
||||
return _RankRow(
|
||||
entry: entry,
|
||||
subtitle: _subtitle(entry.drama, l10n),
|
||||
onTap: () => widget.onOpen(entry.drama),
|
||||
);
|
||||
}
|
||||
|
||||
String _subtitle(Drama drama, AppLocalizations l10n) {
|
||||
final genre = drama.genre.isNotEmpty ? drama.genre : drama.category;
|
||||
final count = l10n.episodeCount(drama.episodeCount);
|
||||
return genre.isEmpty ? count : '$genre · $count';
|
||||
}
|
||||
}
|
||||
|
||||
class _RankRow extends StatelessWidget {
|
||||
const _RankRow({
|
||||
required this.entry,
|
||||
required this.subtitle,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final RankingEntry entry;
|
||||
final String subtitle;
|
||||
final VoidCallback onTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final drama = entry.drama;
|
||||
return Material(
|
||||
key: Key('ranking-entry-${drama.id}'),
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: SizedBox(height: _rowHeight, child: _content(drama)),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _content(Drama drama) {
|
||||
return Row(
|
||||
children: [
|
||||
_rankBadge(entry.rank),
|
||||
const SizedBox(width: 8),
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
child: RemoteImage(
|
||||
drama.posterUrl,
|
||||
width: _posterWidth,
|
||||
height: _posterHeight,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(child: _text(drama)),
|
||||
const Icon(
|
||||
Icons.chevron_right_rounded,
|
||||
color: AppColors.subtle,
|
||||
size: 18,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _text(Drama drama) {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
drama.title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 3),
|
||||
Text(
|
||||
subtitle,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(color: AppColors.subtle, fontSize: 9),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _rankBadge(int rank) {
|
||||
final top = rank <= 3;
|
||||
return Container(
|
||||
width: _badgeSize,
|
||||
height: _badgeSize,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: top ? AppColors.gold.withValues(alpha: 0.16) : AppColors.raised,
|
||||
borderRadius: BorderRadius.circular(7),
|
||||
),
|
||||
child: Text(
|
||||
'$rank',
|
||||
style: TextStyle(
|
||||
color: top ? AppColors.gold : AppColors.muted,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w900,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user