现在播放页的实时效果有了
This commit is contained in:
+153
-102
@@ -43,6 +43,41 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// ⭐ 页面加载时主动拉取状态（多次重试）
|
||||
_syncStateWithRetry();
|
||||
}
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
// ⭐ 依赖变化时（如从后台返回）重新同步
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted) {
|
||||
context.read<AudioService>().syncPlayerStateNow();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void _syncStateWithRetry() {
|
||||
final service = context.read<AudioService>();
|
||||
|
||||
// 立即同步
|
||||
service.syncPlayerStateNow();
|
||||
|
||||
// 延迟重试
|
||||
const delays = [200, 500, 800, 1200];
|
||||
for (final delay in delays) {
|
||||
Future.delayed(Duration(milliseconds: delay), () {
|
||||
if (mounted) {
|
||||
service.syncPlayerStateNow();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final service = context.watch<AudioService>();
|
||||
@@ -75,7 +110,6 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
}
|
||||
|
||||
final isPlaying = service.isPlaying;
|
||||
final duration = service.duration;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFF0E1211),
|
||||
@@ -156,7 +190,7 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 40),
|
||||
_buildProgressSection(service, duration),
|
||||
_buildProgressSection(service),
|
||||
const SizedBox(height: 32),
|
||||
_buildControlButtons(service, isPlaying),
|
||||
const SizedBox(height: 16),
|
||||
@@ -166,120 +200,137 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildProgressSection(AudioService service, Duration duration) {
|
||||
debugPrint('🎯 [PlayerPage] duration=$duration');
|
||||
Widget _buildProgressSection(AudioService service) {
|
||||
return ValueListenableBuilder(
|
||||
valueListenable: service.positionNotifier,
|
||||
builder: (context, position, _) {
|
||||
debugPrint('🎯 [PlayerPage] position=$position, duration=$duration');
|
||||
final progress = duration.inMilliseconds > 0
|
||||
? position.inMilliseconds / duration.inMilliseconds
|
||||
: 0.0;
|
||||
return ValueListenableBuilder(
|
||||
valueListenable: service.durationNotifier,
|
||||
builder: (context, duration, _) {
|
||||
// ⭐ 如果 duration 为 0，显示加载指示器
|
||||
if (duration.inMilliseconds == 0) {
|
||||
return const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 8),
|
||||
child: LinearProgressIndicator(
|
||||
color: Color(0xFFB8D4D0),
|
||||
backgroundColor: Color(0xFF2A3332),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final bufferProgress = duration.inMilliseconds > 0
|
||||
? (service.bufferedNotifier.value.inMilliseconds /
|
||||
duration.inMilliseconds)
|
||||
.clamp(0.0, 1.0)
|
||||
: 0.0;
|
||||
final progress = duration.inMilliseconds > 0
|
||||
? position.inMilliseconds / duration.inMilliseconds
|
||||
: 0.0;
|
||||
|
||||
final displayProgress = _dragProgress ?? progress;
|
||||
final bufferProgress = duration.inMilliseconds > 0
|
||||
? (service.bufferedNotifier.value.inMilliseconds /
|
||||
duration.inMilliseconds)
|
||||
.clamp(0.0, 1.0)
|
||||
: 0.0;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 20,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final width = constraints.maxWidth;
|
||||
final bufferWidth = width * bufferProgress.clamp(0.0, 1.0);
|
||||
final progressWidth = width * displayProgress.clamp(0.0, 1.0);
|
||||
final displayProgress = _dragProgress ?? progress;
|
||||
|
||||
return Stack(
|
||||
alignment: Alignment.centerLeft,
|
||||
children: [
|
||||
Container(
|
||||
width: width,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[800],
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: bufferWidth,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF4A7A7A),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: progressWidth,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFB8D4D0),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
Positioned.fill(
|
||||
child: SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
trackHeight: 0,
|
||||
activeTrackColor: Colors.transparent,
|
||||
inactiveTrackColor: Colors.transparent,
|
||||
thumbColor: Colors.transparent,
|
||||
overlayColor: Colors.transparent,
|
||||
thumbShape: const RoundSliderThumbShape(
|
||||
enabledThumbRadius: 0,
|
||||
return Column(
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 20,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final width = constraints.maxWidth;
|
||||
final bufferWidth =
|
||||
width * bufferProgress.clamp(0.0, 1.0);
|
||||
final progressWidth =
|
||||
width * displayProgress.clamp(0.0, 1.0);
|
||||
|
||||
return Stack(
|
||||
alignment: Alignment.centerLeft,
|
||||
children: [
|
||||
Container(
|
||||
width: width,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[800],
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
child: Slider(
|
||||
value: displayProgress.clamp(0.0, 1.0),
|
||||
min: 0.0,
|
||||
max: 1.0,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_dragProgress = value;
|
||||
});
|
||||
},
|
||||
onChangeEnd: (value) {
|
||||
final newPosition = Duration(
|
||||
milliseconds:
|
||||
(value * duration.inMilliseconds).round(),
|
||||
);
|
||||
service.seekTo(newPosition);
|
||||
setState(() {
|
||||
_dragProgress = null;
|
||||
});
|
||||
},
|
||||
Container(
|
||||
width: bufferWidth,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFF4A7A7A),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
_formatDuration(position),
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.grey[500],
|
||||
Container(
|
||||
width: progressWidth,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFB8D4D0),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
Positioned.fill(
|
||||
child: SliderTheme(
|
||||
data: SliderTheme.of(context).copyWith(
|
||||
trackHeight: 0,
|
||||
activeTrackColor: Colors.transparent,
|
||||
inactiveTrackColor: Colors.transparent,
|
||||
thumbColor: Colors.transparent,
|
||||
overlayColor: Colors.transparent,
|
||||
thumbShape: const RoundSliderThumbShape(
|
||||
enabledThumbRadius: 0,
|
||||
),
|
||||
),
|
||||
child: Slider(
|
||||
value: displayProgress.clamp(0.0, 1.0),
|
||||
min: 0.0,
|
||||
max: 1.0,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_dragProgress = value;
|
||||
});
|
||||
},
|
||||
onChangeEnd: (value) {
|
||||
final newPosition = Duration(
|
||||
milliseconds:
|
||||
(value * duration.inMilliseconds)
|
||||
.round(),
|
||||
);
|
||||
service.seekTo(newPosition);
|
||||
setState(() {
|
||||
_dragProgress = null;
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
Text(
|
||||
_formatDuration(duration),
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.grey[500],
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
_formatDuration(position),
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.grey[500],
|
||||
),
|
||||
),
|
||||
Text(
|
||||
_formatDuration(duration),
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.grey[500],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user