fix(flutter): 首页 feed 去底色并优化整集条
This commit is contained in:
1 parent
f94926cff5
commit
636b369bd4
6 files changed
+171
-97
No files matched your search
@@ -3,6 +3,7 @@
|
|||||||
import 'dart:async';
|
import 'dart:async';
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/services.dart';
|
||||||
import 'package:provider/provider.dart';
|
import 'package:provider/provider.dart';
|
||||||
|
|
||||||
import '../../core/data/models/drama.dart';
|
import '../../core/data/models/drama.dart';
|
||||||
@@ -32,10 +33,7 @@ class HomePage extends StatelessWidget {
|
|||||||
final l10n = AppLocalizations.of(context)!;
|
final l10n = AppLocalizations.of(context)!;
|
||||||
return Theme(
|
return Theme(
|
||||||
data: AppTheme.light(),
|
data: AppTheme.light(),
|
||||||
child: DecoratedBox(
|
child: _buildHome(context, catalog, l10n),
|
||||||
decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
|
|
||||||
child: _buildHome(context, catalog, l10n),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,7 +134,8 @@ class _HomeTabsState extends State<_HomeTabs> {
|
|||||||
|
|
||||||
Widget _scaffold(BuildContext context) {
|
Widget _scaffold(BuildContext context) {
|
||||||
final l10n = AppLocalizations.of(context)!;
|
final l10n = AppLocalizations.of(context)!;
|
||||||
return PopScope(
|
final feed = logic.tab == 0;
|
||||||
|
final content = PopScope(
|
||||||
canPop: false,
|
canPop: false,
|
||||||
onPopInvokedWithResult: (didPop, _) {
|
onPopInvokedWithResult: (didPop, _) {
|
||||||
if (didPop) return;
|
if (didPop) return;
|
||||||
@@ -144,11 +143,21 @@ class _HomeTabsState extends State<_HomeTabs> {
|
|||||||
},
|
},
|
||||||
child: Scaffold(
|
child: Scaffold(
|
||||||
key: logic.scaffoldKey,
|
key: logic.scaffoldKey,
|
||||||
backgroundColor: logic.tab == 0 ? Colors.black : Colors.transparent,
|
backgroundColor: Colors.transparent,
|
||||||
body: _body(context),
|
body: _body(context),
|
||||||
bottomNavigationBar: logic.videoImmersive ? null : _nav(context, l10n),
|
bottomNavigationBar: logic.videoImmersive ? null : _nav(context, l10n),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
return AnnotatedRegion<SystemUiOverlayStyle>(
|
||||||
|
value: feed ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark,
|
||||||
|
child: feed
|
||||||
|
? content
|
||||||
|
: DecoratedBox(
|
||||||
|
key: const Key('home-page-gradient'),
|
||||||
|
decoration: const BoxDecoration(gradient: AppTheme.pageGradient),
|
||||||
|
child: content,
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _body(BuildContext context) {
|
Widget _body(BuildContext context) {
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ class PlayerPage extends StatefulWidget {
|
|||||||
final List<Drama>? feedDramas;
|
final List<Drama>? feedDramas;
|
||||||
final ValueChanged<Drama>? onDramaChanged;
|
final ValueChanged<Drama>? onDramaChanged;
|
||||||
final ValueChanged<bool>? onImmersiveChanged;
|
final ValueChanged<bool>? onImmersiveChanged;
|
||||||
final void Function(Drama drama, Episode episode)? onOpenFullPlayer;
|
final Future<void> Function(Drama drama, Episode episode)? onOpenFullPlayer;
|
||||||
final VoidCallback? onRefreshFeed;
|
final VoidCallback? onRefreshFeed;
|
||||||
final WalletController? wallet;
|
final WalletController? wallet;
|
||||||
final DownloadController? downloads;
|
final DownloadController? downloads;
|
||||||
@@ -415,8 +415,11 @@ class _PlayerPageState extends State<PlayerPage> with WidgetsBindingObserver {
|
|||||||
onShare: () => logic.shareDrama(context, drama),
|
onShare: () => logic.shareDrama(context, drama),
|
||||||
onEpisodes: () => logic.showEpisodes(context),
|
onEpisodes: () => logic.showEpisodes(context),
|
||||||
onDetail: () => unawaited(logic.openDetail(context)),
|
onDetail: () => unawaited(logic.openDetail(context)),
|
||||||
onOpenFullPlayer: () =>
|
onOpenFullPlayer: () async {
|
||||||
widget.onOpenFullPlayer?.call(drama, episode),
|
await widget.onOpenFullPlayer?.call(drama, episode);
|
||||||
|
if (!mounted || !widget.active) return;
|
||||||
|
logic.session.setUserWantsPlay(true);
|
||||||
|
},
|
||||||
onRefreshFeed: () => widget.onRefreshFeed?.call(),
|
onRefreshFeed: () => widget.onRefreshFeed?.call(),
|
||||||
onDownload: () => requestEpisodeDownload(context, episode.id),
|
onDownload: () => requestEpisodeDownload(context, episode.id),
|
||||||
onClear: () => setState(() => _chromeVisible = false),
|
onClear: () => setState(() => _chromeVisible = false),
|
||||||
|
|||||||
@@ -14,7 +14,6 @@ import 'interaction_rail.dart';
|
|||||||
part 'home_feed_overlay_parts.dart';
|
part 'home_feed_overlay_parts.dart';
|
||||||
|
|
||||||
const Color _overlayPill = Color(0x66000000);
|
const Color _overlayPill = Color(0x66000000);
|
||||||
const Color _fullBarColor = Color(0xCC000000);
|
|
||||||
const double _topIconSize = 36;
|
const double _topIconSize = 36;
|
||||||
const double _topIconGlyph = 22;
|
const double _topIconGlyph = 22;
|
||||||
const double _tabGap = 22;
|
const double _tabGap = 22;
|
||||||
@@ -24,7 +23,7 @@ const double _underlineHeight = 2;
|
|||||||
const double _titleFontSize = 17;
|
const double _titleFontSize = 17;
|
||||||
const double _metaFontSize = 12;
|
const double _metaFontSize = 12;
|
||||||
const double _tagFontSize = 11;
|
const double _tagFontSize = 11;
|
||||||
const double _fullBarHeight = 48;
|
const double _fullBarHeight = 44;
|
||||||
const double _progressHeight = 2;
|
const double _progressHeight = 2;
|
||||||
const double _progressHitHeight = 20;
|
const double _progressHitHeight = 20;
|
||||||
const int _maxTags = 4;
|
const int _maxTags = 4;
|
||||||
@@ -96,56 +95,25 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
|||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return SafeArea(
|
return SafeArea(
|
||||||
bottom: false,
|
bottom: false,
|
||||||
child: Stack(
|
child: Column(
|
||||||
children: [
|
children: [
|
||||||
Positioned(
|
_header(context),
|
||||||
top: 0,
|
Expanded(
|
||||||
left: 0,
|
child: Align(
|
||||||
right: 0,
|
alignment: const Alignment(1.0, 0.45),
|
||||||
child: IgnorePointer(child: _gradient(top: true)),
|
child: Padding(
|
||||||
),
|
padding: const EdgeInsets.fromLTRB(0, 0, 10, 16),
|
||||||
Positioned(
|
child: _rail(),
|
||||||
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(),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
_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) {
|
Widget _header(BuildContext context) {
|
||||||
return Padding(
|
return Padding(
|
||||||
padding: const EdgeInsets.fromLTRB(8, 6, 8, 4),
|
padding: const EdgeInsets.fromLTRB(8, 6, 8, 4),
|
||||||
@@ -386,41 +354,42 @@ class _HomeFeedOverlayState extends State<HomeFeedOverlay> {
|
|||||||
return GestureDetector(
|
return GestureDetector(
|
||||||
key: const Key('home-feed-full-series'),
|
key: const Key('home-feed-full-series'),
|
||||||
onTap: widget.onOpenFullPlayer,
|
onTap: widget.onOpenFullPlayer,
|
||||||
child: Container(
|
child: SizedBox(
|
||||||
height: _fullBarHeight,
|
height: _fullBarHeight,
|
||||||
color: _fullBarColor,
|
|
||||||
child: Stack(
|
child: Stack(
|
||||||
children: [
|
children: [
|
||||||
Padding(
|
Positioned.fill(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 14),
|
child: Padding(
|
||||||
child: Row(
|
padding: const EdgeInsets.symmetric(horizontal: 14),
|
||||||
children: [
|
child: Row(
|
||||||
const Icon(
|
children: [
|
||||||
Icons.play_arrow_rounded,
|
const Icon(
|
||||||
color: Colors.white,
|
Icons.play_arrow_rounded,
|
||||||
size: 14,
|
color: Colors.white,
|
||||||
),
|
size: 14,
|
||||||
const SizedBox(width: 6),
|
),
|
||||||
Expanded(
|
const SizedBox(width: 6),
|
||||||
child: Text(
|
Expanded(
|
||||||
widget.l10n.watchFullSeries(
|
child: Text(
|
||||||
'${widget.drama.episodeCount}',
|
widget.l10n.watchFullSeries(
|
||||||
),
|
'${widget.drama.episodeCount}',
|
||||||
maxLines: 1,
|
),
|
||||||
overflow: TextOverflow.ellipsis,
|
maxLines: 1,
|
||||||
style: const TextStyle(
|
overflow: TextOverflow.ellipsis,
|
||||||
color: Colors.white,
|
style: const TextStyle(
|
||||||
fontSize: 13,
|
color: Colors.white,
|
||||||
fontWeight: FontWeight.w600,
|
fontSize: 13,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
const Icon(
|
||||||
const Icon(
|
Icons.chevron_right_rounded,
|
||||||
Icons.chevron_right_rounded,
|
color: Colors.white,
|
||||||
color: Colors.white,
|
size: 18,
|
||||||
size: 18,
|
),
|
||||||
),
|
],
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
Positioned(
|
Positioned(
|
||||||
|
|||||||
@@ -2,6 +2,9 @@
|
|||||||
|
|
||||||
part of 'home_feed_overlay.dart';
|
part of 'home_feed_overlay.dart';
|
||||||
|
|
||||||
|
const double _thumbSize = 6;
|
||||||
|
const double _thumbActiveSize = 10;
|
||||||
|
|
||||||
/// 顶部频道 tab:漫剧点击提示即将上线。
|
/// 顶部频道 tab:漫剧点击提示即将上线。
|
||||||
enum _FeedTab {
|
enum _FeedTab {
|
||||||
anime,
|
anime,
|
||||||
@@ -208,10 +211,7 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
|
|||||||
_update(details.localPosition.dx / width),
|
_update(details.localPosition.dx / width),
|
||||||
onHorizontalDragEnd: (_) => _commit(_preview),
|
onHorizontalDragEnd: (_) => _commit(_preview),
|
||||||
onHorizontalDragCancel: () => setState(() => _preview = null),
|
onHorizontalDragCancel: () => setState(() => _preview = null),
|
||||||
child: SizedBox(
|
child: track,
|
||||||
height: widget.hitHeight,
|
|
||||||
child: Align(alignment: Alignment.bottomCenter, child: track),
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
@@ -233,15 +233,43 @@ class _FeedProgressBarState extends State<_FeedProgressBar> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
Widget _track(double fraction, double width) {
|
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(
|
return SizedBox(
|
||||||
height: widget.height,
|
height: widget.hitHeight,
|
||||||
child: Stack(
|
child: Stack(
|
||||||
|
clipBehavior: Clip.none,
|
||||||
children: [
|
children: [
|
||||||
Container(width: width, height: widget.height, color: Colors.white24),
|
Positioned(
|
||||||
Container(
|
left: 0,
|
||||||
width: width * fraction,
|
right: 0,
|
||||||
height: widget.height,
|
bottom: 0,
|
||||||
color: AppColors.blue,
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -209,17 +209,38 @@ void main() {
|
|||||||
);
|
);
|
||||||
await tester.pumpAndSettle();
|
await tester.pumpAndSettle();
|
||||||
|
|
||||||
|
final bar = tester.getRect(find.byKey(const Key('home-feed-full-series')));
|
||||||
|
expect(bar.height, 44);
|
||||||
|
expect(
|
||||||
|
tester.getRect(find.textContaining('Watch full series')).center.dy,
|
||||||
|
closeTo(bar.center.dy, 2),
|
||||||
|
);
|
||||||
|
expect(
|
||||||
|
tester.getSize(find.byKey(const Key('home-feed-progress-thumb'))),
|
||||||
|
const Size(6, 6),
|
||||||
|
);
|
||||||
|
|
||||||
await tester.tap(find.byKey(const Key('home-feed-refresh')));
|
await tester.tap(find.byKey(const Key('home-feed-refresh')));
|
||||||
await tester.pump();
|
await tester.pump();
|
||||||
expect(refreshed, 1);
|
expect(refreshed, 1);
|
||||||
|
|
||||||
await tester.drag(
|
final gesture = await tester.startGesture(
|
||||||
find.byKey(const Key('home-feed-progress')),
|
tester.getCenter(find.byKey(const Key('home-feed-progress'))),
|
||||||
const Offset(120, 0),
|
|
||||||
);
|
);
|
||||||
|
await gesture.moveBy(const Offset(120, 0));
|
||||||
|
await tester.pump();
|
||||||
|
expect(
|
||||||
|
tester.getSize(find.byKey(const Key('home-feed-progress-thumb'))),
|
||||||
|
const Size(10, 10),
|
||||||
|
);
|
||||||
|
await gesture.up();
|
||||||
await tester.pumpAndSettle();
|
await tester.pumpAndSettle();
|
||||||
expect(seeked, isNotNull);
|
expect(seeked, isNotNull);
|
||||||
expect(seeked!.inSeconds, greaterThan(0));
|
expect(seeked!.inSeconds, greaterThan(0));
|
||||||
|
expect(
|
||||||
|
tester.getSize(find.byKey(const Key('home-feed-progress-thumb'))),
|
||||||
|
const Size(6, 6),
|
||||||
|
);
|
||||||
|
|
||||||
await tester.tap(find.byKey(const Key('home-feed-full-series')));
|
await tester.tap(find.byKey(const Key('home-feed-full-series')));
|
||||||
await tester.pump();
|
await tester.pump();
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
// Author: fruit.com.cn
|
// Author: fruit.com.cn
|
||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/services.dart';
|
||||||
import 'package:flutter_test/flutter_test.dart';
|
import 'package:flutter_test/flutter_test.dart';
|
||||||
import 'package:fruitshorts/app.dart';
|
import 'package:fruitshorts/app.dart';
|
||||||
import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
|
import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
|
||||||
@@ -70,8 +71,10 @@ void main() {
|
|||||||
expect(find.byKey(const Key('home-feed-fullscreen')), findsNothing);
|
expect(find.byKey(const Key('home-feed-fullscreen')), findsNothing);
|
||||||
expect(
|
expect(
|
||||||
tester.widget<Scaffold>(find.byType(Scaffold).first).backgroundColor,
|
tester.widget<Scaffold>(find.byType(Scaffold).first).backgroundColor,
|
||||||
Colors.black,
|
Colors.transparent,
|
||||||
);
|
);
|
||||||
|
expect(find.byKey(const Key('home-page-gradient')), findsNothing);
|
||||||
|
expect(_hasLightStatusBar(tester), isTrue);
|
||||||
expect(tester.widget<PlayerPage>(find.byType(PlayerPage)).homeMode, isTrue);
|
expect(tester.widget<PlayerPage>(find.byType(PlayerPage)).homeMode, isTrue);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -93,6 +96,19 @@ void main() {
|
|||||||
expect(find.text('Coming soon'), findsOneWidget);
|
expect(find.text('Coming soon'), findsOneWidget);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('should_restore_light_theme_after_leaving_feed_tab', (
|
||||||
|
tester,
|
||||||
|
) async {
|
||||||
|
await _pumpApp(tester);
|
||||||
|
expect(_hasLightStatusBar(tester), isTrue);
|
||||||
|
|
||||||
|
await tester.tap(find.byKey(const Key('tab-theater')));
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
|
||||||
|
expect(find.byKey(const Key('home-page-gradient')), findsOneWidget);
|
||||||
|
expect(_hasLightStatusBar(tester), isFalse);
|
||||||
|
});
|
||||||
|
|
||||||
testWidgets('should_switch_feed_drama_when_swiped_up', (tester) async {
|
testWidgets('should_switch_feed_drama_when_swiped_up', (tester) async {
|
||||||
await _pumpApp(tester);
|
await _pumpApp(tester);
|
||||||
final before = tester
|
final before = tester
|
||||||
@@ -108,6 +124,28 @@ void main() {
|
|||||||
expect(after, isNot(before));
|
expect(after, isNot(before));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('should_resume_feed_after_returning_from_full_player', (
|
||||||
|
tester,
|
||||||
|
) async {
|
||||||
|
await _pumpApp(tester);
|
||||||
|
await tester.tap(find.byKey(const Key('home-feed-video-toggle')));
|
||||||
|
await tester.pump();
|
||||||
|
expect(find.byKey(const Key('home-feed-center-play')), findsOneWidget);
|
||||||
|
|
||||||
|
await tester.tap(find.byKey(const Key('home-feed-full-series')));
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
expect(
|
||||||
|
tester.widget<PlayerPage>(find.byType(PlayerPage).last).homeMode,
|
||||||
|
isFalse,
|
||||||
|
);
|
||||||
|
|
||||||
|
await tester.tap(find.byKey(const Key('player-back')));
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
|
||||||
|
expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
|
||||||
|
expect(find.byKey(const Key('home-feed-center-play')), findsNothing);
|
||||||
|
});
|
||||||
|
|
||||||
testWidgets('should_hide_feed_when_switching_to_theater', (tester) async {
|
testWidgets('should_hide_feed_when_switching_to_theater', (tester) async {
|
||||||
await _pumpApp(tester);
|
await _pumpApp(tester);
|
||||||
expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
|
expect(find.byKey(const Key('home-feed-title')), findsOneWidget);
|
||||||
@@ -196,6 +234,12 @@ const _tabKeys = [
|
|||||||
Key('tab-mine'),
|
Key('tab-mine'),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
bool _hasLightStatusBar(WidgetTester tester) => tester
|
||||||
|
.widgetList<AnnotatedRegion<SystemUiOverlayStyle>>(
|
||||||
|
find.byType(AnnotatedRegion<SystemUiOverlayStyle>),
|
||||||
|
)
|
||||||
|
.any((region) => region.value.statusBarIconBrightness == Brightness.light);
|
||||||
|
|
||||||
Future<void> _pumpApp(
|
Future<void> _pumpApp(
|
||||||
WidgetTester tester, {
|
WidgetTester tester, {
|
||||||
Size size = const Size(390, 844),
|
Size size = const Size(390, 844),
|
||||||
|
|||||||
Reference in new issue
Block a user