核心内容摘要
寻觅快乐的蛛丝马迹：ww,我的快乐到底藏在哪了？
我喜欢的音乐是用户收藏歌曲的专属歌单用户可以在这里找到所有标记为喜欢的歌曲。
本篇将详细介绍如何实现我喜欢的音乐页面包括歌单头部设计、排序功能和歌曲操作菜单。
功能分析我喜欢的音乐页面需要实现以下功能渐变封面展示、歌曲数量统计、排序方式选择、歌曲列表展示、喜欢状态切换、歌曲操作菜单。
这个页面是用户管理收藏歌曲的核心入口。
核心技术点本篇涉及的核心技术包括StatelessWidget页面构建、LinearGradient渐变背景、ListView.builder列表构建、showModalBottomSheet底部弹窗、GetX路由导航。
对应代码文件lib/pages/favorite/favorite_page.dart完整代码实现importpackage:flutter/material.dart;importpackage:get/get.dart;classFavoritePageextendsStatelessWidget{constFavoritePage({super.key});overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(我喜欢的音乐),这段代码导入了Flutter核心库和GetX状态管理库。
FavoritePage继承StatelessWidget因为页面状态相对简单。
Scaffold提供基础页面结构AppBar显示我喜欢的音乐标题。
actions:[IconButton(icon:constIcon(Icons.sort),onPressed:()_showSortOptions(context),),IconButton(icon:constIcon(Icons.play_circle_filled),onPressed:(){},),],),body:Column(children:[_buildHeader(),Expanded(child:_buildSongList()),],),);}actions数组添加两个操作按钮排序按钮和播放全部按钮。
排序按钮点击后显示排序选项菜单播放按钮可以直接播放全部喜欢的歌曲。
body使用Column垂直排列头部和列表Expanded让列表占据剩余空间。
Widget_buildHeader(){returnContainer(padding:constEdgeInsets.all(
,child:Row(children:[Container(width:120,height:120,decoration:BoxDecoration(borderRadius:BorderRadius.circular(
,gradient:constLinearGradient(colors:[Color(0xFFE91E
,Color(0xFFFF
],),),child:constIcon(Icons.favorite,size:60,color:Colors.white),),_buildHeader方法构建歌单头部。
封面使用120x120像素的圆角容器LinearGradient创建从粉色到橙色的渐变背景。
中央显示白色爱心图标突出我喜欢的主题。
这种渐变设计让封面更加温暖有活力。
constSizedBox(width:
,constExpanded(child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Text(我喜欢的音乐,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold),),SizedBox(height:
,Text(共 128 首,style:TextStyle(color:Colors.grey),),SizedBox(height:
,Text(最近更新: 今天,style:TextStyle(color:Colors.grey,fontSize:
,),],),),],),);}封面右侧使用Column垂直排列歌单信息。
crossAxisAlignment设为start让文字左对齐。
显示歌单名称、歌曲总数和最近更新时间让用户快速了解歌单的基本情况。
Expanded让信息区域占据剩余宽度。
Widget_buildSongList(){finalsongsList.generate(20,(i){title:喜欢的歌曲${i1},artist:歌手${i%51},album:专辑${i%31},});returnListView.builder(itemCount:songs.length,itemBuilder:(context,index){finalsongsongs[index];returnListTile(leading:Container(width:50,height:50,_buildSongList方法构建歌曲列表。
List.generate生成20首模拟歌曲数据实际项目中应从数据库或API获取。
ListView.builder采用懒加载方式构建列表只渲染可见区域的列表项性能更好。
decoration:BoxDecoration(color:Colors.primaries[index%Colors.primaries.length].withOpacity(
0.
,borderRadius:BorderRadius.circular(
,),child:constIcon(Icons.music_note,color:Colors.white),),title:Text(song[title]!,maxLines:1,overflow:TextOverflow.ellipsis,),subtitle:Text(${song[artist]} - ${song[album]},style:constTextStyle(color:Colors.grey,fontSize:
,),leading放置歌曲封面使用50x50像素的圆角容器。
背景色从primaries颜色列表循环取值让每首歌有不同的颜色。
title显示歌曲名称maxLines限制一行overflow设置溢出显示省略号。
subtitle显示歌手和专辑信息。
trailing:Row(mainAxisSize:MainAxisSize.min,children:[IconButton(icon:constIcon(Icons.favorite,color:Color(0xFFE91E
,size:20,),onPressed:(){},),IconButton(icon:constIcon(Icons.more_vert,size:
,onPressed:()_showSongOptions(context),),],),onTap:(){},);},);}trailing放置操作按钮区域。
Row使用mainAxisSize.min让宽度自适应内容。
喜欢按钮显示粉色实心爱心表示已喜欢状态。
更多按钮点击后显示操作菜单。
onTap处理列表项点击可以跳转到播放器页面。
void_showSortOptions(BuildContextcontext){showModalBottomSheet(context:context,backgroundColor:constColor(0xFF1E1E1E),builder:(context)Column(mainAxisSize:MainAxisSize.min,children:[constPadding(padding:EdgeInsets.all(
,child:Text(排序方式,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold),),),_showSortOptions方法显示排序选项菜单。
showModalBottomSheet创建底部弹窗backgroundColor设置深色背景。
Column使用mainAxisSize.min让高度自适应内容。
顶部显示排序方式标题。
ListTile(leading:constIcon(Icons.access_time),title:constText(按添加时间),onTap:()Get.back(),),ListTile(leading:constIcon(Icons.sort_by_alpha),title:constText(按歌曲名),onTap:()Get.back(),),ListTile(leading:constIcon(Icons.person),title:constText(按歌手),onTap:()Get.back(),),constSizedBox(height:
,],),);}提供三种排序方式按添加时间、按歌曲名、按歌手。
每个选项使用ListTile构建leading显示图标title显示文字。
点击后调用Get.back()关闭弹窗。
实际项目中需要在点击后执行排序逻辑并刷新列表。
void_showSongOptions(BuildContextcontext){showModalBottomSheet(context:context,backgroundColor:constColor(0xFF1E1E1E),builder:(context)Column(mainAxisSize:MainAxisSize.min,children:[ListTile(leading:constIcon(Icons.playlist_add),title:constText(添加到歌单),onTap:()Get.back(),),ListTile(leading:constIcon(Icons.download),title:constText(下载),onTap:()Get.back(),),_showSongOptions方法显示歌曲操作菜单。
菜单包含添加到歌单、下载、分享和取消喜欢四个选项。
每个选项使用ListTile构建点击后关闭弹窗并执行对应操作。
ListTile(leading:constIcon(Icons.share),title:constText(分享),onTap:()Get.back(),),ListTile(leading:constIcon(Icons.delete,color:Colors.red),title:constText(取消喜欢,style:TextStyle(color:Colors.red)),onTap:()Get.back(),),constSizedBox(height:
,],),);}}取消喜欢选项使用红色图标和文字提醒用户这是移除操作。
点击后应该弹出确认对话框避免用户误操作。
SizedBox在底部添加间距让菜单看起来更舒适。
渐变封面设计封面使用LinearGradient创建渐变背景从粉色(E91E
过渡到橙色(FF
。
这种暖色调渐变配合爱心图标很好地表达了喜欢的主题。
borderRadius.circular(
让封面呈圆角矩形视觉效果更加柔和。
ListView.builder列表构建ListView.builder是构建长列表的最佳选择它采用懒加载方式只构建可见区域的列表项。
itemCount指定列表项总数itemBuilder构建每个列表项。
这种方式比直接使用ListView.children性能更好特别是当列表项很多时。
ListTile列表项组件ListTile是Flutter提供的标准列表项组件包含leading、title、subtitle、trailing四个区域。
leading通常放置图标或头像title显示主要文字subtitle显示辅助信息trailing放置操作按钮。
使用ListTile可以快速构建规范的列表界面。
showModalBottomSheet底部弹窗showModalBottomSheet用于显示底部弹出菜单是移动端常见的交互方式。
backgroundColor设置弹窗背景色builder构建弹窗内容。
弹窗会自动处理手势关闭也可以通过Get.back()或Navigator.pop()手动关闭。
小结本篇实现了音乐播放器的我喜欢的音乐页面。
通过渐变封面和爱心图标突出喜欢的主题ListView.builder高效构建歌曲列表底部弹窗提供排序和歌曲操作功能。
这种设计模式在音乐App中非常常见用户可以方便地管理自己收藏的歌曲。
欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net