piaocbn2j
/
MTMusic
1
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 优化推荐页面

Browse Source
liao
Spark 8 months ago
parent 7f4a2a89cf
commit 6fcc6a1a38
7 changed files with 373 additions and 459 deletions
Show Stats Download Patch File Download Diff File

BIN
android/app/build/intermediates/assets/debug/flutter_assets/kernel_blob.bin
View File

Binary file not shown.

BIN
android/app/build/intermediates/compressed_assets/debug/out/assets/flutter_assets/kernel_blob.bin.jar
View File

Binary file not shown.

BIN
android/app/build/intermediates/flutter/debug/flutter_assets/kernel_blob.bin
View File

Binary file not shown.

2
android/app/build/intermediates/flutter/debug/flutter_build.d
View File

File diff suppressed because one or more lines are too long

BIN
android/app/build/outputs/flutter-apk/app-debug.apk
View File

Binary file not shown.

213
lib/view/rank_view.dart
Unescape View File

@ -7,12 +7,6 @@ import '../models/getRank_bean.dart';
import '../view_model/rank_view_model.dart'; import '../view_model/rank_view_model.dart';
import 'music_view.dart'; import 'music_view.dart';
import '../common_widget/Song_widegt.dart'; import '../common_widget/Song_widegt.dart';
import '../api/api_collection.dart';
import '../api/api_music_likes.dart';
import '../api/api_music_list.dart';
import '../models/universal_bean.dart';
import 'comment_view.dart';
import '../models/getMusicList_bean.dart';
class RankView extends StatefulWidget { class RankView extends StatefulWidget {
const RankView({super.key}); const RankView({super.key});
@ -53,6 +47,8 @@ class _RankViewState extends State<RankView> with AutomaticKeepAliveClientMixin
rankSingerName.clear(); rankSingerName.clear();
rankCoverPath.clear(); rankCoverPath.clear();
rankMusicPath.clear(); rankMusicPath.clear();
rankMid.clear();
songs.clear();
setState(() { setState(() {
List<int> ids = bean2.data!.map((data) => data.id!).toList(); List<int> ids = bean2.data!.map((data) => data.id!).toList();
@ -122,11 +118,6 @@ class _RankViewState extends State<RankView> with AutomaticKeepAliveClientMixin
fontSize: 40, fontSize: 40,
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
// SizedBox(height: 10),
// Text(
// '2023/12/12更新 1期',
// style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
// ),
], ],
), ),
), ),
@ -269,25 +260,6 @@ class _RankViewState extends State<RankView> with AutomaticKeepAliveClientMixin
color: Colors.grey[100], color: Colors.grey[100],
child: const Icon(Icons.music_note, size: 30), child: const Icon(Icons.music_note, size: 30),
), ),
// loadingBuilder: (context, child, loadingProgress) {
// if (loadingProgress == null) return child;
// return Container(
// width: 60,
// height: 60,
// color: Colors.grey[100],
// child: Center(
// child: CircularProgressIndicator(
// strokeWidth: 2,
// valueColor: const AlwaysStoppedAnimation<Color>(
// Color(0xff429482)),
// value: loadingProgress.expectedTotalBytes != null
// ? loadingProgress.cumulativeBytesLoaded /
// loadingProgress.expectedTotalBytes!
// : null,
// ),
// ),
// );
// },
), ),
), ),
), ),
@ -321,21 +293,6 @@ class _RankViewState extends State<RankView> with AutomaticKeepAliveClientMixin
const SizedBox(width: 18), const SizedBox(width: 18),
], ],
), ),
// IconButton(
// onPressed: () {
// _bottomSheet(context, index);
// },
// icon: Image.asset(
// 'assets/img/More.png',
// width: 25,
// height: 25,
// errorBuilder: (context, error, stackTrace) {
// print('Error loading image: $error');
// return const Icon(Icons.error, size: 25);
// },
// ),
// ),
], ],
), ),
const SizedBox(height: 10) const SizedBox(height: 10)
@ -358,170 +315,4 @@ class _RankViewState extends State<RankView> with AutomaticKeepAliveClientMixin
), ),
); );
} }
Future _bottomSheet(BuildContext context, int index) {
return showModalBottomSheet(
context: context,
backgroundColor: Colors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
),
builder: (context) => StatefulBuilder(
builder: (context, setState) {
// 获取当前歌曲的点赞和收藏状态
bool likesnot = songs[index].likes ?? false;
bool collectionsnot = songs[index].collection ?? false;
return Container(
height: 150,
padding: const EdgeInsets.only(top: 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
IconButton(
onPressed: (){},
icon: Image.asset("assets/img/list_add.png"),
iconSize: 60,
),
const Text("加入歌单")
],
),
Column(
children: [
IconButton(
onPressed: (){},
icon: Image.asset("assets/img/list_download.png"),
iconSize: 60,
),
const Text("下载")
],
),
Column(
children: [
IconButton(
onPressed: () async {
// 1. 立即更新UI显示，优化用户体验
setState(() {
collectionsnot = !collectionsnot;
songs[index].collection = collectionsnot;
});
// 2. 调用收藏API
UniversalBean response = await CollectionApiMusic().addCollection(
musicId: songs[index].id,
Authorization: AppData().currentToken,
);
// 3. 处理API响应
if (response.code != 200) {
// 如果API调用失败，恢复原状态
setState(() {
collectionsnot = !collectionsnot;
songs[index].collection = collectionsnot;
});
} else {
// 4. API调用成功，更新全局状态
downloadManager.updateSongInfo(
songs[index].id, // 歌曲ID
collectionsnot, // 新的收藏状态
songs[index].likes ?? false // 保持原有的点赞状态
);
}
},
icon: SizedBox(
width: 60,
height: 60,
child: Image.asset(
// 根据收藏状态显示不同图标
collectionsnot
? "assets/img/list_collection.png" // 已收藏图标
: "assets/img/list_collection_un.png" // 未收藏图标
),
),
),
const Text("收藏"),
],
),
Column(
children: [
IconButton(
onPressed: () async {
// 1. 立即更新UI显示，优化用户体验
setState(() {
likesnot = !likesnot;
songs[index].likes = likesnot;
});
// 2. 调用点赞API
UniversalBean response = await LikesApiMusic().likesMusic(
musicId: songs[index].id,
Authorization: AppData().currentToken,
);
// 3. 处理API响应
if (response.code != 200) {
// 如果API调用失败，恢复原状态
setState(() {
likesnot = !likesnot;
songs[index].likes = likesnot;
});
} else {
// 4. API调用成功，更新全局状态
downloadManager.updateSongInfo(
songs[index].id, // 歌曲ID
songs[index].collection ?? false, // 保持原有的收藏状态
likesnot // 新的点赞状态
);
}
},
icon: SizedBox(
width: 60,
height: 60,
child: Image.asset(
// 根据点赞状态显示不同图标
likesnot
? "assets/img/list_good.png" // 已点赞图标
: "assets/img/list_good_un.png" // 未点赞图标
),
),
),
const Text("点赞"),
],
),
Column(
children: [
IconButton(
onPressed: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CommentView(
id: songs[index].id,
song: songs[index].title,
singer: songs[index].artist,
cover: songs[index].artistPic,
),
),
);
},
icon: Image.asset("assets/img/list_comment.png"),
iconSize: 60,
),
const Text("评论")
],
),
],
),
],
),
);
},
),
);
}
} }

