feat(flutter): 完成 K28-A1 四 Tab 首页
This commit is contained in:
Zhou Weidong committed
1 parent
f981f88e0d
commit
49f3e63ed0
25 files changed
+606
-689
No files matched your search
@@ -1,147 +0,0 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/data/models/drama.dart';
|
||||
import '../../../core/data/models/watch_progress.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 _railHeight = 96;
|
||||
const double _cardWidth = 286;
|
||||
const double _coverWidth = 64;
|
||||
const double _playSize = 34;
|
||||
|
||||
/// One drama/record pair rendered by the continuation rail.
|
||||
typedef HomeContinueItem = ({Drama drama, WatchProgress record});
|
||||
|
||||
/// Home continuation cards for records that still have unwatched time.
|
||||
class HomeContinueWatching extends StatelessWidget {
|
||||
const HomeContinueWatching({
|
||||
super.key,
|
||||
required this.items,
|
||||
required this.onPlay,
|
||||
});
|
||||
|
||||
final List<HomeContinueItem> items;
|
||||
final void Function(Drama drama, WatchProgress record) onPlay;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (items.isEmpty) return const SizedBox.shrink();
|
||||
return SizedBox(
|
||||
key: const Key('home-continue-watching'),
|
||||
height: _railHeight,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.pageHorizontal,
|
||||
),
|
||||
itemCount: items.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(width: AppDimens.spaceSm),
|
||||
itemBuilder: (context, index) {
|
||||
final item = items[index];
|
||||
return _ContinueCard(
|
||||
item: item,
|
||||
onPlay: () => onPlay(item.drama, item.record),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ContinueCard extends StatelessWidget {
|
||||
const _ContinueCard({required this.item, required this.onPlay});
|
||||
|
||||
final HomeContinueItem item;
|
||||
final VoidCallback onPlay;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return Container(
|
||||
width: _cardWidth,
|
||||
padding: const EdgeInsets.all(AppDimens.spaceSm),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.card,
|
||||
borderRadius: BorderRadius.circular(AppDimens.cardRadius),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppDimens.innerRadius),
|
||||
child: RemoteImage(
|
||||
item.drama.posterUrl,
|
||||
width: _coverWidth,
|
||||
height: _railHeight - AppDimens.spaceLg,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.drama.title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: AppDimens.previewCardTitle,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
Text(
|
||||
_progressText(l10n, item.drama, item.record),
|
||||
key: Key('home-continue-progress-${item.drama.id}'),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.muted,
|
||||
fontSize: AppDimens.cardMeta,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
IconButton(
|
||||
key: Key('home-continue-play-${item.drama.id}'),
|
||||
onPressed: onPlay,
|
||||
style: IconButton.styleFrom(
|
||||
backgroundColor: AppColors.blue,
|
||||
foregroundColor: AppColors.onPrimary,
|
||||
fixedSize: const Size.square(_playSize),
|
||||
padding: EdgeInsets.zero,
|
||||
),
|
||||
icon: const Icon(
|
||||
Icons.play_arrow_rounded,
|
||||
size: AppDimens.accountIcon,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _progressText(
|
||||
AppLocalizations l10n,
|
||||
Drama drama,
|
||||
WatchProgress record,
|
||||
) {
|
||||
final episode = drama.episodes.where(
|
||||
(value) => value.id == record.episodeId,
|
||||
);
|
||||
final number = episode.isEmpty ? 1 : episode.first.number;
|
||||
final remaining = record.duration - record.position;
|
||||
final minutes = remaining.inSeconds <= 0
|
||||
? 0
|
||||
: (remaining.inSeconds / Duration.secondsPerMinute).ceil();
|
||||
return l10n.episodeRemaining(number, minutes);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.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;
|
||||
const double _columnGap = 10;
|
||||
const double _cardGap = 10;
|
||||
const double _coverAspectRatio = 3 / 4;
|
||||
|
||||
/// Two-column drama grid used by the browse-first home page.
|
||||
class HomeDramaGrid extends StatelessWidget {
|
||||
const HomeDramaGrid({
|
||||
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-popular-grid'),
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppDimens.pageHorizontal),
|
||||
child: Row(
|
||||
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(
|
||||
HomeDramaCard(l10n: l10n, drama: drama, onTap: () => onOpen(drama)),
|
||||
);
|
||||
if (index + _columns < dramas.length) {
|
||||
children.add(const SizedBox(height: _cardGap));
|
||||
}
|
||||
}
|
||||
return Column(children: children);
|
||||
}
|
||||
}
|
||||
|
||||
/// Home catalogue card with title, genre, free badge, episode count, and heat.
|
||||
class HomeDramaCard extends StatelessWidget {
|
||||
const HomeDramaCard({
|
||||
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(AppDimens.coverRadius),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_cover(),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
_title(),
|
||||
const SizedBox(height: 2),
|
||||
_genre(),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
_metadata(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _cover() {
|
||||
return ClipRRect(
|
||||
key: Key('home-drama-cover-${drama.id}'),
|
||||
borderRadius: BorderRadius.circular(AppDimens.coverRadius),
|
||||
child: Stack(
|
||||
children: [
|
||||
RemoteImage(
|
||||
drama.posterUrl,
|
||||
width: double.infinity,
|
||||
fit: BoxFit.fitWidth,
|
||||
showFallbackIcon: true,
|
||||
fallbackAspectRatio: _coverAspectRatio,
|
||||
),
|
||||
if (_isFree) Positioned(top: 6, left: 6, child: _freeBadge()),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
bool get _isFree {
|
||||
return drama.freeEpisodes > 0 ||
|
||||
drama.episodes.any((episode) => episode.isFree);
|
||||
}
|
||||
|
||||
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: AppDimens.cardMeta,
|
||||
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: AppDimens.previewSectionTitle,
|
||||
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: 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}'),
|
||||
style: const TextStyle(
|
||||
color: AppColors.subtle,
|
||||
fontSize: AppDimens.cardViews,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
l10n.viewCountLabel(drama.viewCount),
|
||||
key: Key('home-drama-views-${drama.id}'),
|
||||
style: const TextStyle(
|
||||
color: AppColors.subtle,
|
||||
fontSize: AppDimens.cardViews,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -74,7 +74,7 @@ class HomeMenuSheet extends StatelessWidget {
|
||||
_item(
|
||||
key: const Key('drawer-discover'),
|
||||
icon: Icons.explore_outlined,
|
||||
label: l10n.theaterTab,
|
||||
label: l10n.discoverTab,
|
||||
onTap: () => closeThen(onDiscover),
|
||||
),
|
||||
_item(
|
||||
|
||||
Reference in new issue
Block a user