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
@@ -3,48 +3,37 @@
|
||||
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.controller,
|
||||
required this.focusNode,
|
||||
required this.onChanged,
|
||||
required this.loading,
|
||||
required this.onSearch,
|
||||
required this.onProfile,
|
||||
});
|
||||
|
||||
final TextEditingController controller;
|
||||
final FocusNode focusNode;
|
||||
final ValueChanged<String> onChanged;
|
||||
final bool loading;
|
||||
final VoidCallback onSearch;
|
||||
final VoidCallback onProfile;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return SizedBox(
|
||||
height: AppDimens.contentHeaderHeight,
|
||||
height: 46,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.pageHorizontal,
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: DiscoverSearchField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
onChanged: onChanged,
|
||||
loading: loading,
|
||||
horizontalPadding: 0,
|
||||
),
|
||||
_brand(l10n),
|
||||
const Spacer(),
|
||||
_HeaderIcon(
|
||||
key: const Key('discover-search-button'),
|
||||
icon: Icons.search_rounded,
|
||||
tooltip: l10n.search,
|
||||
onTap: onSearch,
|
||||
),
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
const SizedBox(width: 8),
|
||||
_profile(l10n),
|
||||
],
|
||||
),
|
||||
@@ -52,6 +41,37 @@ 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,
|
||||
@@ -81,3 +101,34 @@ 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),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -13,19 +13,17 @@ 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: EdgeInsets.symmetric(horizontal: horizontalPadding),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: SizedBox(
|
||||
height: 36,
|
||||
child: TextField(
|
||||
|
||||
@@ -2,10 +2,9 @@
|
||||
|
||||
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;
|
||||
@@ -84,8 +83,6 @@ class DramaGridCard extends StatelessWidget {
|
||||
_title(),
|
||||
const SizedBox(height: 2),
|
||||
_genre(),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
_metadata(),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -118,7 +115,7 @@ class DramaGridCard extends StatelessWidget {
|
||||
l10n.free,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onPrimary,
|
||||
fontSize: AppDimens.cardMeta,
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
),
|
||||
@@ -133,7 +130,7 @@ class DramaGridCard extends StatelessWidget {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onSurface,
|
||||
fontSize: AppDimens.previewSectionTitle,
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w800,
|
||||
),
|
||||
);
|
||||
@@ -146,39 +143,7 @@ class DramaGridCard extends StatelessWidget {
|
||||
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}'),
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
style: const TextStyle(color: Color(0xFFBBBBBB), fontSize: 9),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -190,12 +155,33 @@ class _DiscoverCoverImage extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return RemoteImage(
|
||||
path,
|
||||
final url = AppConfig.mediaUrl(path);
|
||||
if (url.isEmpty) return _placeholder();
|
||||
return Image.network(
|
||||
url,
|
||||
width: double.infinity,
|
||||
fit: BoxFit.fitWidth,
|
||||
showFallbackIcon: true,
|
||||
fallbackAspectRatio: 3 / 4,
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -4,13 +4,14 @@ import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/data/models/home_feed.dart';
|
||||
import '../../../core/data/models/drama.dart';
|
||||
import '../../../core/data/models/home_feed.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;
|
||||
@@ -115,6 +116,9 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (widget.banners.isEmpty) return const SizedBox.shrink();
|
||||
final height = widget.dramaFor == null
|
||||
? _carouselHeight
|
||||
: AppDimens.heroBannerHeight;
|
||||
return Listener(
|
||||
key: const Key('feed-banner-carousel'),
|
||||
onPointerDown: (_) => _pause(),
|
||||
@@ -123,7 +127,7 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
|
||||
child: Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: AppDimens.heroBannerHeight,
|
||||
height: height,
|
||||
child: PageView.builder(
|
||||
controller: _controller,
|
||||
itemCount: widget.banners.length,
|
||||
@@ -147,20 +151,22 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
RemoteImage(banner.imageUrl, showFallbackIcon: true),
|
||||
const DecoratedBox(
|
||||
DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Color(0x120B0C10), Color(0xE60B0C10)],
|
||||
colors: drama == null
|
||||
? const [Color(0x00000000), Color(0x8A0B0C10)]
|
||||
: const [Color(0x120B0C10), Color(0xE60B0C10)],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (drama != null)
|
||||
Positioned(
|
||||
left: 16,
|
||||
right: 64,
|
||||
bottom: 14,
|
||||
left: AppDimens.pageHorizontal,
|
||||
right: _copyRightGap,
|
||||
bottom: AppDimens.cardPadding,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
@@ -244,6 +250,8 @@ class _FeedBannerCarouselState extends State<FeedBannerCarousel> {
|
||||
}
|
||||
}
|
||||
|
||||
const double _copyRightGap = 64;
|
||||
|
||||
class _PlayMark extends StatelessWidget {
|
||||
const _PlayMark();
|
||||
|
||||
|
||||
Reference in new issue
Block a user