617
lib/view/song_recommendation_view.dart
Unescape View File

@ -23,13 +23,36 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
List rankCoverPath = []; List rankCoverPath = [];
List rankMusicPath = []; List rankMusicPath = [];
List rankMid = []; List rankMid = [];
List<double> relevanceValues = [];
List<Song> songs = []; List<Song> songs = [];
final downloadManager = Get.put(DownloadManager()); final downloadManager = Get.put(DownloadManager());
late AnimationController _animationController; late AnimationController _animationController;
late List<Animation<double>> _circleFadeInAnimations; late List<Animation<double>> _circleFadeInAnimations;
late List<AnimationController> _dotAnimationControllers; late List<AnimationController> _dotAnimationControllers;
// 圆圈的偏移量
final circleVerticalOffset = -0.08; // 向上偏移屏幕高度的8%
final circleHorizontalOffset = 0.0;
// 连接线的偏移量
final lineVerticalOffset = -0.06; // 向上偏移屏幕高度的6%
final lineHorizontalOffset = 0.0;
// 刷新按钮的偏移量
final refreshButtonVerticalOffset = -0.06;
final refreshButtonHorizontalOffset = 0.0;
// 特效的偏移量
final effectVerticalOffset = 0.035;
final effectHorizontalOffset = 0.09;
// 添加新的状态控制
int? selectedIndex; // 当前选中的圆圈索引
late AnimationController _expandController;
late Animation<double> _expandAnimation;
// 在类开始处添加一个新的偏移量常量
final expandedCircleVerticalOffset = -0.08; // 向上偏移屏幕高度的8%
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -42,6 +65,23 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
_circleFadeInAnimations = []; _circleFadeInAnimations = [];
_dotAnimationControllers = []; _dotAnimationControllers = [];
// 修改展开动画控制器
_expandController = AnimationController(
duration: const Duration(milliseconds: 500), // 增加动画时长
vsync: this,
);
_expandAnimation = CurvedAnimation(
parent: _expandController,
curve: Curves.easeOutQuart, // 使用更适合扩展的动画曲线
);
}
@override
void dispose() {
_expandController.dispose();
super.dispose();
} }
Future<void> _loadRecommendedSongs() async { Future<void> _loadRecommendedSongs() async {
@ -53,12 +93,6 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
RankBean bean2 = await GetRank().getRank(Authorization: AppData().currentToken); RankBean bean2 = await GetRank().getRank(Authorization: AppData().currentToken);
if (bean2.code != 200) return; if (bean2.code != 200) return;
rankNames.clear();
rankSingerName.clear();
rankCoverPath.clear();
rankMusicPath.clear();
relevanceValues.clear();
setState(() { setState(() {
List<int> ids = bean2.data!.take(6).map((data) => data.id!).toList(); List<int> ids = bean2.data!.take(6).map((data) => data.id!).toList();
rankNames = bean2.data!.take(6).map((data) => data.name!).toList(); rankNames = bean2.data!.take(6).map((data) => data.name!).toList();
@ -80,7 +114,6 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
collection: null, collection: null,
mid: rankMid[i], mid: rankMid[i],
)); ));
relevanceValues.add(0.75);
} }
}); });
} catch (e) { } catch (e) {
@ -111,7 +144,7 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
_circleFadeInAnimations.add(fadeIn); _circleFadeInAnimations.add(fadeIn);
final dotController = AnimationController( final dotController = AnimationController(
duration: Duration(milliseconds: (2000 - relevanceValues[i] * 1500).toInt()), duration: const Duration(milliseconds: 2000),
vsync: this, vsync: this,
)..repeat(reverse: true); )..repeat(reverse: true);
_dotAnimationControllers.add(dotController); _dotAnimationControllers.add(dotController);
@ -120,29 +153,47 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
_animationController.forward(from: 0); _animationController.forward(from: 0);
} }
double _generateRelevance() { double _getCircleSize(Size screenSize) {
return 0.6 + math.Random().nextDouble() * 0.4; return screenSize.width * 0.18;
}
double _getCircleSize(double relevance, Size screenSize) {
return 0.08 * screenSize.width + (relevance * 80); // 调整按钮大小
} }
// 计算按钮位置
Map<String, double> _getCirclePosition(int index, int totalItems, Size screenSize, Offset refreshButtonPosition) { Map<String, double> _getCirclePosition(int index, int totalItems, Size screenSize, Offset refreshButtonPosition) {
final radius = math.min(screenSize.width, screenSize.height) * 0.28; // 基于屏幕大小计算半径 final radius = screenSize.width * 0.28;
final angle = (index * 2 * math.pi / totalItems) - math.pi / 2; // 计算每个按钮的角度 final angle = (-math.pi / 2) + (index * 2 * math.pi / totalItems);
final circleSize = _getCircleSize(screenSize);
// 使用屏幕中心作为基准点
final centerX = screenSize.width / 2;
final centerY = screenSize.height / 2;
return { return {
'left': refreshButtonPosition.dx + radius * math.cos(angle), // 计算按钮的水平位置 'left': centerX + radius * math.cos(angle) - (circleSize / 2) + (screenSize.width * circleHorizontalOffset),
'top': refreshButtonPosition.dy + radius * math.sin(angle), // 计算按钮的垂直位置 'top': centerY + radius * math.sin(angle) - (circleSize / 2) + (screenSize.height * circleVerticalOffset),
}; };
} }
// 光点动画控制
Color _getCircleColor(double relevance) { Color _getCircleColor(double relevance) {
return Color(0xFFB2FF59).withOpacity(0.3); // 使用透明的绿色 return Color(0xFFB2FF59).withOpacity(0.3);
}
Offset _getEffectPosition(Offset basePosition, double progress, double angle, double radius, Size size) {
return Offset(
basePosition.dx - progress * (radius - 60) * math.cos(angle) + (size.width * effectHorizontalOffset),
basePosition.dy - progress * (radius - 60) * math.sin(angle) + (size.height * effectVerticalOffset),
);
}
// 处理圆圈点击
void _handleCircleTap(int index) {
setState(() {
if (selectedIndex == index) {
selectedIndex = null;
_expandController.reverse();
} else {
selectedIndex = index;
_expandController.forward(from: 0.0);
}
});
} }
@override @override
@ -150,7 +201,6 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
final screenSize = MediaQuery.of(context).size; final screenSize = MediaQuery.of(context).size;
final safeAreaPadding = MediaQuery.of(context).padding; final safeAreaPadding = MediaQuery.of(context).padding;
// 获取刷新按钮的位置
final refreshButtonPosition = Offset(screenSize.width / 2, screenSize.height / 2); final refreshButtonPosition = Offset(screenSize.width / 2, screenSize.height / 2);
return Container( return Container(
@ -163,161 +213,205 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
child: Scaffold( child: Scaffold(
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
body: SafeArea( body: SafeArea(
child: Stack( child: LayoutBuilder(
children: [ builder: (context, constraints) {
Positioned( return SingleChildScrollView(
top: 20, physics: NeverScrollableScrollPhysics(),
left: 0, child: Container(
right: 0, height: constraints.maxHeight,
child: Center( child: Stack(
child: Text( fit: StackFit.loose,
'知音推荐', children: [
style: TextStyle( Positioned(
fontSize: 24, top: 20,
fontWeight: FontWeight.bold, left: 0,
color: Colors.black.withOpacity(0.8), right: 0,
), child: Center(
), child: Text(
), '知音推荐',
), style: TextStyle(
Center( fontSize: 24,
child: Stack( fontWeight: FontWeight.bold,
alignment: Alignment.center, color: Colors.black.withOpacity(0.8),
children: [ ),
// 画连接线 ),
CustomPaint( ),
size: Size(screenSize.width, screenSize.height),
painter: LinePainter(
recommendedSongs: songs,
relevanceValues: relevanceValues,
screenSize: screenSize,
lineAnimation: _animationController,
refreshButtonPosition: refreshButtonPosition,
), ),
), Center(
// 画六个圆圈按钮 child: Stack(
if (!isLoading) alignment: Alignment.center,
Stack( children: [
children: List.generate(6, (index) { CustomPaint(
final song = songs[index]; size: Size(screenSize.width, screenSize.height),
final relevance = relevanceValues[index]; painter: selectedIndex == null ? LinePainter(
final size = _getCircleSize(relevance, screenSize); recommendedSongs: songs,
final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition); screenSize: screenSize,
lineAnimation: _animationController,
return AnimatedPositioned( refreshButtonPosition: refreshButtonPosition,
duration: Duration(milliseconds: 500), verticalOffset: lineVerticalOffset,
left: position['left']! - size / 2, horizontalOffset: lineHorizontalOffset,
top: position['top']! - size / 2 - safeAreaPadding.top + 1, ) : null,
child: FadeTransition( ),
opacity: _circleFadeInAnimations.isNotEmpty && index < _circleFadeInAnimations.length if (!isLoading)
? _circleFadeInAnimations[index] Stack(
: AlwaysStoppedAnimation(0.0), children: List.generate(6, (index) {
child: SongCircleButton( final song = songs[index];
relevance: relevance, final baseSize = _getCircleSize(screenSize);
size: size, final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition);
songTitle: song.title ?? '',
artistName: song.artist ?? '', return AnimatedBuilder(
relevancePercentage: (relevance * 100).toInt(), animation: _expandAnimation,
songIndex: index, builder: (context, child) {
songList: songs, final expandedSize = selectedIndex == index
onPressed: () { ? math.min(
print("Tapped on song: ${song.title} by ${song.artist}"); baseSize * (1 + _expandAnimation.value * 5.0),
Navigator.push( screenSize.height * 0.7, // 限制最大高度为屏幕高度的70%
context, )
MaterialPageRoute( : baseSize;
builder: (context) => MusicView(
songList: songs, return AnimatedPositioned(
initialSongIndex: index, duration: Duration(milliseconds: 300),
onSongStatusChanged: (index, isCollected, isLiked) { left: selectedIndex == index
setState(() { ? (screenSize.width - expandedSize) / 2
songs[index].collection = isCollected; : position['left']!,
songs[index].likes = isLiked; top: selectedIndex == index
downloadManager.updateSongInfo(songs[index].id, isCollected, isLiked); ? math.max(
}); screenSize.height * 0.15, // 确保顶部有足够空间
}, (screenSize.height - expandedSize) / 2.5 + (screenSize.height * expandedCircleVerticalOffset)
), )
), : position['top']!,
child: AnimatedOpacity(
duration: Duration(milliseconds: 300),
opacity: selectedIndex == null || selectedIndex == index ? 1.0 : 0.0,
child: FadeTransition(
opacity: _circleFadeInAnimations.isNotEmpty && index < _circleFadeInAnimations.length
? _circleFadeInAnimations[index]
: AlwaysStoppedAnimation(1.0),
child: GestureDetector(
onTap: () => _handleCircleTap(index),
onDoubleTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MusicView(
songList: songs,
initialSongIndex: index,
onSongStatusChanged: (index, isCollected, isLiked) {
setState(() {
songs[index].collection = isCollected;
songs[index].likes = isLiked;
downloadManager.updateSongInfo(songs[index].id, isCollected, isLiked);
});
},
),
),
);
},
child: SongCircleButton(
size: expandedSize,
songTitle: song.title ?? '',
artistName: song.artist ?? '',
songIndex: index,
songList: songs,
isExpanded: selectedIndex == index,
expandProgress: _expandAnimation.value,
),
),
),
),
);
},
); );
}, }),
), ),
), if (selectedIndex == null)
); ..._dotAnimationControllers.asMap().entries.map((entry) {
}), final index = entry.key;
), final dotController = entry.value;
..._dotAnimationControllers.asMap().entries.map((entry) {
final index = entry.key; return AnimatedBuilder(
final dotController = entry.value; animation: dotController,
builder: (context, child) {
return AnimatedBuilder( final progress = dotController.value;
animation: dotController, final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition);
builder: (context, child) { final radius = screenSize.width * 0.32;
final progress = dotController.value; final angle = (index * 2 * math.pi / songs.length) - math.pi / 2;
final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition);
final radius = math.min(screenSize.width, screenSize.height) * 0.28; final dotPosition = _getEffectPosition(
final angle = (index * 2 * math.pi / songs.length) - math.pi / 2; Offset(position['left']!, position['top']!),
progress,
final dotPosition = Offset( angle,
position['left']! - progress * (radius - 60) * math.cos(angle), radius,
position['top']! - progress * (radius - 60) * math.sin(angle), screenSize
); );
return Positioned( return Positioned(
left: dotPosition.dx - 4, left: dotPosition.dx - 4,
top: dotPosition.dy - 4, top: dotPosition.dy - 4,
child: Container( child: Container(
width: 8, width: 8,
height: 8, height: 8,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.6), color: Colors.white.withOpacity(0.6),
shape: BoxShape.circle, shape: BoxShape.circle,
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.white.withOpacity(0.4), color: Colors.white.withOpacity(0.4),
blurRadius: 8, blurRadius: 8,
spreadRadius: 3, spreadRadius: 3,
),
],
),
),
);
},
);
}).toList(),
if (selectedIndex == null)
Transform.translate(
offset: Offset(
screenSize.width * refreshButtonHorizontalOffset,
screenSize.height * refreshButtonVerticalOffset,
),
child: Container(
width: screenSize.width * 0.15,
height: screenSize.width * 0.15,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.blue.withOpacity(0.2),
blurRadius: 10,
spreadRadius: 3,
),
],
), ),
], child: IconButton(
icon: Icon(
isLoading ? Icons.hourglass_empty : Icons.refresh,
color: Colors.white,
size: screenSize.width * 0.07,
),
onPressed: () {
if (!isLoading) {
_animationController.reverse(from: 1);
Future.delayed(const Duration(milliseconds: 500), () {
_loadRecommendedSongs();
});
}
},
),
),
), ),
), ],
);
},
);
}).toList(),
// 中间的刷新按钮
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.blue.withOpacity(0.3),
blurRadius: 15,
spreadRadius: 5,
),
],
),
child: IconButton(
icon: Icon(
isLoading ? Icons.hourglass_empty : Icons.refresh,
color: Colors.white,
size: 30,
), ),
onPressed: () {
if (!isLoading) {
_animationController.reverse(from: 1);
Future.delayed(const Duration(milliseconds: 500), () {
_loadRecommendedSongs();
});
}
},
), ),
), ],
], ),
), ),
), );
], },
), ),
), ),
), ),
@ -327,127 +421,156 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
class LinePainter extends CustomPainter { class LinePainter extends CustomPainter {
final List recommendedSongs; final List recommendedSongs;
final List<double> relevanceValues;
final Size screenSize; final Size screenSize;
final Animation<double> lineAnimation; final Animation<double> lineAnimation;
final Offset refreshButtonPosition; final Offset refreshButtonPosition;
final double verticalOffset; // 添加垂直偏移参数
final double horizontalOffset; // 添加水平偏移参数
LinePainter({ LinePainter({
required this.recommendedSongs, required this.recommendedSongs,
required this.relevanceValues,
required this.screenSize, required this.screenSize,
required this.lineAnimation, required this.lineAnimation,
required this.refreshButtonPosition, required this.refreshButtonPosition,
required this.verticalOffset,
required this.horizontalOffset,
}); });
@override @override
void paint(Canvas canvas, Size size) { void paint(Canvas canvas, Size size) {
final center = refreshButtonPosition; // 使用刷新按钮的坐标 final centerX = size.width / 2 + (size.width * horizontalOffset);
final centerY = size.height / 2 + (size.height * verticalOffset);
final center = Offset(centerX, centerY);
final radius = size.width * 0.28;
for (int i = 0; i < recommendedSongs.length; i++) { for (int i = 0; i < recommendedSongs.length; i++) {
final relevance = relevanceValues[i]; final angle = (-math.pi / 2) + (i * 2 * math.pi / recommendedSongs.length);
final position = _getCirclePosition(i, recommendedSongs.length, size);
final end = Offset(center.dx + position['left']!, center.dy + position['top']!); final circleCenter = Offset(
centerX + radius * math.cos(angle),
centerY + radius * math.sin(angle)
);
final paint = Paint() final paint = Paint()
..color = Colors.grey.withOpacity(0.2) // 浅灰色，透明度为0.5 ..color = Colors.grey.withOpacity(0.2)
..strokeWidth = 0.01 + math.pow(relevance, 2) * 10; ..strokeWidth = 1.0;
// 确保从圆心开始绘制连接线 canvas.drawLine(center, circleCenter, paint);
canvas.drawLine(center, end, paint);
} }
} }
Map<String, double> _getCirclePosition(int index, int totalItems, Size size) {
final radius = math.min(size.width, size.height) * 0.28;
final angle = (index * 2 * math.pi / totalItems) - math.pi / 2;
return {
'left': radius * math.cos(angle),
'top': radius * math.sin(angle),
};
}
@override @override
bool shouldRepaint(CustomPainter oldDelegate) { bool shouldRepaint(CustomPainter oldDelegate) {
return false; return true;
} }
} }
class SongCircleButton extends StatelessWidget { class SongCircleButton extends StatelessWidget {
final double relevance;
final double size; final double size;
final String songTitle; final String songTitle;
final String artistName; final String artistName;
final int relevancePercentage;
final int songIndex; final int songIndex;
final List<Song> songList; final List<Song> songList;
final VoidCallback onPressed; final bool isExpanded;
final double expandProgress;
const SongCircleButton({ const SongCircleButton({
required this.relevance,
required this.size, required this.size,
required this.songTitle, required this.songTitle,
required this.artistName, required this.artistName,
required this.relevancePercentage,
required this.songIndex, required this.songIndex,
required this.songList, required this.songList,
required this.onPressed, this.isExpanded = false,
this.expandProgress = 0.0,
}); });
Color _getCircleColor() {
return Color(0xFFFFC1E3); // 浅粉色
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return GestureDetector( return AnimatedContainer(
onTap: onPressed, // 绑定点击事件 duration: Duration(milliseconds: 300),
child: Container( width: size,
width: size, height: size,
height: size, constraints: BoxConstraints(
decoration: BoxDecoration( maxHeight: MediaQuery.of(context).size.height * 0.7, // 限制最大高度
color: _getCircleColor(), ),
borderRadius: BorderRadius.circular(size / 2), // 圆形按钮 decoration: BoxDecoration(
boxShadow: [ color: Color(0xFFFFC1E3).withOpacity(isExpanded ? 1.0 : 0.95),
BoxShadow( borderRadius: BorderRadius.circular(size / 2),
color: _getCircleColor().withOpacity(0.6), // 浅粉色光晕效果 boxShadow: [
blurRadius: 12, // 光晕模糊度 BoxShadow(
spreadRadius: 8, // 光晕扩散度 color: Color(0xFFFFC1E3).withOpacity(isExpanded ? 0.5 : 0.25),
), blurRadius: isExpanded ? 40 : 12,
], spreadRadius: isExpanded ? 20 : 4,
), ),
child: Center( ],
child: Column( ),
mainAxisAlignment: MainAxisAlignment.center, child: Center(
children: [ child: SingleChildScrollView( // 添加滚动支持
Text( physics: NeverScrollableScrollPhysics(),
'', child: AnimatedPadding(
style: TextStyle( duration: Duration(milliseconds: 300),
color: Colors.white, padding: EdgeInsets.all(size * (isExpanded ? 0.1 : 0.12)),
fontSize: 18, child: Column(
fontWeight: FontWeight.bold, mainAxisAlignment: MainAxisAlignment.center,
), children: [
), if (isExpanded) ...[
const SizedBox(height: 4), Text(
Text( '推荐歌曲',
songTitle, style: TextStyle(
textAlign: TextAlign.center, color: Colors.white.withOpacity(0.8),
style: const TextStyle( fontSize: size * 0.08,
color: Colors.white, height: 1.2,
fontWeight: FontWeight.bold, ),
fontSize: 14, ),
SizedBox(height: size * 0.05),
],
Text(
songTitle,
textAlign: TextAlign.center,
maxLines: isExpanded ? null : 2,
overflow: isExpanded ? null : TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: isExpanded
? size * 0.12 // 增大展开时的字体
: size * 0.15,
height: 1.2,
),
), ),
), SizedBox(height: size * (isExpanded ? 0.05 : 0.02)),
const SizedBox(height: 2), Text(
Text( artistName,
artistName, textAlign: TextAlign.center,
textAlign: TextAlign.center, maxLines: isExpanded ? null : 1,
style: TextStyle( overflow: isExpanded ? null : TextOverflow.ellipsis,
color: Colors.white70, style: TextStyle(
fontSize: 12, color: Colors.white.withOpacity(isExpanded ? 1.0 : 0.8),
fontSize: isExpanded
? size * 0.09 // 增大展开时的字体
: size * 0.12,
height: 1.2,
),
), ),
), if (isExpanded) ...[
], SizedBox(height: size * 0.08),
Text(
'双击播放',
style: TextStyle(
color: Colors.white.withOpacity(0.7),
fontSize: size * 0.08,
height: 1.2,
),
),
SizedBox(height: size * 0.05),
Icon(
Icons.play_circle_outline,
color: Colors.white.withOpacity(0.8),
size: size * 0.15,
),
],
],
),
), ),
), ),
), ),

Write Preview
Loading…
Cancel
Save