lxh2875931338/QingTing-Player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

现在播放页的实时效果有了

Browse Source
This commit is contained in:
lxh2875931338
2026-08-23 21:42:37 +08:00
parent d593ce05a1
commit f6eb1b108a
2 changed files with 178 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pages/player_page.dart
+153 -102
View File
@@ -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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final service = context.watch<AudioService>(); final service = context.watch<AudioService>();
@@ -75,7 +110,6 @@ class _PlayerPageState extends State<PlayerPage> {
} }
final isPlaying = service.isPlaying; final isPlaying = service.isPlaying;
final duration = service.duration;
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFF0E1211), backgroundColor: const Color(0xFF0E1211),
@@ -156,7 +190,7 @@ class _PlayerPageState extends State<PlayerPage> {
], ],
), ),
const SizedBox(height: 40), const SizedBox(height: 40),
_buildProgressSection(service, duration), _buildProgressSection(service),
const SizedBox(height: 32), const SizedBox(height: 32),
_buildControlButtons(service, isPlaying), _buildControlButtons(service, isPlaying),
const SizedBox(height: 16), const SizedBox(height: 16),
@@ -166,120 +200,137 @@ class _PlayerPageState extends State<PlayerPage> {
); );
} }
Widget _buildProgressSection(AudioService service, Duration duration) { Widget _buildProgressSection(AudioService service) {
debugPrint('🎯 [PlayerPage] duration=$duration');
return ValueListenableBuilder( return ValueListenableBuilder(
valueListenable: service.positionNotifier, valueListenable: service.positionNotifier,
builder: (context, position, _) { builder: (context, position, _) {
debugPrint('🎯 [PlayerPage] position=$position, duration=$duration'); return ValueListenableBuilder(
final progress = duration.inMilliseconds > 0 valueListenable: service.durationNotifier,
? position.inMilliseconds / duration.inMilliseconds builder: (context, duration, _) {
: 0.0; // ⭐ 如果 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 final progress = duration.inMilliseconds > 0
? (service.bufferedNotifier.value.inMilliseconds / ? position.inMilliseconds / duration.inMilliseconds
duration.inMilliseconds) : 0.0;
.clamp(0.0, 1.0)
: 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( final displayProgress = _dragProgress ?? progress;
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( return Column(
alignment: Alignment.centerLeft, children: [
children: [ SizedBox(
Container( height: 20,
width: width, child: LayoutBuilder(
height: 4, builder: (context, constraints) {
decoration: BoxDecoration( final width = constraints.maxWidth;
color: Colors.grey[800], final bufferWidth =
borderRadius: BorderRadius.circular(2), width * bufferProgress.clamp(0.0, 1.0);
), final progressWidth =
), width * displayProgress.clamp(0.0, 1.0);
Container(
width: bufferWidth, return Stack(
height: 4, alignment: Alignment.centerLeft,
decoration: BoxDecoration( children: [
color: const Color(0xFF4A7A7A), Container(
borderRadius: BorderRadius.circular(2), width: width,
), height: 4,
), decoration: BoxDecoration(
Container( color: Colors.grey[800],
width: progressWidth, borderRadius: BorderRadius.circular(2),
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( Container(
value: displayProgress.clamp(0.0, 1.0), width: bufferWidth,
min: 0.0, height: 4,
max: 1.0, decoration: BoxDecoration(
onChanged: (value) { color: const Color(0xFF4A7A7A),
setState(() { borderRadius: BorderRadius.circular(2),
_dragProgress = value; ),
});
},
onChangeEnd: (value) {
final newPosition = Duration(
milliseconds:
(value * duration.inMilliseconds).round(),
);
service.seekTo(newPosition);
setState(() {
_dragProgress = null;
});
},
), ),
), Container(
), width: progressWidth,
], height: 4,
); decoration: BoxDecoration(
}, color: const Color(0xFFB8D4D0),
), borderRadius: BorderRadius.circular(2),
), ),
Row( ),
mainAxisAlignment: MainAxisAlignment.spaceBetween, Positioned.fill(
children: [ child: SliderTheme(
Text( data: SliderTheme.of(context).copyWith(
_formatDuration(position), trackHeight: 0,
style: TextStyle( activeTrackColor: Colors.transparent,
fontSize: 12, inactiveTrackColor: Colors.transparent,
color: Colors.grey[500], 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( Row(
_formatDuration(duration), mainAxisAlignment: MainAxisAlignment.spaceBetween,
style: TextStyle( children: [
fontSize: 12, Text(
color: Colors.grey[500], _formatDuration(position),
), style: TextStyle(
fontSize: 12,
color: Colors.grey[500],
),
),
Text(
_formatDuration(duration),
style: TextStyle(
fontSize: 12,
color: Colors.grey[500],
),
),
],
), ),
], ],
), );
], },
); );
}, },
); );
lib/services/audio_service.dart
+25 -40
View File
@@ -130,9 +130,6 @@ class AudioService extends ChangeNotifier {
} }
} }
// ============================================================
// 核心播放逻辑
// ============================================================
void _playCurrent() { void _playCurrent() {
if (_currentIndex < 0 || _currentIndex >= _queue.length) { if (_currentIndex < 0 || _currentIndex >= _queue.length) {
stopPlay(); stopPlay();
@@ -142,9 +139,6 @@ class AudioService extends ChangeNotifier {
final song = _queue[_currentIndex]; final song = _queue[_currentIndex];
_currentSong = song; _currentSong = song;
// ⭐ 不重置任何 Notifier，完全依赖 stream 推送
// position / duration / buffered 由播放器自然更新
_startListening(); _startListening();
notifyListeners(); notifyListeners();
@@ -154,15 +148,12 @@ class AudioService extends ChangeNotifier {
PlaybackService().play(song.url!); PlaybackService().play(song.url!);
// ⭐ 兜底：主动同步一次播放器状态（解决首次加载时 stream 未推送的问题） // ⭐ 延迟同步兜底
_syncPlayerStateDelayed(); _syncPlayerStateDelayed();
_loadMetadataForCurrentSong(); _loadMetadataForCurrentSong();
} }
// ============================================================
// Metadata 加载
// ============================================================
Future<void> _loadMetadataForCurrentSong() async { Future<void> _loadMetadataForCurrentSong() async {
if (_currentIndex < 0 || _currentIndex >= _queue.length) return; if (_currentIndex < 0 || _currentIndex >= _queue.length) return;
final song = _queue[_currentIndex]; final song = _queue[_currentIndex];
@@ -192,9 +183,6 @@ class AudioService extends ChangeNotifier {
} }
} }
// ============================================================
// 播放控制
// ============================================================
void next() { void next() {
if (_queue.isEmpty) return; if (_queue.isEmpty) return;
@@ -271,38 +259,39 @@ class AudioService extends ChangeNotifier {
notifyListeners(); notifyListeners();
} }
// ============================================================ // ⭐ 公开方法：供 PlayerPage 主动同步
// 播放器状态同步（兜底机制） void syncPlayerStateNow() {
// ============================================================
void _syncPlayerStateDelayed() {
_syncPlayerStateNow();
Future.delayed(const Duration(milliseconds: 200), () {
_syncPlayerStateNow();
});
Future.delayed(const Duration(milliseconds: 500), () {
_syncPlayerStateNow();
});
}
void _syncPlayerStateNow() {
final player = PlaybackService().player; final player = PlaybackService().player;
final pos = player.state.position;
final dur = player.state.duration; final dur = player.state.duration;
final buf = player.state.buffer; final buf = player.state.buffer;
if (dur.inMilliseconds > 0 && durationNotifier.value.inMilliseconds == 0) { debugPrint(
durationNotifier.value = dur; '🎯 [AudioService] syncPlayerStateNow: pos=$pos, dur=$dur, buf=$buf');
debugPrint('🎯 [AudioService] sync duration: $dur');
}
if (buf.inMilliseconds > 0 && bufferedNotifier.value.inMilliseconds == 0) { // ⭐ 无条件更新（不要只判断 == 0）
if (pos.inMilliseconds >= 0) {
positionNotifier.value = pos;
}
if (dur.inMilliseconds > 0) {
durationNotifier.value = dur;
}
if (buf.inMilliseconds >= 0) {
bufferedNotifier.value = buf; bufferedNotifier.value = buf;
debugPrint('🎯 [AudioService] sync buffer: $buf');
} }
} }
// ============================================================ void _syncPlayerStateDelayed() {
// media_kit 状态监听 syncPlayerStateNow();
// ============================================================ Future.delayed(const Duration(milliseconds: 200), () {
syncPlayerStateNow();
});
Future.delayed(const Duration(milliseconds: 500), () {
syncPlayerStateNow();
});
}
// ---- 监听 ----
void _startListening() { void _startListening() {
if (_listening) return; if (_listening) return;
_listening = true; _listening = true;
@@ -327,7 +316,6 @@ class AudioService extends ChangeNotifier {
_subscriptions.add( _subscriptions.add(
player.stream.duration.listen((duration) { player.stream.duration.listen((duration) {
debugPrint('🎯 [AudioService] durationStream: $duration'); debugPrint('🎯 [AudioService] durationStream: $duration');
// 只接受 > 0 的值，避免 0 覆盖正确值
if (duration.inMilliseconds > 0) { if (duration.inMilliseconds > 0) {
durationNotifier.value = duration; durationNotifier.value = duration;
} }
@@ -355,9 +343,6 @@ class AudioService extends ChangeNotifier {
_subscriptions.clear(); _subscriptions.clear();
} }
// ============================================================
// 播放完成处理
// ============================================================
void _onPlaybackCompleted() { void _onPlaybackCompleted() {
if (_handlingCompletion) { if (_handlingCompletion) {
debugPrint('⚠️ [service] completed ignored: already handling'); debugPrint('⚠️ [service] completed ignored: already handling');