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

界面部分阶段性达成效果

Browse Source
This commit is contained in:
lxh2875931338
2026-08-16 21:58:18 +08:00
parent 1dd669287c
commit 457a9bf1e5
6 changed files with 562 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pages/home_page.dart
+65 -65
View File
@@ -1,3 +1,4 @@
// lib/pages/home_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/audio_service.dart';
@@ -5,16 +6,17 @@ import '../services/webdav_service.dart';
import '../services/playback_service.dart';
import '../widgets/mini_player_bar.dart';
import 'webdav_setup_page.dart';
import 'webdav_file_list_page.dart';
// ==================================================
// 歌曲数据模型（含元数据状态）
// ==================================================
class SongItem {
final String path; // WebDAV 完整路径
final String fileName; // 文件名
final String? title; // 元数据标题
final String? artist; // 元数据艺术家
final String sourceTag; // 来源标签
final String path;
final String fileName;
final String? title;
final String? artist;
final String sourceTag;
final String metadataState; // "unknown" | "loading" | "success" | "failed"
SongItem({
@@ -135,8 +137,6 @@ class HomePage extends StatefulWidget {
class _HomePageState extends State<HomePage> {
List<SongItem> _favorites = [];
bool _isWebDAVConnected = false;
String _webDAVUsername = '';
bool _isLoading = true;
@override
@@ -150,19 +150,12 @@ class _HomePageState extends State<HomePage> {
try {
final hasCred = await WebDAVService.instance.loadCredentials();
if (hasCred) {
_isWebDAVConnected = true;
// 从 BaseUrl 中提取用户名（简化展示）
final baseUrl = WebDAVService.instance.baseUrl;
_webDAVUsername =
baseUrl?.replaceAll(RegExp(r'^https?://'), '').split('/').first ??
'已连接';
await _loadMusicList();
// ✅ 不再自动加载音乐到收藏
_favorites = [];
} else {
_isWebDAVConnected = false;
_favorites = [];
}
} catch (e) {
_isWebDAVConnected = false;
_favorites = [];
} finally {
if (mounted) setState(() => _isLoading = false);
@@ -185,23 +178,12 @@ class _HomePageState extends State<HomePage> {
}).toList();
});
} catch (e) {
// 加载失败保持空列表
setState(() => _favorites = []);
}
}
// 刷新列表（从 WebDAV 设置页返回时调用）
Future<void> _refreshFromWebDAV() async {
final hasCred = await WebDAVService.instance.loadCredentials();
setState(() {
_isWebDAVConnected = hasCred;
if (hasCred) {
final baseUrl = WebDAVService.instance.baseUrl;
_webDAVUsername =
baseUrl?.replaceAll(RegExp(r'^https?://'), '').split('/').first ??
'已连接';
}
});
if (hasCred) {
await _loadMusicList();
} else {
@@ -213,7 +195,6 @@ class _HomePageState extends State<HomePage> {
try {
final url = WebDAVService.instance.getFileUrl(song.path);
await PlaybackService().play(url);
// 更新 AudioService 状态
context.read<AudioService>().playSong(Song(
id: song.path,
title: song.displayTitle,
@@ -234,6 +215,9 @@ class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
// 直接从 WebDAVService 读取实时状态
final isConnected = WebDAVService.instance.isConnected;
final username = WebDAVService.instance.username ?? '点击连接';
final audioService = context.watch<AudioService>();
final showMiniBar = audioService.currentSong != null;
@@ -243,7 +227,7 @@ class _HomePageState extends State<HomePage> {
children: [
CustomScrollView(
slivers: [
// ---------- 顶部安全区域 + 标题 ----------
// ---- 顶部标题 ----
SliverToBoxAdapter(
child: SafeArea(
child: Padding(
@@ -270,7 +254,7 @@ class _HomePageState extends State<HomePage> {
),
),
// ---------- 媒体库区块 ----------
// ---- 媒体库 ----
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
@@ -290,14 +274,29 @@ class _HomePageState extends State<HomePage> {
// ---- WebDAV 入口 ----
_ClickableTile(
onTap: () async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const WebDAVSetupPage(),
),
);
if (result == true) {
await _refreshFromWebDAV();
if (WebDAVService.instance.isConnected) {
// 已连接 → 直接进入文件列表
await Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const WebDAVFileListPage(),
),
);
// 返回后刷新界面（可能状态变化）
setState(() {});
} else {
// 未连接 → 进入设置页
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const WebDAVSetupPage(),
),
);
// 从设置页返回后刷新
setState(() {});
if (result == true) {
await _refreshFromWebDAV();
}
}
},
child: Row(
@@ -328,10 +327,10 @@ class _HomePageState extends State<HomePage> {
),
const SizedBox(width: 16),
Text(
_isWebDAVConnected ? '● 已连接' : '● 未连接',
isConnected ? '● 已连接' : '● 未连接',
style: TextStyle(
fontSize: 13,
color: _isWebDAVConnected
color: isConnected
? const Color(0xFF4CAF50)
: Colors.grey[500],
fontWeight: FontWeight.w400,
@@ -341,12 +340,10 @@ class _HomePageState extends State<HomePage> {
),
const SizedBox(height: 4),
Text(
_isWebDAVConnected
? _webDAVUsername
: '点击连接',
isConnected ? username : '点击连接',
style: TextStyle(
fontSize: 14,
color: _isWebDAVConnected
color: isConnected
? Colors.grey[400]
: Colors.grey[600],
),
@@ -450,34 +447,37 @@ class _HomePageState extends State<HomePage> {
),
),
// ---------- “我的收藏” Sticky Header ----------
// 在 home_page.dart 中，修改 SliverPersistentHeader 的 delegate
SliverPersistentHeader(
pinned: true,
delegate: _StickyHeaderDelegate(
child: Container(
height: 48,
color: const Color(0xFF0E1211),
padding: const EdgeInsets.symmetric(horizontal: 20),
child: const Row(
children: [
Icon(Icons.favorite,
color: Color(0xFFB8D4D0), size: 20),
SizedBox(width: 8),
Text(
'我的收藏',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w500,
color: Color(0xFFB8D4D0),
child: SafeArea(
bottom: false,
child: Container(
height: 48,
color: const Color(0xFF0E1211),
padding: const EdgeInsets.symmetric(horizontal: 20),
child: const Row(
children: [
Icon(Icons.favorite,
color: Color(0xFFB8D4D0), size: 20),
SizedBox(width: 8),
Text(
'我的收藏',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w500,
color: Color(0xFFB8D4D0),
),
),
),
],
],
),
),
),
),
),
// ---------- 收藏列表 ----------
// ---- 收藏列表 ----
SliverPadding(
padding: EdgeInsets.only(
left: 20,
@@ -505,7 +505,7 @@ class _HomePageState extends State<HomePage> {
),
const SizedBox(height: 16),
Text(
_isWebDAVConnected
isConnected
? '还没有收藏歌曲\n去媒体库发现音乐'
: '请先连接 WebDAV',
textAlign: TextAlign.center,
@@ -563,7 +563,7 @@ class _HomePageState extends State<HomePage> {
],
),
// ---------- 底部 MiniPlayer ----------
// ---- 底部 MiniPlayer ----
if (showMiniBar)
const Positioned(
left: 0,
lib/pages/webdav_file_list_page.dart
+198 -122
View File
@@ -1,46 +1,52 @@
// ============================================================
// 文件名: webdav_file_list_page.dart
// 功能: WebDAV 文件浏览页面，支持文件夹导航和音乐播放
// 调用方式: Navigator.push(context, MaterialPageRoute(builder: (_) => WebDAVFileListPage()))
// ============================================================
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/webdav_service.dart';
import '../services/playback_service.dart';
import '../services/audio_service.dart';
import 'package:provider/provider.dart';
class WebDAVFileListPage extends StatefulWidget {
const WebDAVFileListPage({super.key, this.currentPath = '/'});
/// 当前浏览路径，默认为根目录 '/'
final String currentPath;
const WebDAVFileListPage({super.key, this.currentPath = '/'});
@override
State<WebDAVFileListPage> createState() => _WebDAVFileListPageState();
}
class _WebDAVFileListPageState extends State<WebDAVFileListPage> {
List<WebDAVFileItem> _files = [];
List<WebDAVFileItem> _directories = [];
List<WebDAVItem> _items = [];
bool _isLoading = true;
String _errorMessage = '';
String _currentPath = '/';
@override
void initState() {
super.initState();
_loadFiles();
_currentPath = widget.currentPath;
_loadDirectory();
}
Future<void> _loadFiles() async {
// -------------------------------------------------------------
// 加载当前目录内容
// -------------------------------------------------------------
Future<void> _loadDirectory() async {
setState(() {
_isLoading = true;
_errorMessage = '';
});
try {
final allItems =
await WebDAVService.instance.getMusicFiles(path: widget.currentPath);
// 分离目录和文件（这里 getMusicFiles 只返回音乐文件，但如果有目录逻辑需要扩展）
// 由于 getMusicFiles 只返回音乐文件，我们需要获取目录列表
// 这里先简化：只显示音乐文件
final items =
await WebDAVService.instance.listDirectory(path: _currentPath);
setState(() {
_files = allItems;
_directories = [];
_items = items;
_isLoading = false;
});
} catch (e) {
@@ -51,12 +57,26 @@ class _WebDAVFileListPageState extends State<WebDAVFileListPage> {
}
}
void _playSong(WebDAVFileItem file) async {
// -------------------------------------------------------------
// 进入子目录
// -------------------------------------------------------------
void _enterDirectory(WebDAVItem dir) {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => WebDAVFileListPage(currentPath: dir.path),
),
);
}
// -------------------------------------------------------------
// 播放音乐文件
// -------------------------------------------------------------
void _playSong(WebDAVItem file) async {
try {
final url = WebDAVService.instance.getFileUrl(file.path);
await PlaybackService().play(url);
// 更新 AudioService 状态
final song = Song(
id: file.path,
title: file.name.replaceAll(RegExp(r'\.[^.]*$'), ''),
@@ -65,15 +85,7 @@ class _WebDAVFileListPageState extends State<WebDAVFileListPage> {
);
context.read<AudioService>().playSong(song);
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('正在播放: ${file.name}'),
backgroundColor: const Color(0xFF4CAF50),
duration: const Duration(seconds: 1),
),
);
}
// ✅ 移除 SnackBar，直接显示 MiniPlayer
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
@@ -86,12 +98,25 @@ class _WebDAVFileListPageState extends State<WebDAVFileListPage> {
}
}
// -------------------------------------------------------------
// 构建面包屑路径显示（只显示最后两级，避免过长）
// -------------------------------------------------------------
String _getDisplayPath() {
if (_currentPath == '/') return '根目录';
final parts = _currentPath.split('/').where((s) => s.isNotEmpty).toList();
if (parts.length <= 2) return parts.join(' / ');
return '... / ${parts.sublist(parts.length - 2).join(' / ')}';
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF0E1211),
appBar: AppBar(
title: const Text('音乐库'),
title: Text(
_getDisplayPath(),
style: const TextStyle(fontSize: 16),
),
backgroundColor: Colors.transparent,
elevation: 0,
foregroundColor: Colors.white,
@@ -102,104 +127,155 @@ class _WebDAVFileListPageState extends State<WebDAVFileListPage> {
actions: [
IconButton(
icon: const Icon(Icons.refresh),
onPressed: _loadFiles,
onPressed: _loadDirectory,
tooltip: '刷新',
),
],
),
body: _isLoading
? const Center(
child: CircularProgressIndicator(
color: Color(0xFFB8D4D0),
),
)
: _errorMessage.isNotEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.error_outline,
size: 48, color: Colors.grey[600]),
const SizedBox(height: 16),
Text(
_errorMessage,
style: TextStyle(color: Colors.grey[400]),
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _loadFiles,
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFB8D4D0),
foregroundColor: Colors.black87,
),
child: const Text('重试'),
),
],
),
)
: _files.isEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.music_note,
size: 48, color: Colors.grey[600]),
const SizedBox(height: 16),
Text(
'没有找到音乐文件',
style: TextStyle(color: Colors.grey[400]),
),
const SizedBox(height: 8),
Text(
'支持格式: MP3, FLAC, M4A, APE, WAV, OPUS',
style: TextStyle(
color: Colors.grey[600], fontSize: 12),
),
],
),
)
: ListView.builder(
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 8),
itemCount: _files.length,
itemBuilder: (context, index) {
final file = _files[index];
return ListTile(
contentPadding: const EdgeInsets.symmetric(
horizontal: 4, vertical: 2),
leading: const Icon(
Icons.audiotrack,
color: Color(0xFFB8D4D0),
size: 28,
),
title: Text(
file.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
file.size != null
? '${(file.size! / 1024 / 1024).toStringAsFixed(1)} MB'
: '',
style: TextStyle(
fontSize: 12,
color: Colors.grey[500],
),
),
trailing: IconButton(
icon: const Icon(Icons.play_arrow,
color: Color(0xFFB8D4D0)),
onPressed: () => _playSong(file),
),
onTap: () => _playSong(file),
);
},
),
body: _buildBody(),
);
}
// -------------------------------------------------------------
// 构建主体内容
// -------------------------------------------------------------
Widget _buildBody() {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(
color: Color(0xFFB8D4D0),
),
);
}
if (_errorMessage.isNotEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.error_outline, size: 48, color: Colors.grey[600]),
const SizedBox(height: 16),
Text(
_errorMessage,
style: TextStyle(color: Colors.grey[400]),
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _loadDirectory,
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFB8D4D0),
foregroundColor: Colors.black87,
),
child: const Text('重试'),
),
],
),
);
}
if (_items.isEmpty) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.folder_open, size: 48, color: Colors.grey[600]),
const SizedBox(height: 16),
Text(
'此目录为空',
style: TextStyle(color: Colors.grey[400]),
),
const SizedBox(height: 8),
Text(
'支持格式: MP3, FLAC, M4A, APE, WAV, OPUS',
style: TextStyle(color: Colors.grey[600], fontSize: 12),
),
],
),
);
}
return ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
itemCount: _items.length,
itemBuilder: (context, index) {
final item = _items[index];
return _buildListItem(item);
},
);
}
// -------------------------------------------------------------
// 构建单个列表项（区分目录和文件）
// -------------------------------------------------------------
Widget _buildListItem(WebDAVItem item) {
if (item.isDirectory) {
// ---------- 目录项 ----------
return ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
leading: const Icon(
Icons.folder_outlined,
color: Color(0xFFB8D4D0),
size: 32,
),
title: Text(
item.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
'文件夹',
style: TextStyle(
fontSize: 12,
color: Colors.grey[500],
),
),
trailing: const Icon(
Icons.chevron_right,
color: Colors.grey,
),
onTap: () => _enterDirectory(item),
);
} else {
// ---------- 音乐文件项 ----------
final sizeStr = item.size != null
? '${(item.size! / 1024 / 1024).toStringAsFixed(1)} MB'
: '';
return ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
leading: const Icon(
Icons.audiotrack,
color: Color(0xFFB8D4D0),
size: 28,
),
title: Text(
item.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
color: Colors.white,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Text(
sizeStr,
style: TextStyle(
fontSize: 12,
color: Colors.grey[500],
),
),
trailing: IconButton(
icon: const Icon(Icons.play_arrow, color: Color(0xFFB8D4D0)),
onPressed: () => _playSong(item),
),
onTap: () => _playSong(item),
);
}
}
}
lib/pages/webdav_setup_page.dart
+14 -3
View File
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import '../services/webdav_service.dart';
import 'webdav_file_list_page.dart';
class WebDAVSetupPage extends StatefulWidget {
const WebDAVSetupPage({super.key});
@@ -38,7 +39,6 @@ class _WebDAVSetupPageState extends State<WebDAVSetupPage> {
_statusText = hasCred ? '已连接' : '未连接';
if (hasCred) {
_baseUrlController.text = WebDAVService.instance.baseUrl ?? '';
// 用户名不显示，保持隐私
}
});
}
@@ -55,7 +55,7 @@ class _WebDAVSetupPageState extends State<WebDAVSetupPage> {
_passwordController.text.trim(),
);
// 尝试列出文件以验证连接
// 验证连接
await WebDAVService.instance.getMusicFiles();
setState(() {
@@ -71,7 +71,13 @@ class _WebDAVSetupPageState extends State<WebDAVSetupPage> {
backgroundColor: Color(0xFF4CAF50),
),
);
Navigator.pop(context, true);
// ✅ 登录成功 → 直接跳转到文件列表页
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (_) => const WebDAVFileListPage(),
),
);
}
} catch (e) {
setState(() {
@@ -103,6 +109,7 @@ class _WebDAVSetupPageState extends State<WebDAVSetupPage> {
backgroundColor: Colors.grey,
),
);
Navigator.pop(context);
}
}
@@ -115,6 +122,10 @@ class _WebDAVSetupPageState extends State<WebDAVSetupPage> {
backgroundColor: Colors.transparent,
elevation: 0,
foregroundColor: Colors.white,
leading: IconButton(
icon: const Icon(Icons.arrow_back_ios_new),
onPressed: () => Navigator.pop(context),
),
),
body: Padding(
padding: const EdgeInsets.all(24),