fix(flutter): 首页 feed 去底色并优化整集条

This commit is contained in:
Zhou Weidong committed 2026-10-20 14:05:24 +08:00
1 parent f94926cff5
commit 636b369bd4
6 files changed
+171 -97

No files matched your search

+15 -6
View File
@@ -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) {
+6 -3
View File
@@ -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),
+43 -74
View File
@@ -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,
),
),
), ),
], ],
), ),
+24 -3
View File
@@ -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();
+45 -1
View File
@@ -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),