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 'music_view.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 {
const RankView({super.key});
@ -53,6 +47,8 @@ class _RankViewState extends State<RankView> with AutomaticKeepAliveClientMixin
rankSingerName.clear();
rankCoverPath.clear();
rankMusicPath.clear();
rankMid.clear();
songs.clear();
setState(() {
List<int> ids = bean2.data!.map((data) => data.id!).toList();
@ -122,11 +118,6 @@ class _RankViewState extends State<RankView> with AutomaticKeepAliveClientMixin
fontSize: 40,
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],
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),
],
),
// 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)
@ -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 rankMusicPath = [];
List rankMid = [];
List<double> relevanceValues = [];
List<Song> songs = [];
final downloadManager = Get.put(DownloadManager());
late AnimationController _animationController;
late List<Animation<double>> _circleFadeInAnimations;
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
void initState() {
super.initState();
@ -42,6 +65,23 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
_circleFadeInAnimations = [];
_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 {
@ -53,12 +93,6 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
RankBean bean2 = await GetRank().getRank(Authorization: AppData().currentToken);
if (bean2.code != 200) return;
rankNames.clear();
rankSingerName.clear();
rankCoverPath.clear();
rankMusicPath.clear();
relevanceValues.clear();
setState(() {
List<int> ids = bean2.data!.take(6).map((data) => data.id!).toList();
rankNames = bean2.data!.take(6).map((data) => data.name!).toList();
@ -80,7 +114,6 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
collection: null,
mid: rankMid[i],
));
relevanceValues.add(0.75);
}
});
} catch (e) {
@ -111,7 +144,7 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
_circleFadeInAnimations.add(fadeIn);
final dotController = AnimationController(
duration: Duration(milliseconds: (2000 - relevanceValues[i] * 1500).toInt()),
duration: const Duration(milliseconds: 2000),
vsync: this,
)..repeat(reverse: true);
_dotAnimationControllers.add(dotController);
@ -120,29 +153,47 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
_animationController.forward(from: 0);
}
double _generateRelevance() {
return 0.6 + math.Random().nextDouble() * 0.4;
}
double _getCircleSize(double relevance, Size screenSize) {
return 0.08 * screenSize.width + (relevance * 80); // 调整按钮大小
double _getCircleSize(Size screenSize) {
return screenSize.width * 0.18;
}
// 计算按钮位置
Map<String, double> _getCirclePosition(int index, int totalItems, Size screenSize, Offset refreshButtonPosition) {
final radius = math.min(screenSize.width, screenSize.height) * 0.28; // 基于屏幕大小计算半径
final angle = (index * 2 * math.pi / totalItems) - math.pi / 2; // 计算每个按钮的角度
final radius = screenSize.width * 0.28;
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 {
'left': refreshButtonPosition.dx + radius * math.cos(angle), // 计算按钮的水平位置
'top': refreshButtonPosition.dy + radius * math.sin(angle), // 计算按钮的垂直位置
'left': centerX + radius * math.cos(angle) - (circleSize / 2) + (screenSize.width * circleHorizontalOffset),
'top': centerY + radius * math.sin(angle) - (circleSize / 2) + (screenSize.height * circleVerticalOffset),
};
}
// 光点动画控制
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
@ -150,7 +201,6 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
final screenSize = MediaQuery.of(context).size;
final safeAreaPadding = MediaQuery.of(context).padding;
// 获取刷新按钮的位置
final refreshButtonPosition = Offset(screenSize.width / 2, screenSize.height / 2);
return Container(
@ -163,161 +213,205 @@ class _SongRecommendationViewState extends State<SongRecommendationView> with Ti
child: Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: Stack(
children: [
Positioned(
top: 20,
left: 0,
right: 0,
child: Center(
child: Text(
'知音推荐',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black.withOpacity(0.8),
),
),
),
),
Center(
child: Stack(
alignment: Alignment.center,
children: [
// 画连接线
CustomPaint(
size: Size(screenSize.width, screenSize.height),
painter: LinePainter(
recommendedSongs: songs,
relevanceValues: relevanceValues,
screenSize: screenSize,
lineAnimation: _animationController,
refreshButtonPosition: refreshButtonPosition,
child: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Container(
height: constraints.maxHeight,
child: Stack(
fit: StackFit.loose,
children: [
Positioned(
top: 20,
left: 0,
right: 0,
child: Center(
child: Text(
'知音推荐',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black.withOpacity(0.8),
),
),
),
),
),
// 画六个圆圈按钮
if (!isLoading)
Stack(
children: List.generate(6, (index) {
final song = songs[index];
final relevance = relevanceValues[index];
final size = _getCircleSize(relevance, screenSize);
final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition);
return AnimatedPositioned(
duration: Duration(milliseconds: 500),
left: position['left']! - size / 2,
top: position['top']! - size / 2 - safeAreaPadding.top + 1,
child: FadeTransition(
opacity: _circleFadeInAnimations.isNotEmpty && index < _circleFadeInAnimations.length
? _circleFadeInAnimations[index]
: AlwaysStoppedAnimation(0.0),
child: SongCircleButton(
relevance: relevance,
size: size,
songTitle: song.title ?? '',
artistName: song.artist ?? '',
relevancePercentage: (relevance * 100).toInt(),
songIndex: index,
songList: songs,
onPressed: () {
print("Tapped on song: ${song.title} by ${song.artist}");
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);
});
},
),
),
Center(
child: Stack(
alignment: Alignment.center,
children: [
CustomPaint(
size: Size(screenSize.width, screenSize.height),
painter: selectedIndex == null ? LinePainter(
recommendedSongs: songs,
screenSize: screenSize,
lineAnimation: _animationController,
refreshButtonPosition: refreshButtonPosition,
verticalOffset: lineVerticalOffset,
horizontalOffset: lineHorizontalOffset,
) : null,
),
if (!isLoading)
Stack(
children: List.generate(6, (index) {
final song = songs[index];
final baseSize = _getCircleSize(screenSize);
final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition);
return AnimatedBuilder(
animation: _expandAnimation,
builder: (context, child) {
final expandedSize = selectedIndex == index
? math.min(
baseSize * (1 + _expandAnimation.value * 5.0),
screenSize.height * 0.7, // 限制最大高度为屏幕高度的70%
)
: baseSize;
return AnimatedPositioned(
duration: Duration(milliseconds: 300),
left: selectedIndex == index
? (screenSize.width - expandedSize) / 2
: position['left']!,
top: selectedIndex == index
? 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,
),
),
),
),
);
},
);
},
}),
),
),
);
}),
),
..._dotAnimationControllers.asMap().entries.map((entry) {
final index = entry.key;
final dotController = entry.value;
return AnimatedBuilder(
animation: dotController,
builder: (context, child) {
final progress = dotController.value;
final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition);
final radius = math.min(screenSize.width, screenSize.height) * 0.28;
final angle = (index * 2 * math.pi / songs.length) - math.pi / 2;
final dotPosition = Offset(
position['left']! - progress * (radius - 60) * math.cos(angle),
position['top']! - progress * (radius - 60) * math.sin(angle),
);
return Positioned(
left: dotPosition.dx - 4,
top: dotPosition.dy - 4,
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.6),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.4),
blurRadius: 8,
spreadRadius: 3,
if (selectedIndex == null)
..._dotAnimationControllers.asMap().entries.map((entry) {
final index = entry.key;
final dotController = entry.value;
return AnimatedBuilder(
animation: dotController,
builder: (context, child) {
final progress = dotController.value;
final position = _getCirclePosition(index, songs.length, screenSize, refreshButtonPosition);
final radius = screenSize.width * 0.32;
final angle = (index * 2 * math.pi / songs.length) - math.pi / 2;
final dotPosition = _getEffectPosition(
Offset(position['left']!, position['top']!),
progress,
angle,
radius,
screenSize
);
return Positioned(
left: dotPosition.dx - 4,
top: dotPosition.dy - 4,
child: Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.6),
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.white.withOpacity(0.4),
blurRadius: 8,
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 {
final List recommendedSongs;
final List<double> relevanceValues;
final Size screenSize;
final Animation<double> lineAnimation;
final Offset refreshButtonPosition;
final double verticalOffset; // 添加垂直偏移参数
final double horizontalOffset; // 添加水平偏移参数
LinePainter({
required this.recommendedSongs,
required this.relevanceValues,
required this.screenSize,
required this.lineAnimation,
required this.refreshButtonPosition,
required this.verticalOffset,
required this.horizontalOffset,
});
@override
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++) {
final relevance = relevanceValues[i];
final position = _getCirclePosition(i, recommendedSongs.length, size);
final end = Offset(center.dx + position['left']!, center.dy + position['top']!);
final angle = (-math.pi / 2) + (i * 2 * math.pi / recommendedSongs.length);
final circleCenter = Offset(
centerX + radius * math.cos(angle),
centerY + radius * math.sin(angle)
);
final paint = Paint()
..color = Colors.grey.withOpacity(0.2) // 浅灰色，透明度为0.5
..strokeWidth = 0.01 + math.pow(relevance, 2) * 10;
..color = Colors.grey.withOpacity(0.2)
..strokeWidth = 1.0;
// 确保从圆心开始绘制连接线
canvas.drawLine(center, end, paint);
canvas.drawLine(center, circleCenter, 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
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
return true;
}
}
class SongCircleButton extends StatelessWidget {
final double relevance;
final double size;
final String songTitle;
final String artistName;
final int relevancePercentage;
final int songIndex;
final List<Song> songList;
final VoidCallback onPressed;
final bool isExpanded;
final double expandProgress;
const SongCircleButton({
required this.relevance,
required this.size,
required this.songTitle,
required this.artistName,
required this.relevancePercentage,
required this.songIndex,
required this.songList,
required this.onPressed,
this.isExpanded = false,
this.expandProgress = 0.0,
});
Color _getCircleColor() {
return Color(0xFFFFC1E3); // 浅粉色
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed, // 绑定点击事件
child: Container(
width: size,
height: size,
decoration: BoxDecoration(
color: _getCircleColor(),
borderRadius: BorderRadius.circular(size / 2), // 圆形按钮
boxShadow: [
BoxShadow(
color: _getCircleColor().withOpacity(0.6), // 浅粉色光晕效果
blurRadius: 12, // 光晕模糊度
spreadRadius: 8, // 光晕扩散度
),
],
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
songTitle,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14,
return AnimatedContainer(
duration: Duration(milliseconds: 300),
width: size,
height: size,
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.7, // 限制最大高度
),
decoration: BoxDecoration(
color: Color(0xFFFFC1E3).withOpacity(isExpanded ? 1.0 : 0.95),
borderRadius: BorderRadius.circular(size / 2),
boxShadow: [
BoxShadow(
color: Color(0xFFFFC1E3).withOpacity(isExpanded ? 0.5 : 0.25),
blurRadius: isExpanded ? 40 : 12,
spreadRadius: isExpanded ? 20 : 4,
),
],
),
child: Center(
child: SingleChildScrollView( // 添加滚动支持
physics: NeverScrollableScrollPhysics(),
child: AnimatedPadding(
duration: Duration(milliseconds: 300),
padding: EdgeInsets.all(size * (isExpanded ? 0.1 : 0.12)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (isExpanded) ...[
Text(
'推荐歌曲',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: size * 0.08,
height: 1.2,
),
),
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,
),
),
),
const SizedBox(height: 2),
Text(
artistName,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white70,
fontSize: 12,
SizedBox(height: size * (isExpanded ? 0.05 : 0.02)),
Text(
artistName,
textAlign: TextAlign.center,
maxLines: isExpanded ? null : 1,
overflow: isExpanded ? null : TextOverflow.ellipsis,
style: TextStyle(
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