部分界面逻辑调整:播放界面默认最高优先级,其次是独立的miniplayerbar

This commit is contained in:
2026-08-18 23:08:52 +08:00
parent c05398d76f
commit 74a15ca7af
5 changed files with 103 additions and 164 deletions
+39 -2
View File
@@ -5,6 +5,7 @@ import 'package:media_kit/media_kit.dart';
import 'services/audio_service.dart';
import 'services/playback_service.dart';
import 'pages/home_page.dart';
import 'pages/player_page.dart';
import 'widgets/global_mini_player.dart';
// ✅ 全局导航键
@@ -61,14 +62,41 @@ void main() {
);
}
class QTPlayerApp extends StatelessWidget {
class QTPlayerApp extends StatefulWidget {
const QTPlayerApp({super.key});
@override
State<QTPlayerApp> createState() => _QTPlayerAppState();
}
class _QTPlayerAppState extends State<QTPlayerApp> {
bool _showPlayerPage = false;
// ✅ 播放页回调,暴露给 GlobalMiniPlayer
void _openPlayerPage() {
setState(() {
_showPlayerPage = true;
});
}
void _closePlayerPage() {
setState(() {
_showPlayerPage = false;
});
}
@override
void initState() {
super.initState();
// ✅ 注入回调(GlobalMiniPlayer 是 static 成员)
GlobalMiniPlayer.onOpenPlayerPage = _openPlayerPage;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '清听',
navigatorKey: navigatorKey, // ✅ 设置导航键
navigatorKey: navigatorKey,
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: const Color(0xFF7C9A9E),
@@ -87,13 +115,22 @@ class QTPlayerApp extends StatelessWidget {
OverlayEntry(
builder: (context) => Stack(
children: [
// ① 主页面
Positioned.fill(child: child!),
// ② MiniPlayer
const Positioned(
left: 0,
right: 0,
bottom: 0,
child: GlobalMiniPlayer(),
),
// ③ 播放页(全屏覆盖)
if (_showPlayerPage)
Positioned.fill(
child: PlayerPage(
onClose: _closePlayerPage,
),
),
],
),
),
-1
View File
@@ -4,7 +4,6 @@ import 'package:provider/provider.dart';
import '../services/audio_service.dart';
import '../services/webdav_service.dart';
import '../services/playback_service.dart';
import '../widgets/mini_player_bar.dart';
import '../widgets/magnetic_scroll_physics.dart';
import 'webdav_setup_page.dart';
import 'webdav_file_list_page.dart';
+59 -35
View File
@@ -2,16 +2,23 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/audio_service.dart';
import '../main.dart'; // ✅ 导入 navigatorKey
import 'playlist_page.dart'; // ✅ 导入 PlaylistPage
class PlayerPage extends StatefulWidget {
const PlayerPage({super.key});
final VoidCallback onClose;
const PlayerPage({
super.key,
required this.onClose,
});
@override
State<PlayerPage> createState() => _PlayerPageState();
}
class _PlayerPageState extends State<PlayerPage> {
double? _dragProgress; // 拖动时的临时进度
double? _dragProgress;
String _formatDuration(Duration d) {
if (d.inMilliseconds < 0) return '00:00';
@@ -28,10 +35,24 @@ class _PlayerPageState extends State<PlayerPage> {
if (song == null) {
return Scaffold(
backgroundColor: const Color(0xFF0E1211),
body: const Center(
child: Text(
'没有正在播放的歌曲',
style: TextStyle(color: Colors.grey),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'没有正在播放的歌曲',
style: TextStyle(color: Colors.grey),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: widget.onClose,
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFB8D4D0),
foregroundColor: Colors.black87,
),
child: const Text('返回'),
),
],
),
),
);
@@ -51,7 +72,6 @@ class _PlayerPageState extends State<PlayerPage> {
.clamp(0.0, 1.0)
: 0.0;
// 拖动时显示拖动的进度,否则显示实际播放进度
final displayProgress = _dragProgress ?? progress;
return Scaffold(
@@ -61,7 +81,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: widget.onClose, // ✅ 使用回调关闭
),
title: const Text(
'正在播放',
@@ -73,6 +93,17 @@ class _PlayerPageState extends State<PlayerPage> {
),
centerTitle: true,
actions: [
IconButton(
icon:
const Icon(Icons.playlist_play_outlined, color: Colors.white54),
onPressed: () {
navigatorKey.currentState?.push(
MaterialPageRoute(
builder: (_) => const PlaylistPage(),
),
);
},
),
IconButton(
icon: const Icon(Icons.more_vert, color: Colors.white54),
onPressed: () {},
@@ -84,7 +115,6 @@ class _PlayerPageState extends State<PlayerPage> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ---- 封面占位 ----
Container(
width: 240,
height: 240,
@@ -106,8 +136,6 @@ class _PlayerPageState extends State<PlayerPage> {
),
),
const SizedBox(height: 48),
// ---- 歌曲信息 ----
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
@@ -136,8 +164,6 @@ class _PlayerPageState extends State<PlayerPage> {
],
),
const SizedBox(height: 40),
// ---- 双层进度条(视觉与交互分离) ----
Column(
children: [
SizedBox(
@@ -145,15 +171,14 @@ class _PlayerPageState extends State<PlayerPage> {
child: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
final bufferWidth =
width * bufferProgress.clamp(0.0, 1.0);
final progressWidth = width * progress.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,
@@ -162,8 +187,6 @@ class _PlayerPageState extends State<PlayerPage> {
borderRadius: BorderRadius.circular(2),
),
),
// ② 缓冲层(深青色)
Container(
width: bufferWidth,
height: 4,
@@ -172,8 +195,6 @@ class _PlayerPageState extends State<PlayerPage> {
borderRadius: BorderRadius.circular(2),
),
),
// ③ 播放进度层(亮青色)
Container(
width: progressWidth,
height: 4,
@@ -182,26 +203,23 @@ class _PlayerPageState extends State<PlayerPage> {
borderRadius: BorderRadius.circular(2),
),
),
// ④ 交互层(只负责手势,不显示任何轨道)
Positioned.fill(
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
trackHeight: 0,
activeTrackColor: Colors.transparent,
inactiveTrackColor: Colors.transparent,
thumbColor: Colors.transparent, // ✅ 完全隐藏小球
thumbColor: Colors.transparent,
overlayColor: Colors.transparent,
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 0,
),
),
child: Slider(
value: progress.clamp(0.0, 1.0),
value: displayProgress.clamp(0.0, 1.0),
min: 0.0,
max: 1.0,
onChanged: (value) {
// 拖动时只更新本地状态,不触发 seek
setState(() {
_dragProgress = value;
});
@@ -225,7 +243,6 @@ class _PlayerPageState extends State<PlayerPage> {
},
),
),
// 时间显示
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -248,15 +265,23 @@ class _PlayerPageState extends State<PlayerPage> {
],
),
const SizedBox(height: 32),
// ---- 播放控制 ----
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
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: Colors.white60,
color: service.hasQueue ? Colors.white60 : Colors.grey[600],
padding: const EdgeInsets.all(12),
),
const SizedBox(width: 20),
@@ -274,18 +299,17 @@ class _PlayerPageState extends State<PlayerPage> {
size: 28,
),
padding: EdgeInsets.zero,
onPressed: () {
service.togglePlay();
},
onPressed: service.togglePlay,
),
),
const SizedBox(width: 20),
IconButton(
onPressed: () {},
onPressed: service.hasQueue ? service.next : null,
icon: const Icon(Icons.skip_next, size: 28),
color: Colors.white60,
color: service.hasQueue ? Colors.white60 : Colors.grey[600],
padding: const EdgeInsets.all(12),
),
const SizedBox(width: 4),
],
),
const SizedBox(height: 16),
+5 -9
View File
@@ -2,13 +2,15 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/audio_service.dart';
import '../pages/player_page.dart';
import '../pages/playlist_page.dart';
import '../main.dart'; // ✅ 导入 navigatorKey
class GlobalMiniPlayer extends StatelessWidget {
const GlobalMiniPlayer({super.key});
// ✅ 通过全局回调打开播放页(由 main.dart 注入)
static VoidCallback? onOpenPlayerPage;
@override
Widget build(BuildContext context) {
final service = context.watch<AudioService>();
@@ -18,13 +20,8 @@ class GlobalMiniPlayer extends StatelessWidget {
return GestureDetector(
onTap: () {
if (song != null) {
// ✅ 使用 navigatorKey 跳转
navigatorKey.currentState?.push(
MaterialPageRoute(
builder: (_) => const PlayerPage(),
),
);
if (song != null && onOpenPlayerPage != null) {
onOpenPlayerPage!();
}
},
child: Container(
@@ -115,7 +112,6 @@ class GlobalMiniPlayer extends StatelessWidget {
size: 24,
),
onPressed: () {
// ✅ 使用 navigatorKey 跳转
navigatorKey.currentState?.push(
MaterialPageRoute(
builder: (_) => const PlaylistPage(),
-117
View File
@@ -1,117 +0,0 @@
// lib/widgets/mini_player_bar.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/audio_service.dart';
import '../pages/player_page.dart';
class MiniPlayerBar extends StatelessWidget {
const MiniPlayerBar({super.key});
@override
Widget build(BuildContext context) {
final service = context.watch<AudioService>();
final song = service.currentSong;
if (song == null) return const SizedBox.shrink();
return SafeArea(
top: false,
bottom: true,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const PlayerPage(),
),
);
},
child: Container(
height: 64,
decoration: BoxDecoration(
color: const Color(0xFF1A1F1E),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.4),
blurRadius: 12,
offset: const Offset(0, -4),
),
],
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.1),
],
stops: const [0.0, 1.0],
),
),
child: Row(
children: [
const SizedBox(width: 12),
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: const Color(0xFF2A3332),
borderRadius: BorderRadius.circular(4),
),
child: const Icon(
Icons.music_note,
color: Colors.white38,
size: 24,
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
song.title,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
song.artist,
style: TextStyle(
fontSize: 13,
color: Colors.grey[400],
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
IconButton(
icon: Icon(
service.isPlaying ? Icons.pause : Icons.play_arrow,
color: Colors.white,
),
onPressed: () {
service.togglePlay();
},
),
IconButton(
icon: const Icon(
Icons.playlist_play_outlined,
color: Colors.white54,
),
onPressed: () {},
),
const SizedBox(width: 4),
],
),
),
),
);
}
}