Flutter for OpenHarmony 实战随机抽签应用设计与实现欢迎加入开源鸿蒙跨平台社区开源鸿蒙跨平台开发者社区文章目录Flutter for OpenHarmony 实战随机抽签应用设计与实现前言一、抽签算法实现1.1 基础随机选择1.2 多次抽签1.3 权重抽签二、候选人管理2.1 添加候选人2.2 批量导入2.3 删除候选人三、抽签动画3.1 滚动动画3.2 结果对话框四、UI界面设计4.1 主界面布局4.2 候选人列表4.3 控制按钮五、历史记录5.1 记录存储5.2 历史显示六、设置功能6.1 动画时长6.2 音效开关七、数据持久化7.1 保存数据7.2 加载数据总结前言随机抽签应用是一个实用的工具类应用广泛应用于抽奖、分组、决策等场景。本文将详细介绍随机抽签算法、候选人管理、动画效果实现、结果历史记录以及UI交互设计。一、抽签算法实现1.1 基础随机选择classLotterySystem{ListStringcandidates[];StringdrawWinner(){if(candidates.isEmpty){return;}finalrandomRandom();finalindexrandom.nextInt(candidates.length);returncandidates[index];}}使用Random().nextInt()生成随机索引从候选人列表中选择一个。1.2 多次抽签ListStringdrawMultiple(int count){if(countcandidates.length){throwException(抽签数量超过候选人数量);}finalselectedString[];finalavailableListString.from(candidates);for(int i0;icount;i){finalrandomRandom();finalindexrandom.nextInt(available.length);selected.add(available[index]);available.removeAt(index);}returnselected;}支持一次抽取多个不重复的候选人。1.3 权重抽签classWeightedCandidate{finalStringname;finalint weight;WeightedCandidate({requiredthis.name,requiredthis.weight});}StringdrawWeighted(ListWeightedCandidatecandidates){finaltotalWeightcandidates.fold(0,(sum,c)sumc.weight);finalrandomRandom();finalrandomValuerandom.nextInt(totalWeight);int currentWeight0;for(varcandidateincandidates){currentWeightcandidate.weight;if(randomValuecurrentWeight){returncandidate.name;}}returncandidates.last.name;}根据权重进行抽签权重越高被抽中的概率越大。二、候选人管理2.1 添加候选人voidaddCandidate(Stringname){if(name.trim().isEmpty){return;}if(candidates.contains(name)){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text(该候选人已存在)),);return;}setState((){candidates.add(name);});}添加候选人时检查重复和空名称。2.2 批量导入voidimportCandidates(Stringtext){finallinestext.split(\n);int added0;for(varlineinlines){finalnameline.trim();if(name.isNotEmpty!candidates.contains(name)){candidates.add(name);added;}}ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text(成功导入$added个候选人)),);}支持从文本批量导入候选人每行一个。2.3 删除候选人voidremoveCandidate(Stringname){setState((){candidates.remove(name);});}voidclearAll(){showDialog(context:context,builder:(context)AlertDialog(title:constText(清空候选人),content:constText(确定要清空所有候选人吗),actions:[TextButton(onPressed:()Navigator.pop(context),child:constText(取消),),TextButton(onPressed:(){setState((){candidates.clear();});Navigator.pop(context);},child:constText(确定),),],),);}提供单个删除和清空全部功能。三、抽签动画3.1 滚动动画StringcurrentDisplay;bool isAnimatingfalse;ListStringhistory[];voidstartDrawing()async{if(candidates.isEmpty||isAnimating){return;}isAnimatingtrue;finaldurationconstDuration(milliseconds:2000);finalstartDateTime.now();while(DateTime.now().difference(start)duration){finalrandomRandom();currentDisplaycandidates[random.nextInt(candidates.length)];setState((){});awaitFuture.delayed(constDuration(milliseconds:50));}// 最终结果finalwinnerdrawWinner();currentDisplaywinner;history.add(winner);isAnimatingfalse;setState((){});showResultDialog(winner);}2秒内快速滚动显示候选人名称制造悬念。3.2 结果对话框voidshowResultDialog(Stringwinner){showDialog(context:context,builder:(context)AlertDialog(title:constText(抽签结果),content:Column(mainAxisSize:MainAxisSize.min,children:[constIcon(Icons.celebration,size:64,color:Colors.amber),constSizedBox(height:16),Text(winner,style:constTextStyle(fontSize:32,fontWeight:FontWeight.bold),),],),actions:[TextButton(onPressed:()Navigator.pop(context),child:constText(确定),),],),);}使用对话框展示最终结果带有庆祝图标。四、UI界面设计4.1 主界面布局overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(随机抽签),actions:[IconButton(icon:constIcon(Icons.history),onPressed:showHistory),IconButton(icon:constIcon(Icons.settings),onPressed:showSettings),],),body:Column(children:[Expanded(child:Center(child:Text(currentDisplay,style:Theme.of(context).textTheme.displayLarge,),),),_buildCandidateList(),_buildControlButtons(),],),);}中心显示当前抽签结果下方是候选人列表和控制按钮。4.2 候选人列表Widget_buildCandidateList(){returnContainer(height:200,padding:constEdgeInsets.all(16),child:ListView.builder(itemCount:candidates.length,itemBuilder:(context,index){returnListTile(title:Text(candidates[index]),trailing:IconButton(icon:constIcon(Icons.remove_circle),onPressed:()removeCandidate(candidates[index]),),);},),);}可滚动的候选人列表每个项带删除按钮。4.3 控制按钮Widget_buildControlButtons(){returnPadding(padding:constEdgeInsets.all(16),child:Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:[ElevatedButton.icon(onPressed:isAnimating?null:startDrawing,icon:constIcon(Icons.play_arrow),label:constText(开始抽签),),ElevatedButton.icon(onPressed:()addCandidateDialog(),icon:constIcon(Icons.add),label:constText(添加候选人),),],),);}开始抽签和添加候选人两个主要按钮。五、历史记录5.1 记录存储ListStringhistory[];ListDateTimetimestamps[];voidaddToHistory(Stringwinner){history.add(winner);timestamps.add(DateTime.now());}记录抽签结果和时间戳。5.2 历史显示voidshowHistory(){showDialog(context:context,builder:(context)AlertDialog(title:constText(抽签历史),content:SizedBox(width:double.maxFinite,height:400,child:ListView.builder(itemCount:history.length,itemBuilder:(context,index){finalreversedIndexhistory.length-1-index;returnListTile(title:Text(history[reversedIndex]),subtitle:Text(_formatTime(timestamps[reversedIndex])),leading:Text(${reversedIndex1}),);},),),actions:[TextButton(onPressed:()Navigator.pop(context),child:constText(关闭),),TextButton(onPressed:(){setState((){history.clear();timestamps.clear();});Navigator.pop(context);},child:constText(清空历史),),],),);}显示所有历史记录最新记录在前。六、设置功能6.1 动画时长int animationDuration2000;// 毫秒voidupdateDuration(int duration){setState((){animationDurationduration;});}允许用户调整抽签动画时长。6.2 音效开关bool soundEnabledtrue;voidtoggleSound(){setState((){soundEnabled!soundEnabled;});}控制抽签时是否播放音效。七、数据持久化7.1 保存数据FuturevoidsaveData()async{finalprefsawaitSharedPreferences.getInstance();awaitprefs.setStringList(candidates,candidates);awaitprefs.setStringList(history,history);}使用SharedPreferences保存候选人和历史记录。7.2 加载数据FuturevoidloadData()async{finalprefsawaitSharedPreferences.getInstance();finalsavedCandidatesprefs.getStringList(candidates);finalsavedHistoryprefs.getStringList(history);if(savedCandidates!null){setState((){candidatessavedCandidates;});}if(savedHistory!null){historysavedHistory;}}应用启动时自动加载数据。总结本文详细介绍了随机抽签应用的设计与实现。从随机算法到候选人管理从动画效果到UI设计每个技术点都直接影响应用的功能性和用户体验。通过这些技术的综合应用实现了功能完整且实用的随机抽签应用。