feat(ui): 播放页改为三页横向切换(信息 / 主页 / 歌词)

- PageView 三页:左=文件信息,中=播放主页,右=歌词
- 顶部指示器:两点+连线,左点亮=信息页,右点亮=歌词页,
  中间都暗=主页;点圆点可直接跳转
- 文件信息页:标题/歌手/专辑/文件夹/文件名/格式/路径,
  优先用 DB 元数据,路径与文件名做解码
- 歌词页:占位(暂无歌词 + 歌名)

真机验证:慢速左右滑动切换正常,指示器跟随。
This commit is contained in:
2026-10-31 22:55:16 +08:00
parent 70227afea5
commit 7cd1e13a82
+159 -2
View File
@@ -26,8 +26,20 @@ class _PlayerPageState extends BaseState<PlayerPage> {
bool _isFavorite = false; bool _isFavorite = false;
String _album = ''; String _album = '';
String _folder = ''; String _folder = '';
String _dbTitle = '';
String _dbArtist = '';
String? _metaSongId; 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) { String _formatDuration(Duration d) {
if (d.inMilliseconds < 0) return '00:00'; if (d.inMilliseconds < 0) return '00:00';
final minutes = d.inMinutes; final minutes = d.inMinutes;
@@ -88,10 +100,14 @@ class _PlayerPageState extends BaseState<PlayerPage> {
final db = SongDatabase(); final db = SongDatabase();
String album = ''; String album = '';
String dbTitle = '';
String dbArtist = '';
bool favorite = false; bool favorite = false;
try { try {
final row = await db.getSongByPath(song.id); final row = await db.getSongByPath(song.id);
album = (row?['album'] as String?)?.trim() ?? ''; album = (row?['album'] as String?)?.trim() ?? '';
dbTitle = (row?['title'] as String?)?.trim() ?? '';
dbArtist = (row?['artist'] as String?)?.trim() ?? '';
favorite = await db.isFavorite(song.id); favorite = await db.isFavorite(song.id);
} catch (_) { } catch (_) {
// 元数据只是装饰,失败忽略 // 元数据只是装饰,失败忽略
@@ -113,6 +129,8 @@ class _PlayerPageState extends BaseState<PlayerPage> {
setState(() { setState(() {
_album = album; _album = album;
_folder = folder; _folder = folder;
_dbTitle = dbTitle;
_dbArtist = dbArtist;
_isFavorite = favorite; _isFavorite = favorite;
}); });
} }
@@ -175,6 +193,7 @@ class _PlayerPageState extends BaseState<PlayerPage> {
icon: const Icon(Icons.keyboard_arrow_down, color: Colors.white70), icon: const Icon(Icons.keyboard_arrow_down, color: Colors.white70),
onPressed: _closePage, onPressed: _closePage,
), ),
title: _buildPageIndicator(),
actions: [ actions: [
PopupMenuButton<String>( PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, color: Colors.white54), icon: const Icon(Icons.more_vert, color: Colors.white54),
@@ -230,8 +249,57 @@ class _PlayerPageState extends BaseState<PlayerPage> {
), ),
], ],
), ),
body: SafeArea( body: PageView(
child: Padding( 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), padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@@ -317,8 +385,97 @@ class _PlayerPageState extends BaseState<PlayerPage> {
const SizedBox(height: 20), 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,
),
],
),
); );
} }