核心内容摘要
ERNIE-4.5-0.3B-PT模型监控方案：Prometheus+Grafana看板搭建
创建歌单是音乐播放器中一个基础但重要的功能。
用户可以创建自己的歌单来整理和收藏喜欢的音乐。
本篇文章将详细介绍如何实现一个简洁实用的创建歌单页面包括封面上传、名称输入、隐私设置等功能。
页面基础结构创建歌单页面使用StatefulWidget因为需要管理输入框内容和开关状态。
importpackage:flutter/material.dart;importpackage:get/get.dart;classCreatePlaylistPageextendsStatefulWidget{constCreatePlaylistPage({super.key});overrideStateCreatePlaylistPagecreateState()_CreatePlaylistPageState();}页面继承自StatefulWidget使用GetX进行路由管理。
创建歌单的交互相对简单但需要响应用户的输入和开关操作。
状态变量定义页面需要管理输入控制器和隐私开关状态。
class_CreatePlaylistPageStateextendsStateCreatePlaylistPage{final_nameControllerTextEditingController();bool _isPrivatefalse;overridevoiddispose(){_nameController.dispose();super.dispose();}_nameController用于控制歌单名称输入框_isPrivate标识歌单是否设为私密。
在dispose方法中释放控制器资源这是Flutter开发中的标准做法。
AppBar设计AppBar包含标题和完成按钮。
overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(创建歌单),actions:[TextButton(onPressed:()_createPlaylist(),child:constText(完成,style:TextStyle(color:Color(0xFFE91E
),),),],),完成按钮使用主题色放在AppBar右侧。
点击后调用_createPlaylist方法提交创建请求。
这种设计符合用户的操作习惯。
页面主体布局页面主体使用Padding包裹Column垂直排列各个组件。
body:Padding(padding:constEdgeInsets.all(
,child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[_buildCoverPicker(),constSizedBox(height:
,_buildNameInput(),constSizedBox(height:
,_buildPrivacySwitch(),],),),);}页面包含三个主要部分封面选择、名称输入和隐私设置。
使用SizedBox控制各部分之间的间距。
封面选择组件封面选择区域居中显示点击可以选择图片。
Widget_buildCoverPicker(){returnCenter(child:GestureDetector(onTap:()_pickCoverImage(),child:Container(width:120,height:120,decoration:BoxDecoration(borderRadius:BorderRadius.circular(
,color:constColor(0xFF1E1E1E),),child:constColumn(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.add_photo_alternate,size:40,color:Colors.grey),SizedBox(height:
,Text(添加封面,style:TextStyle(color:Colors.grey,fontSize:
),],),),),);}封面容器使用深色背景圆角设置为12。
内部垂直排列图标和文字提示用户点击添加封面。
GestureDetector包裹整个容器扩大点击区域。
选择封面图片点击封面区域后调用图片选择方法。
void_pickCoverImage()async{// 实际项目中使用image_picker插件Get.bottomSheet(Container(decoration:constBoxDecoration(color:Color(0xFF1E1E1E),borderRadius:BorderRadius.vertical(top:Radius.circular(
),),child:Column(mainAxisSize:MainAxisSize.min,children:[ListTile(leading:constIcon(Icons.camera_alt),title:constText(拍照),onTap:(){Get.back();Get.snackbar(提示,相机功能开发中);},),ListTile(leading:constIcon(Icons.photo_library),title:constText(从相册选择),onTap:(){Get.back();Get.snackbar(提示,相册功能开发中);},),constSizedBox(height:
,],),),);}使用底部菜单提供拍照和从相册选择两个选项。
实际项目中需要使用image_picker插件来实现真正的图片选择功能。
名称输入组件歌单名称输入区域包含标签和输入框。
Widget_buildNameInput(){returnColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(歌单名称,style:TextStyle(fontWeight:FontWeight.bold),),constSizedBox(height:
,TextField(controller:_nameController,decoration:InputDecoration(hintText:请输入歌单名称,filled:true,fillColor:constColor(0xFF1E1E1E),border:OutlineInputBorder(borderRadius:BorderRadius.circular(
,borderSide:BorderSide.none,),),),],);}输入框使用深色填充背景无边框设计。
hintText提示用户输入内容。
圆角与封面容器保持一致视觉上更加协调。
隐私设置开关使用SwitchListTile实现隐私设置。
Widget_buildPrivacySwitch(){returnSwitchListTile(title:constText(设为私密),subtitle:constText(私密歌单仅自己可见),value:_isPrivate,onChanged:(v)setState(()_isPrivatev),activeColor:constColor(0xFFE91E
,contentPadding:EdgeInsets.zero,);}SwitchListTile集成了标题、副标题和开关非常适合这种设置项。
activeColor设置为主题色contentPadding设为零与其他组件对齐。
创建歌单方法点击完成按钮后执行创建逻辑。
void_createPlaylist(){finalname_nameController.text.trim();if(name.isEmpty){Get.snackbar(提示,请输入歌单名称,snackPosition:SnackPosition.BOTTOM,backgroundColor:Colors.red.withOpacity(
0.
,colorText:Colors.white,);return;}// 模拟创建歌单Get.back(result:{name:name,isPrivate:_isPrivate,});Get.snackbar(成功,歌单创建成功,snackPosition:SnackPosition.BOTTOM,backgroundColor:Colors.green.withOpacity(
0.
,colorText:Colors.white,);}首先验证歌单名称是否为空为空时显示错误提示。
创建成功后返回上一页并传递创建结果同时显示成功提示。
输入验证增强可以添加更多的输入验证规则。
bool_validateInput(){finalname_nameController.text.trim();if(name.isEmpty){_showError(请输入歌单名称);returnfalse;}if(name.length
{_showError(歌单名称不能超过40个字符);returnfalse;}// 检查是否包含特殊字符finalregexRegExp(r[\\/|?*]);if(regex.hasMatch(name)){_showError(歌单名称不能包含特殊字符);returnfalse;}returntrue;}void_showError(Stringmessage){Get.snackbar(提示,message,snackPosition:SnackPosition.BOTTOM,backgroundColor:Colors.red.withOpacity(
0.
,colorText:Colors.white,);}验证规则包括非空检查、长度限制和特殊字符检查。
将错误提示抽取为独立方法避免代码重复。
歌单描述输入可以添加歌单描述输入框。
Widget_buildDescriptionInput(){returnColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(歌单简介,style:TextStyle(fontWeight:FontWeight.bold),),constSizedBox(height:
,TextField(controller:_descController,maxLines:4,maxLength:200,decoration:InputDecoration(hintText:介绍一下这个歌单吧选填,filled:true,fillColor:constColor(0xFF1E1E1E),border:OutlineInputBorder(borderRadius:BorderRadius.circular(
,borderSide:BorderSide.none,),),),],);}描述输入框设置maxLines为4允许多行输入。
maxLength限制最大字符数输入框会自动显示字符计数。
标签选择功能可以为歌单添加标签。
finalListString_availableTags[流行,摇滚,民谣,电子,古典,爵士,RB,说唱];finalSetString_selectedTags{};Widget_buildTagSelector(){returnColumn(crossAxisAlignment:CrossAxisAlignment.start,children:[constText(歌单标签,style:TextStyle(fontWeight:FontWeight.bold),),constSizedBox(height:
,Wrap(spacing:8,runSpacing:8,children:_availableTags.map((tag){finalisSelected_selectedTags.contains(tag);returnGestureDetector(onTap:(){setState((){if(isSelected){_selectedTags.remove(tag);}elseif(_selectedTags.length
{_selectedTags.add(tag);}else{Get.snackbar(提示,最多选择3个标签);}});},child:Chip(label:Text(tag),backgroundColor:isSelected?constColor(0xFFE91E
:constColor(0xFF1E1E1E),labelStyle:TextStyle(color:isSelected?Colors.white:Colors.grey,),),);}).toList(),),],);}使用Wrap组件实现流式布局标签会自动换行。
选中的标签使用主题色背景限制最多选择3个标签。
封面预览选择封面后显示预览。
String?_coverPath;Widget_buildCoverPreview(){returnCenter(child:GestureDetector(onTap:()_pickCoverImage(),child:Container(width:120,height:120,decoration:BoxDecoration(borderRadius:BorderRadius.circular(
,color:constColor(0xFF1E1E1E),image:_coverPath!null?DecorationImage(image:FileImage(File(_coverPath!)),fit:BoxFit.cover,):null,),child:_coverPathnull?constColumn(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.add_photo_alternate,size:40,color:Colors.grey),SizedBox(height:
,Text(添加封面,style:TextStyle(color:Colors.grey,fontSize:
),],):Stack(children:[Positioned(right:4,top:4,child:Container(padding:constEdgeInsets.all(
,decoration:constBoxDecoration(color:Colors.black54,shape:BoxShape.circle,),child:constIcon(Icons.edit,size:16,color:Colors.white),),),],),),),);}如果已选择封面使用DecorationImage显示图片右上角显示编辑图标。
未选择时显示添加提示。
加载状态处理创建歌单时显示加载状态。
bool _isLoadingfalse;void_createPlaylist()async{if(!_validateInput())return;setState(()_isLoadingtrue);try{// 模拟网络请求awaitFuture.delayed(constDuration(seconds:
);Get.back(result:{name:_nameController.text.trim(),isPrivate:_isPrivate,tags:_selectedTags.toList(),});Get.snackbar(成功,歌单创建成功);}catch(e){Get.snackbar(错误,创建失败请重试);}finally{if(mounted){setState(()_isLoadingfalse);}}}创建过程中设置_isLoading为true完成后恢复。
使用try-catch处理可能的错误finally确保状态恢复。
完成按钮状态根据加载状态和输入内容控制按钮状态。
Widget_buildSubmitButton(){returnTextButton(onPressed:_isLoading||_nameController.text.trim().isEmpty?null:()_createPlaylist(),child:_isLoading?constSizedBox(width:20,height:20,child:CircularProgressIndicator(strokeWidth:2,valueColor:AlwaysStoppedAnimationColor(Color(0xFFE91E
),),):constText(完成,style:TextStyle(color:Color(0xFFE91E
),),);}加载中显示CircularProgressIndicator名称为空时按钮禁用。
这种设计提供了清晰的状态反馈。
总结创建歌单页面虽然功能相对简单但涉及到表单输入、状态管理、输入验证等多个Flutter开发中的常见场景。
通过合理的组件拆分和状态管理让代码结构清晰、易于维护。
在实际项目中还需要对接后端接口实现真正的歌单创建功能以及使用image_picker等插件实现图片选择。
欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net