fix(flutter): 首页 feed 去底色并优化整集条
This commit is contained in:
1 parent
f94926cff5
commit
636b369bd4
6 files changed
+171
-97
No files matched your search
@@ -14,7 +14,6 @@ import 'interaction_rail.dart';
|
||||
part 'home_feed_overlay_parts.dart';
|
||||
|
||||
const Color _overlayPill = Color(0x66000000);
|
||||
const Color _fullBarColor = Color(0xCC000000);
|
||||
const double _topIconSize = 36;
|
||||
const double _topIconGlyph = 22;
|
||||
const double _tabGap = 22;
|
||||
@@ -24,7 +23,7 @@ const double _underlineHeight = 2;
|
||||
const double _titleFontSize = 17;
|
||||
const double _metaFontSize = 12;
|
||||
const double _tagFontSize = 11;
|
||||
const double _fullBarHeight = 48;
|
||||
const double _fullBarHeight = 44;
|
||||
const double _progressHeight = 2;
|
||||
const double _progressHitHeight = 20;
|
||||
const int _maxTags = 4;
|
||||
@@ -96,56 +95,25 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
||||
Widget build(BuildContext context) {
|
||||
return SafeArea(
|
||||
bottom: false,
|
||||
child: Stack(
|
||||
child: Column(
|
||||
children: [
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: IgnorePointer(child: _gradient(top: true)),
|
||||
),
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
child: IgnorePointer(child: _gradient(top: false)),
|
||||
),
|
||||
Column(
|
||||
children: [
|
||||
_header(context),
|
||||
Expanded(
|
||||
child: Align(
|
||||
alignment: const Alignment(1.0, 0.45),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(0, 0, 10, 16),
|
||||
child: _rail(),
|
||||
),
|
||||
),
|
||||
_header(context),
|
||||
Expanded(
|
||||
child: Align(
|
||||
alignment: const Alignment(1.0, 0.45),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(0, 0, 10, 16),
|
||||
child: _rail(),
|
||||
),
|
||||
_bottomInfo(),
|
||||
_fullSeriesBar(),
|
||||
],
|
||||
),
|
||||
),
|
||||
_bottomInfo(),
|
||||
_fullSeriesBar(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _gradient({required bool top}) {
|
||||
return Container(
|
||||
height: top ? 140 : 360,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: top ? Alignment.topCenter : Alignment.bottomCenter,
|
||||
end: top ? Alignment.bottomCenter : Alignment.topCenter,
|
||||
colors: top
|
||||
? const [Color(0xB3000000), Color(0x00000000)]
|
||||
: const [Color(0xE6000000), Color(0x00000000)],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _header(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 6, 8, 4),
|
||||
@@ -386,41 +354,42 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
||||
return GestureDetector(
|
||||
key: const Key('home-feed-full-series'),
|
||||
onTap: widget.onOpenFullPlayer,
|
||||
child: Container(
|
||||
child: SizedBox(
|
||||
height: _fullBarHeight,
|
||||
color: _fullBarColor,
|
||||
child: Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.play_arrow_rounded,
|
||||
color: Colors.white,
|
||||
size: 14,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.l10n.watchFullSeries(
|
||||
'${widget.drama.episodeCount}',
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
Positioned.fill(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.play_arrow_rounded,
|
||||
color: Colors.white,
|
||||
size: 14,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.l10n.watchFullSeries(
|
||||
'${widget.drama.episodeCount}',
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Icon(
|
||||
Icons.chevron_right_rounded,
|
||||
color: Colors.white,
|
||||
size: 18,
|
||||
),
|
||||
],
|
||||
const Icon(
|
||||
Icons.chevron_right_rounded,
|
||||
color: Colors.white,
|
||||
size: 18,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
part of 'home_feed_overlay.dart';
|
||||
|
||||
const double _thumbSize = 6;
|
||||
const double _thumbActiveSize = 10;
|
||||
|
||||
/// 顶部频道 tab:漫剧点击提示即将上线。
|
||||
enum _FeedTab {
|
||||
anime,
|
||||
@@ -208,10 +211,7 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
|
||||
_update(details.localPosition.dx / width),
|
||||
onHorizontalDragEnd: (_) => _commit(_preview),
|
||||
onHorizontalDragCancel: () => setState(() => _preview = null),
|
||||
child: SizedBox(
|
||||
height: widget.hitHeight,
|
||||
child: Align(alignment: Alignment.bottomCenter, child: track),
|
||||
),
|
||||
child: track,
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -233,15 +233,43 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
|
||||
}
|
||||
|
||||
Widget _track(double fraction, double width) {
|
||||
final active = _preview != null;
|
||||
final size = active ? _thumbActiveSize : _thumbSize;
|
||||
final left = (width * fraction - size / 2)
|
||||
.clamp(0.0, width - size)
|
||||
.toDouble();
|
||||
return SizedBox(
|
||||
height: widget.height,
|
||||
height: widget.hitHeight,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Container(width: width, height: widget.height, color: Colors.white24),
|
||||
Container(
|
||||
width: width * fraction,
|
||||
height: widget.height,
|
||||
color: AppColors.blue,
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
child: Container(height: widget.height, color: Colors.white24),
|
||||
),
|
||||
Positioned(
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
width: width * fraction,
|
||||
height: widget.height,
|
||||
color: AppColors.blue,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: left,
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
key: const Key('home-feed-progress-thumb'),
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.white,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
Reference in new issue
Block a user