// 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 dramas; final ValueChanged 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 = []; 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, ), ), ), ); } }