feat(ui): 播放页改为三页横向切换(信息 / 主页 / 歌词)
- PageView 三页:左=文件信息,中=播放主页,右=歌词 - 顶部指示器:两点+连线,左点亮=信息页,右点亮=歌词页, 中间都暗=主页;点圆点可直接跳转 - 文件信息页:标题/歌手/专辑/文件夹/文件名/格式/路径, 优先用 DB 元数据,路径与文件名做解码 - 歌词页:占位(暂无歌词 + 歌名) 真机验证:慢速左右滑动切换正常,指示器跟随。
This commit is contained in:
+230
-73
@@ -26,8 +26,20 @@ class _PlayerPageState extends BaseState<PlayerPage> {
|
||||
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;
|
||||
@@ -88,10 +100,14 @@ class _PlayerPageState extends BaseState<PlayerPage> {
|
||||
|
||||
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 (_) {
|
||||
// 元数据只是装饰,失败忽略
|
||||
@@ -113,6 +129,8 @@ class _PlayerPageState extends BaseState<PlayerPage> {
|
||||
setState(() {
|
||||
_album = album;
|
||||
_folder = folder;
|
||||
_dbTitle = dbTitle;
|
||||
_dbArtist = dbArtist;
|
||||
_isFavorite = favorite;
|
||||
});
|
||||
}
|
||||
@@ -175,6 +193,7 @@ class _PlayerPageState extends BaseState<PlayerPage> {
|
||||
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),
|
||||
@@ -230,94 +249,232 @@ class _PlayerPageState extends BaseState<PlayerPage> {
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SafeArea(
|
||||
child: 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),
|
||||
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(
|
||||
song.title,
|
||||
style: const TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
height: 1.25,
|
||||
_album,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.grey[500],
|
||||
height: 1.5,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
if (_folder.isNotEmpty)
|
||||
Text(
|
||||
song.artist,
|
||||
style: TextStyle(fontSize: 14, color: Colors.grey[400]),
|
||||
'($_folder)',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: Colors.grey[600],
|
||||
height: 1.5,
|
||||
),
|
||||
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(),
|
||||
|
||||
const Spacer(),
|
||||
// ---- 进度 ----
|
||||
_buildProgressSection(service),
|
||||
const SizedBox(height: 18),
|
||||
|
||||
// ---- 进度 ----
|
||||
_buildProgressSection(service),
|
||||
const SizedBox(height: 18),
|
||||
// ---- 控制 ----
|
||||
_buildControlButtons(service, song, isPlaying),
|
||||
const SizedBox(height: 20),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ---- 控制 ----
|
||||
_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,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user