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

现阶段基础播放能力已经实现，接下来将尽全力往UI方向再调整一下

Browse Source
This commit is contained in:
lxh2875931338
2026-08-17 23:10:24 +08:00
parent 725116760a
commit 7566700bed
3 changed files with 75 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pages/player_page.dart
+39 -37
View File
@@ -11,17 +11,8 @@ class PlayerPage extends StatefulWidget {
}
class _PlayerPageState extends State<PlayerPage> {
// ✅ 使用 late，但不赋值，在 didChangeDependencies 中初始化
late AudioService _audioService;
@override
void didChangeDependencies() {
super.didChangeDependencies();
// ✅ 只在第一次或 service 变化时赋值
_audioService = context.watch<AudioService>();
}
String _formatDuration(Duration d) {
if (d.inMilliseconds < 0) return '00:00';
final minutes = d.inMinutes;
final seconds = d.inSeconds % 60;
return '${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}';
@@ -29,7 +20,6 @@ class _PlayerPageState extends State<PlayerPage> {
@override
Widget build(BuildContext context) {
// ✅ 使用 watch 实时获取状态
final service = context.watch<AudioService>();
final song = service.currentSong;
@@ -45,9 +35,9 @@ class _PlayerPageState extends State<PlayerPage> {
);
}
final isPlaying = service.isPlaying;
final position = service.position;
final duration = service.duration;
final isPlaying = service.isPlaying;
final progress = duration.inMilliseconds > 0
? position.inMilliseconds / duration.inMilliseconds
: 0.0;
@@ -61,6 +51,15 @@ class _PlayerPageState extends State<PlayerPage> {
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,
fontWeight: FontWeight.w400,
),
),
centerTitle: true,
actions: [
IconButton(
icon: const Icon(Icons.more_vert, color: Colors.white54),
@@ -73,9 +72,10 @@ class _PlayerPageState extends State<PlayerPage> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ---- 封面占位 ----
Container(
width: 280,
height: 280,
width: 240,
height: 240,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFF2A3332),
@@ -89,35 +89,43 @@ class _PlayerPageState extends State<PlayerPage> {
),
child: const Icon(
Icons.music_note,
size: 80,
size: 64,
color: Colors.white24,
),
),
const SizedBox(height: 48),
// ---- 歌曲信息 ----
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
song.title,
style: const TextStyle(
fontSize: 22,
fontSize: 20,
fontWeight: FontWeight.w600,
color: Colors.white,
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
Text(
song.artist,
style: TextStyle(
fontSize: 16,
fontSize: 15,
color: Colors.grey[400],
),
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
const SizedBox(height: 40),
// ---- 进度条 ----
Column(
children: [
Slider(
@@ -130,6 +138,8 @@ class _PlayerPageState extends State<PlayerPage> {
},
activeColor: const Color(0xFFB8D4D0),
inactiveColor: Colors.grey[800],
min: 0.0,
max: 1.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -153,19 +163,21 @@ class _PlayerPageState extends State<PlayerPage> {
],
),
const SizedBox(height: 32),
// ---- 播放控制 ----
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.skip_previous, size: 32),
icon: const Icon(Icons.skip_previous, size: 28),
color: Colors.white60,
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12),
),
const SizedBox(width: 24),
const SizedBox(width: 20),
Container(
width: 64,
height: 64,
width: 56,
height: 56,
decoration: BoxDecoration(
color: const Color(0xFFB8D4D0),
shape: BoxShape.circle,
@@ -174,7 +186,7 @@ class _PlayerPageState extends State<PlayerPage> {
icon: Icon(
isPlaying ? Icons.pause : Icons.play_arrow,
color: Colors.black87,
size: 32,
size: 28,
),
padding: EdgeInsets.zero,
onPressed: () {
@@ -182,26 +194,16 @@ class _PlayerPageState extends State<PlayerPage> {
},
),
),
const SizedBox(width: 24),
const SizedBox(width: 20),
IconButton(
onPressed: () {},
icon: const Icon(Icons.skip_next, size: 32),
icon: const Icon(Icons.skip_next, size: 28),
color: Colors.white60,
padding: const EdgeInsets.all(16),
),
],
),
const SizedBox(height: 32),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.volume_up_outlined),
color: Colors.white38,
padding: const EdgeInsets.all(12),
),
],
),
const SizedBox(height: 16),
],
),
),