jianghaifeng/ReelShort
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(flutter): 修复详情与播放器底部闪白

Browse Source
This commit is contained in:
Zhou Weidong committed 2026-10-20 19:04:25 +08:00
1 parent 9eec9ed77a
commit 0aa5a99a22
8 files changed
+201 -92
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/app.dart
+11 -5
View File
@@ -50,6 +50,16 @@ import 'core/theme/app_colors.dart';
import 'l10n/app_localizations.dart';
import 'pages/home/home_view.dart';
/// 全局系统栏样式：浅暖导航栏、关闭 Android 对比遮罩。
final SystemUiOverlayStyle appSystemOverlayStyle = SystemUiOverlayStyle.dark
.copyWith(
statusBarColor: Colors.transparent,
systemNavigationBarColor: AppColors.ink,
systemNavigationBarDividerColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarContrastEnforced: false,
);
class LumaDramaApp extends StatefulWidget {
const LumaDramaApp({
super.key,
@@ -263,11 +273,7 @@ class _LumaDramaAppState extends State<LumaDramaApp> {
theme: AppTheme.light(),
darkTheme: AppTheme.light(),
builder: (context, child) => AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.transparent,
systemNavigationBarColor: AppColors.bar,
systemNavigationBarIconBrightness: Brightness.dark,
),
value: appSystemOverlayStyle,
child: child ?? const SizedBox.shrink(),
),
home: const HomePage(),
lib/core/theme/app_theme.dart
+5
View File
@@ -107,6 +107,11 @@ abstract final class AppTheme {
side: BorderSide(color: AppColors.border),
),
),
bottomSheetTheme: const BottomSheetThemeData(
backgroundColor: Colors.transparent,
modalBackgroundColor: Colors.transparent,
surfaceTintColor: Colors.transparent,
),
switchTheme: SwitchThemeData(
thumbColor: WidgetStateProperty.resolveWith(
(states) => states.contains(WidgetState.selected)
lib/pages/drama_detail/drama_detail_view.dart
+16 -5
View File
@@ -3,6 +3,7 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import '../../core/data/models/drama.dart';
@@ -83,11 +84,21 @@ class _DramaDetailPageState extends State<DramaDetailPage> {
@override
Widget build(BuildContext context) {
return Theme(
data: AppTheme.light(),
child: ListenableBuilder(
listenable: logic,
builder: (context, _) => _page(context),
return AnnotatedRegion<SystemUiOverlayStyle>(
key: const Key('detail-system-overlay'),
value: SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.transparent,
systemNavigationBarColor: AppColors.ink,
systemNavigationBarDividerColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarContrastEnforced: false,
),
child: Theme(
data: AppTheme.light(),
child: ListenableBuilder(
listenable: logic,
builder: (context, _) => _page(context),
),
),
);
}
lib/pages/player/player_view.dart
+8 -1
View File
@@ -238,7 +238,14 @@ class _PlayerPageState extends State<PlayerPage> with WidgetsBindingObserver {
],
);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.dark,
key: const Key('player-system-overlay'),
value: SystemUiOverlayStyle.light.copyWith(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.black,
systemNavigationBarDividerColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light,
systemNavigationBarContrastEnforced: false,
),
child: Theme(
data: AppTheme.light(),
child: widget.embedded
lib/pages/player/widgets/episode_picker_sheet.dart
+95 -81
View File
@@ -1,6 +1,7 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../../../core/data/models/drama.dart';
import '../../../core/formatting/localized_content.dart';
@@ -37,93 +38,106 @@ class EpisodePickerSheet extends StatelessWidget {
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final episodes = drama.episodes;
return Container(
key: const Key('player-episodes-sheet'),
height: MediaQuery.sizeOf(context).height * _sheetHeightFactor,
decoration: const BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.vertical(top: Radius.circular(_sheetRadius)),
return AnnotatedRegion<SystemUiOverlayStyle>(
key: const Key('player-episodes-system-overlay'),
value: SystemUiOverlayStyle.dark.copyWith(
statusBarColor: Colors.transparent,
systemNavigationBarColor: AppColors.card,
systemNavigationBarDividerColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.dark,
systemNavigationBarContrastEnforced: false,
),
child: SafeArea(
top: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 14, 8, 4),
child: Row(
children: [
Expanded(
child: Text(
l10n.episodes,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 20,
fontWeight: FontWeight.w800,
child: Container(
key: const Key('player-episodes-sheet'),
height: MediaQuery.sizeOf(context).height * _sheetHeightFactor,
decoration: const BoxDecoration(
color: AppColors.card,
borderRadius: BorderRadius.vertical(
top: Radius.circular(_sheetRadius),
),
),
child: SafeArea(
top: false,
bottom: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 14, 8, 4),
child: Row(
children: [
Expanded(
child: Text(
l10n.episodes,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 20,
fontWeight: FontWeight.w800,
),
),
),
),
IconButton(
key: const Key('player-episodes-close'),
tooltip: l10n.close,
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.close_rounded),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
child: Row(
children: [
Expanded(
child: Text(
localizedDramaTitle(l10n, drama),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 14,
fontWeight: FontWeight.w600,
),
IconButton(
key: const Key('player-episodes-close'),
tooltip: l10n.close,
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.close_rounded),
),
),
Text(
l10n.episodeCountLabel(episodes.length),
style: const TextStyle(
color: AppColors.muted,
fontSize: 12,
),
),
],
),
),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: _columns,
mainAxisSpacing: AppDimens.spaceSm,
crossAxisSpacing: AppDimens.spaceSm,
childAspectRatio: _cellAspect,
],
),
itemCount: episodes.length,
itemBuilder: (context, index) {
final episode = episodes[index];
return EpisodePickerCell(
key: Key('player-episode-${episode.number}'),
episode: episode,
selected: episode.number == currentNumber,
lockLabel: l10n.locked,
onTap: () {
Navigator.pop(context);
onSelect(index);
},
);
},
),
),
],
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 12),
child: Row(
children: [
Expanded(
child: Text(
localizedDramaTitle(l10n, drama),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppColors.onSurface,
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
),
Text(
l10n.episodeCountLabel(episodes.length),
style: const TextStyle(
color: AppColors.muted,
fontSize: 12,
),
),
],
),
),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: _columns,
mainAxisSpacing: AppDimens.spaceSm,
crossAxisSpacing: AppDimens.spaceSm,
childAspectRatio: _cellAspect,
),
itemCount: episodes.length,
itemBuilder: (context, index) {
final episode = episodes[index];
return EpisodePickerCell(
key: Key('player-episode-${episode.number}'),
episode: episode,
selected: episode.number == currentNumber,
lockLabel: l10n.locked,
onTap: () {
Navigator.pop(context);
onSelect(index);
},
);
},
),
),
],
),
),
),
);
test/drama_detail/drama_detail_view_test.dart
+10
View File
@@ -1,6 +1,7 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
@@ -53,6 +54,11 @@ void main() {
) async {
await _pumpDetail(tester);
final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
find.byKey(const Key('detail-system-overlay')),
);
expect(overlay.value.systemNavigationBarColor, AppColors.ink);
expect(overlay.value.systemNavigationBarContrastEnforced, isFalse);
expect(find.byKey(const Key('detail-hero')), findsOneWidget);
expect(
tester.getSize(find.byKey(const Key('detail-poster'))),
@@ -92,6 +98,10 @@ void main() {
expect(find.byKey(const Key('detail-tags')), findsOneWidget);
expect(find.byKey(const Key('detail-episodes-section')), findsOneWidget);
expect(tester.getSize(find.byKey(const Key('detail-cta'))).height, 46);
final bottomBar = tester.widget<Container>(
find.byKey(const Key('detail-bottom-bar')),
);
expect((bottomBar.decoration! as BoxDecoration).color, AppColors.ink);
expect(find.byKey(const Key('detail-share')), findsOneWidget);
expect(find.byKey(const Key('detail-more')), findsOneWidget);
for (final key in const [Key('detail-share'), Key('detail-more')]) {
test/player/player_fullscreen_test.dart
+35
View File
@@ -1,6 +1,7 @@
// Author: fruit.com.cn
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
@@ -50,6 +51,16 @@ void main() {
expect(tester.takeException(), isNull);
});
testWidgets('should_use_black_system_navigation_bar_on_feed_and_player', (
tester,
) async {
await _pumpApp(tester);
_expectPlayerNavigationBar(tester);
await _openSeriesPlayer(tester);
_expectPlayerNavigationBar(tester);
});
testWidgets('should_fall_back_to_black_when_poster_is_empty', (tester) async {
await _pumpApp(
tester,
@@ -716,6 +727,20 @@ void main() {
final delegate =
grid.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 6);
final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
find.byKey(const Key('player-episodes-system-overlay')),
);
expect(overlay.value.systemNavigationBarColor, AppColors.card);
expect(overlay.value.systemNavigationBarContrastEnforced, isFalse);
final safeArea = tester.widget<SafeArea>(
find
.descendant(
of: find.byKey(const Key('player-episodes-sheet')),
matching: find.byType(SafeArea),
)
.first,
);
expect(safeArea.bottom, isTrue);
expect(tester.takeException(), isNull);
});
@@ -969,6 +994,16 @@ void main() {
});
}
void _expectPlayerNavigationBar(WidgetTester tester) {
final overlay = tester.widget<AnnotatedRegion<SystemUiOverlayStyle>>(
find.byKey(const Key('player-system-overlay')).last,
);
expect(overlay.value.systemNavigationBarColor, Colors.black);
expect(overlay.value.systemNavigationBarDividerColor, Colors.transparent);
expect(overlay.value.systemNavigationBarContrastEnforced, isFalse);
expect(overlay.value.systemNavigationBarIconBrightness, Brightness.light);
}
void _expectFullscreenOverlay(WidgetTester tester) {
expect(find.byKey(const Key('player-back')), findsOneWidget);
expect(find.byKey(const Key('player-episode-heading')), findsOneWidget);
test/theme/app_theme_test.dart
+21
View File
@@ -2,8 +2,10 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:fruitshorts/app.dart';
import 'package:fruitshorts/core/theme/app_colors.dart';
import 'package:fruitshorts/core/theme/app_theme.dart';
@@ -50,6 +52,25 @@ void main() {
expect(theme.appBarTheme.systemOverlayStyle, SystemUiOverlayStyle.dark);
});
test('should_use_ink_navigation_bar_without_contrast_scrim', () {
expect(appSystemOverlayStyle.statusBarColor, Colors.transparent);
expect(appSystemOverlayStyle.systemNavigationBarColor, AppColors.ink);
expect(
appSystemOverlayStyle.systemNavigationBarDividerColor,
Colors.transparent,
);
expect(
appSystemOverlayStyle.systemNavigationBarIconBrightness,
Brightness.dark,
);
expect(appSystemOverlayStyle.systemNavigationBarContrastEnforced, isFalse);
final sheetTheme = AppTheme.light().bottomSheetTheme;
expect(sheetTheme.backgroundColor, Colors.transparent);
expect(sheetTheme.modalBackgroundColor, Colors.transparent);
expect(sheetTheme.surfaceTintColor, Colors.transparent);
});
test('should_expose_page_gradient_and_soft_card_shadow', () {
expect(AppTheme.pageGradient.colors, [AppColors.surfaceTop, AppColors.ink]);
expect(AppTheme.cardShadow.color, AppColors.cardShadow);