lxh2875931338
7cd1e13a82
- PageView 三页：左=文件信息，中=播放主页，右=歌词 - 顶部指示器：两点+连线，左点亮=信息页，右点亮=歌词页， 中间都暗=主页；点圆点可直接跳转 - 文件信息页：标题/歌手/专辑/文件夹/文件名/格式/路径， 优先用 DB 元数据，路径与文件名做解码 - 歌词页：占位（暂无歌词 + 歌名） 真机验证：慢速左右滑动切换正常，指示器跟随。
660 lines
20 KiB
Dart
660 lines
20 KiB
Dart
// lib/pages/player_page.dart
|
|
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import '../base/base_state.dart';
|
|
import '../database/song_database.dart';
|
|
import '../services/audio_service.dart';
|
|
|
|
class PlayerPage extends StatefulWidget {
|
|
final VoidCallback? onClose;
|
|
final VoidCallback? onOpenPlaylist;
|
|
|
|
const PlayerPage({
|
|
super.key,
|
|
this.onClose,
|
|
this.onOpenPlaylist,
|
|
});
|
|
|
|
@override
|
|
State<PlayerPage> createState() => _PlayerPageState();
|
|
}
|
|
|
|
class _PlayerPageState extends BaseState<PlayerPage> {
|
|
double? _dragProgress;
|
|
|
|
bool _isFavorite = false;
|
|
String _album = '';
|
|
String _folder = '';
|
|
String _dbTitle = '';
|
|
String _dbArtist = '';
|
|
String? _metaSongId;
|
|
|
|
/// 0 = 文件信息，1 = 播放主页，2 = 歌词
|
|
final PageController _pageController = PageController(initialPage: 1);
|
|
int _pageIndex = 1;
|
|
|
|
@override
|
|
void dispose() {
|
|
_pageController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
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')}';
|
|
}
|
|
|
|
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
|
|
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();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/// 元数据（专辑、收藏状态）只在切歌时查一次
|
|
Future<void> _loadMeta(Song song) async {
|
|
if (_metaSongId == song.id) return;
|
|
_metaSongId = song.id;
|
|
|
|
final db = SongDatabase();
|
|
String album = '';
|
|
String dbTitle = '';
|
|
String dbArtist = '';
|
|
bool favorite = false;
|
|
try {
|
|
final row = await db.getSongByPath(song.id);
|
|
album = (row?['album'] as String?)?.trim() ?? '';
|
|
dbTitle = (row?['title'] as String?)?.trim() ?? '';
|
|
dbArtist = (row?['artist'] as String?)?.trim() ?? '';
|
|
favorite = await db.isFavorite(song.id);
|
|
} catch (_) {
|
|
// 元数据只是装饰，失败忽略
|
|
}
|
|
|
|
// 上级目录名，作为没有专辑信息时的补充
|
|
String folder = '';
|
|
final segments =
|
|
song.id.split('/').where((s) => s.isNotEmpty).toList();
|
|
if (segments.length >= 2) {
|
|
try {
|
|
folder = Uri.decodeComponent(segments[segments.length - 2]);
|
|
} catch (_) {
|
|
folder = segments[segments.length - 2];
|
|
}
|
|
}
|
|
|
|
if (!mounted) return;
|
|
setState(() {
|
|
_album = album;
|
|
_folder = folder;
|
|
_dbTitle = dbTitle;
|
|
_dbArtist = dbArtist;
|
|
_isFavorite = favorite;
|
|
});
|
|
}
|
|
|
|
Future<void> _toggleFavorite(Song song) async {
|
|
try {
|
|
await SongDatabase().toggleFavorite(song.id);
|
|
final favorite = await SongDatabase().isFavorite(song.id);
|
|
if (!mounted) return;
|
|
setState(() => _isFavorite = favorite);
|
|
} catch (e) {
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(content: Text('收藏失败: $e')),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final service = context.watch<AudioService>();
|
|
final song = service.currentSong;
|
|
|
|
if (song == null) {
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFF0E1211),
|
|
body: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Text(
|
|
'没有正在播放的歌曲',
|
|
style: TextStyle(color: Colors.grey),
|
|
),
|
|
const SizedBox(height: 16),
|
|
ElevatedButton(
|
|
onPressed: _closePage,
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: const Color(0xFFB8D4D0),
|
|
foregroundColor: Colors.black87,
|
|
),
|
|
child: const Text('返回'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
_loadMeta(song);
|
|
final isPlaying = service.isPlaying;
|
|
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFF0E1211),
|
|
appBar: AppBar(
|
|
backgroundColor: Colors.transparent,
|
|
elevation: 0,
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.keyboard_arrow_down, color: Colors.white70),
|
|
onPressed: _closePage,
|
|
),
|
|
title: _buildPageIndicator(),
|
|
actions: [
|
|
PopupMenuButton<String>(
|
|
icon: const Icon(Icons.more_vert, color: Colors.white54),
|
|
onSelected: (value) async {
|
|
if (value == 'clear_cache') {
|
|
await context.read<AudioService>().clearCurrentSongCache();
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(
|
|
content: Text('缓存已清除，重新加载中...'),
|
|
backgroundColor: Colors.orange,
|
|
),
|
|
);
|
|
}
|
|
} else if (value == 'mode') {
|
|
context.read<AudioService>().togglePlayMode();
|
|
} else if (value == 'playlist') {
|
|
_openPlaylist();
|
|
}
|
|
},
|
|
itemBuilder: (context) => [
|
|
PopupMenuItem(
|
|
value: 'mode',
|
|
child: Row(
|
|
children: [
|
|
Icon(service.playModeIcon, color: const Color(0xFFB8D4D0)),
|
|
const SizedBox(width: 12),
|
|
const Text('切换播放模式'),
|
|
],
|
|
),
|
|
),
|
|
const PopupMenuItem(
|
|
value: 'playlist',
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.queue_music, color: Color(0xFFB8D4D0)),
|
|
SizedBox(width: 12),
|
|
Text('播放队列'),
|
|
],
|
|
),
|
|
),
|
|
const PopupMenuItem(
|
|
value: 'clear_cache',
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.cleaning_services, color: Colors.redAccent),
|
|
SizedBox(width: 12),
|
|
Text('清除缓存'),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
body: PageView(
|
|
controller: _pageController,
|
|
onPageChanged: (index) => setState(() => _pageIndex = index),
|
|
children: [
|
|
_buildInfoPage(song),
|
|
_buildMainPage(service, song, isPlaying),
|
|
_buildLyricsPage(song),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 顶部两点指示器：左点=信息页，右点=歌词页，中间不亮表示在主页
|
|
Widget _buildPageIndicator() {
|
|
Widget dot(int index) {
|
|
final active = _pageIndex == index;
|
|
return GestureDetector(
|
|
onTap: () => _pageController.animateToPage(
|
|
index,
|
|
duration: const Duration(milliseconds: 280),
|
|
curve: Curves.easeOutCubic,
|
|
),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
width: 7,
|
|
height: 7,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: active ? Colors.white : Colors.white24,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
dot(0),
|
|
Container(
|
|
width: 56,
|
|
height: 1,
|
|
margin: const EdgeInsets.symmetric(horizontal: 8),
|
|
color: Colors.white12,
|
|
),
|
|
dot(2),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildMainPage(AudioService service, Song song, bool isPlaying) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// ---- 封面 ----
|
|
AspectRatio(
|
|
aspectRatio: 1,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(24),
|
|
child: song.artwork != null
|
|
? Image.memory(
|
|
song.artwork!,
|
|
fit: BoxFit.cover,
|
|
gaplessPlayback: true,
|
|
)
|
|
: Container(
|
|
color: const Color(0xFF2A3332),
|
|
child: const Icon(
|
|
Icons.music_note,
|
|
size: 72,
|
|
color: Colors.white24,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 28),
|
|
|
|
// ---- 标题 / 艺术家 ----
|
|
Text(
|
|
song.title,
|
|
style: const TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.white,
|
|
height: 1.25,
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
song.artist,
|
|
style: TextStyle(fontSize: 14, color: Colors.grey[400]),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
|
|
// ---- 信息区（专辑 / 目录）----
|
|
if (_album.isNotEmpty || _folder.isNotEmpty) ...[
|
|
const SizedBox(height: 14),
|
|
if (_album.isNotEmpty)
|
|
Text(
|
|
_album,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey[500],
|
|
height: 1.5,
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
if (_folder.isNotEmpty)
|
|
Text(
|
|
'($_folder)',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey[600],
|
|
height: 1.5,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
|
|
const Spacer(),
|
|
|
|
// ---- 进度 ----
|
|
_buildProgressSection(service),
|
|
const SizedBox(height: 18),
|
|
|
|
// ---- 控制 ----
|
|
_buildControlButtons(service, song, isPlaying),
|
|
const SizedBox(height: 20),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 左页：文件信息
|
|
Widget _buildInfoPage(Song song) {
|
|
final rawName = song.id.split('/').last;
|
|
String fileName = rawName;
|
|
try {
|
|
fileName = Uri.decodeComponent(rawName);
|
|
} catch (_) {}
|
|
|
|
final dot = fileName.lastIndexOf('.');
|
|
final format =
|
|
dot > 0 ? fileName.substring(dot + 1).toUpperCase() : '未知';
|
|
|
|
String decodedPath = song.id;
|
|
try {
|
|
decodedPath = Uri.decodeComponent(song.id);
|
|
} catch (_) {}
|
|
|
|
final effectiveArtist = _dbArtist.isNotEmpty
|
|
? _dbArtist
|
|
: (song.artist.isEmpty ? '未知' : song.artist);
|
|
final effectiveTitle = _dbTitle.isNotEmpty ? _dbTitle : song.title;
|
|
|
|
final rows = <MapEntry<String, String>>[
|
|
MapEntry('标题', effectiveTitle),
|
|
MapEntry('歌手', effectiveArtist),
|
|
MapEntry('专辑', _album.isEmpty ? '未知' : _album),
|
|
MapEntry('文件夹', _folder.isEmpty ? '根目录' : _folder),
|
|
MapEntry('文件名', fileName),
|
|
MapEntry('格式', format),
|
|
MapEntry('路径', decodedPath),
|
|
];
|
|
|
|
return SingleChildScrollView(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'文件信息',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
for (final row in rows) ...[
|
|
Text(
|
|
row.key,
|
|
style: TextStyle(fontSize: 12, color: Colors.grey[600]),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
row.value,
|
|
style: const TextStyle(
|
|
fontSize: 14,
|
|
color: Colors.white,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
const SizedBox(height: 18),
|
|
],
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// 右页：歌词（占位）
|
|
Widget _buildLyricsPage(Song song) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(Icons.lyrics_outlined, size: 44, color: Colors.grey[700]),
|
|
const SizedBox(height: 14),
|
|
Text(
|
|
'暂无歌词',
|
|
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
song.title,
|
|
style: TextStyle(fontSize: 12, color: Colors.grey[700]),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildProgressSection(AudioService service) {
|
|
return ValueListenableBuilder(
|
|
valueListenable: service.positionNotifier,
|
|
builder: (context, position, _) {
|
|
return ValueListenableBuilder(
|
|
valueListenable: service.durationNotifier,
|
|
builder: (context, duration, _) {
|
|
if (duration.inMilliseconds == 0) {
|
|
return const Padding(
|
|
padding: EdgeInsets.symmetric(vertical: 8),
|
|
child: LinearProgressIndicator(
|
|
color: Color(0xFFB8D4D0),
|
|
backgroundColor: Color(0xFF2A3332),
|
|
),
|
|
);
|
|
}
|
|
|
|
final progress = position.inMilliseconds / duration.inMilliseconds;
|
|
final bufferProgress = (service
|
|
.bufferedNotifier.value.inMilliseconds /
|
|
duration.inMilliseconds)
|
|
.clamp(0.0, 1.0);
|
|
final displayProgress = _dragProgress ?? progress;
|
|
|
|
return Row(
|
|
children: [
|
|
Text(
|
|
_formatDuration(
|
|
_dragProgress != null
|
|
? Duration(
|
|
milliseconds:
|
|
(_dragProgress! * duration.inMilliseconds)
|
|
.round(),
|
|
)
|
|
: position,
|
|
),
|
|
style: TextStyle(fontSize: 12, color: Colors.grey[500]),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: SizedBox(
|
|
height: 24,
|
|
child: Stack(
|
|
alignment: Alignment.centerLeft,
|
|
children: [
|
|
Container(
|
|
height: 3,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[800],
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
FractionallySizedBox(
|
|
alignment: Alignment.centerLeft,
|
|
widthFactor: bufferProgress.clamp(0.0, 1.0),
|
|
child: Container(
|
|
height: 3,
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF4A7A7A),
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
),
|
|
FractionallySizedBox(
|
|
alignment: Alignment.centerLeft,
|
|
widthFactor: displayProgress.clamp(0.0, 1.0),
|
|
child: Container(
|
|
height: 3,
|
|
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);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Text(
|
|
_formatDuration(duration),
|
|
style: TextStyle(fontSize: 12, color: Colors.grey[500]),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildControlButtons(
|
|
AudioService service, Song song, bool isPlaying) {
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
IconButton(
|
|
onPressed: service.hasQueue ? service.previous : null,
|
|
icon: const Icon(Icons.skip_previous_rounded, size: 34),
|
|
color: service.hasQueue ? Colors.white70 : Colors.grey[700],
|
|
),
|
|
Container(
|
|
width: 68,
|
|
height: 68,
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFFB8D4D0),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
|
|
color: Colors.black87,
|
|
size: 36,
|
|
),
|
|
padding: EdgeInsets.zero,
|
|
onPressed: service.togglePlay,
|
|
),
|
|
),
|
|
IconButton(
|
|
onPressed: service.hasQueue ? service.next : null,
|
|
icon: const Icon(Icons.skip_next_rounded, size: 34),
|
|
color: service.hasQueue ? Colors.white70 : Colors.grey[700],
|
|
),
|
|
IconButton(
|
|
onPressed: () => _toggleFavorite(song),
|
|
icon: Icon(
|
|
_isFavorite ? Icons.favorite : Icons.favorite_border,
|
|
color: _isFavorite
|
|
? const Color(0xFFE05C5C)
|
|
: Colors.white54,
|
|
size: 26,
|
|
),
|
|
tooltip: '收藏',
|
|
),
|
|
IconButton(
|
|
onPressed: _openPlaylist,
|
|
icon: const Icon(
|
|
Icons.queue_music_rounded,
|
|
color: Color(0xFFB8D4D0),
|
|
size: 26,
|
|
),
|
|
tooltip: '播放队列',
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|