权限配置暂时到此，后台播放问题并入生命周期管理同步开发
This commit is contained in:
+214
-195
@@ -1,10 +1,17 @@
|
||||
// lib/pages/player_page.dart
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../services/audio_service.dart';
|
||||
import '../main.dart';
|
||||
|
||||
class PlayerPage extends StatefulWidget {
|
||||
const PlayerPage({super.key});
|
||||
final VoidCallback? onClose;
|
||||
final VoidCallback? onOpenPlaylist;
|
||||
|
||||
const PlayerPage({
|
||||
super.key,
|
||||
this.onClose,
|
||||
this.onOpenPlaylist,
|
||||
});
|
||||
|
||||
@override
|
||||
State<PlayerPage> createState() => _PlayerPageState();
|
||||
@@ -20,6 +27,22 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
return '${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}';
|
||||
}
|
||||
|
||||
void _closePage() {
|
||||
if (widget.onClose != null) {
|
||||
widget.onClose!();
|
||||
} else {
|
||||
Navigator.pop(context);
|
||||
}
|
||||
}
|
||||
|
||||
void _openPlaylist() {
|
||||
if (widget.onOpenPlaylist != null) {
|
||||
widget.onOpenPlaylist!();
|
||||
} else {
|
||||
Navigator.pushNamed(context, '/playlist');
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final service = context.watch<AudioService>();
|
||||
@@ -28,33 +51,22 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
if (song == null) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFF0E1211),
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
),
|
||||
title: const Text(
|
||||
'正在播放',
|
||||
style: TextStyle(color: Colors.white, fontSize: 16),
|
||||
),
|
||||
centerTitle: true,
|
||||
),
|
||||
body: const Center(
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.music_off, size: 64, color: Colors.grey),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
const Text(
|
||||
'没有正在播放的歌曲',
|
||||
style: TextStyle(color: Colors.grey),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
'请先在首页点击一首歌曲',
|
||||
style: TextStyle(color: Colors.grey, fontSize: 12),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: _closePage,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFFB8D4D0),
|
||||
foregroundColor: Colors.black87,
|
||||
),
|
||||
child: const Text('返回'),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -63,20 +75,7 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
}
|
||||
|
||||
final isPlaying = service.isPlaying;
|
||||
final position = service.position;
|
||||
final duration = service.duration;
|
||||
final bufferedPosition = service.bufferedPosition;
|
||||
|
||||
final progress = duration.inMilliseconds > 0
|
||||
? position.inMilliseconds / duration.inMilliseconds
|
||||
: 0.0;
|
||||
|
||||
final bufferProgress = duration.inMilliseconds > 0
|
||||
? (bufferedPosition.inMilliseconds / duration.inMilliseconds)
|
||||
.clamp(0.0, 1.0)
|
||||
: 0.0;
|
||||
|
||||
final displayProgress = _dragProgress ?? progress;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFF0E1211),
|
||||
@@ -85,7 +84,7 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
elevation: 0,
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back_ios_new, color: Colors.white),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
onPressed: _closePage,
|
||||
),
|
||||
title: const Text(
|
||||
'正在播放',
|
||||
@@ -157,169 +156,189 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 40),
|
||||
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),
|
||||
),
|
||||
),
|
||||
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,
|
||||
),
|
||||
),
|
||||
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;
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
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],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
_buildProgressSection(service, duration),
|
||||
const SizedBox(height: 32),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: service.togglePlayMode,
|
||||
icon: Icon(
|
||||
service.playModeIcon,
|
||||
color: const Color(0xFFB8D4D0),
|
||||
size: 22,
|
||||
),
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
IconButton(
|
||||
onPressed: service.hasQueue ? service.previous : null,
|
||||
icon: const Icon(Icons.skip_previous, size: 28),
|
||||
color: service.hasQueue ? Colors.white60 : Colors.grey[600],
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFB8D4D0),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
isPlaying ? Icons.pause : Icons.play_arrow,
|
||||
color: Colors.black87,
|
||||
size: 28,
|
||||
),
|
||||
padding: EdgeInsets.zero,
|
||||
onPressed: service.togglePlay,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
IconButton(
|
||||
onPressed: service.hasQueue ? service.next : null,
|
||||
icon: const Icon(Icons.skip_next, size: 28),
|
||||
color: service.hasQueue ? Colors.white60 : Colors.grey[600],
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
navigatorKey.currentState?.pushNamed('/playlist');
|
||||
},
|
||||
icon: const Icon(
|
||||
Icons.playlist_play_outlined,
|
||||
color: Color(0xFFB8D4D0),
|
||||
size: 26,
|
||||
),
|
||||
padding: const EdgeInsets.all(8),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
],
|
||||
),
|
||||
_buildControlButtons(service, isPlaying),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildProgressSection(AudioService service, Duration duration) {
|
||||
return ValueListenableBuilder(
|
||||
valueListenable: service.positionNotifier,
|
||||
builder: (context, position, _) {
|
||||
final progress = duration.inMilliseconds > 0
|
||||
? position.inMilliseconds / duration.inMilliseconds
|
||||
: 0.0;
|
||||
|
||||
final bufferProgress = duration.inMilliseconds > 0
|
||||
? (service.bufferedNotifier.value.inMilliseconds /
|
||||
duration.inMilliseconds)
|
||||
.clamp(0.0, 1.0)
|
||||
: 0.0;
|
||||
|
||||
final displayProgress = _dragProgress ?? progress;
|
||||
|
||||
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),
|
||||
),
|
||||
),
|
||||
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,
|
||||
),
|
||||
),
|
||||
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;
|
||||
});
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
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],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildControlButtons(AudioService service, bool isPlaying) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
IconButton(
|
||||
onPressed: service.togglePlayMode,
|
||||
icon: Icon(
|
||||
service.playModeIcon,
|
||||
color: const Color(0xFFB8D4D0),
|
||||
size: 22,
|
||||
),
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
IconButton(
|
||||
onPressed: service.hasQueue ? service.previous : null,
|
||||
icon: const Icon(Icons.skip_previous, size: 28),
|
||||
color: service.hasQueue ? Colors.white60 : Colors.grey[600],
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
Container(
|
||||
width: 56,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFB8D4D0),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
isPlaying ? Icons.pause : Icons.play_arrow,
|
||||
color: Colors.black87,
|
||||
size: 28,
|
||||
),
|
||||
padding: EdgeInsets.zero,
|
||||
onPressed: service.togglePlay,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
IconButton(
|
||||
onPressed: service.hasQueue ? service.next : null,
|
||||
icon: const Icon(Icons.skip_next, size: 28),
|
||||
color: service.hasQueue ? Colors.white60 : Colors.grey[600],
|
||||
padding: const EdgeInsets.all(12),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: _openPlaylist,
|
||||
icon: const Icon(
|
||||
Icons.playlist_play_outlined,
|
||||
color: Color(0xFFB8D4D0),
|
||||
size: 26,
|
||||
),
|
||||
padding: const EdgeInsets.all(8),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user