当前位置: 首页 > Web前端 > HTML

迁移SmartDialog到4.0:一份真诚的迁移笔记

时间:2023-03-28 19:13:15 HTML

鍓嶈█flutter_smart_dialog鐩稿叧鍦板潃锛歱ub,github,webeffect鏄竴涓紑婧愬簱锛岄殢鐫€涓嶆柇鐨勮凯浠d紭鍖栵紝闅惧厤浼氶亣鍒颁竴涓緢铔嬬柤鐨勯棶棰樻渶鍒濈殑璁捐涓嶆槸寰堝悎鐞嗭細寰堝鎯冲姞鍏ョ殑鏂板姛鑳介兘琚檺鍒朵簡杩欎釜鎯虫硶涓轰簡璁╁簱鏇村己澶у仴澹紝蹇呴』瑕佸仛涓€娆¢噸鏋勶紝鍥犱负閲嶆瀯娑夊強鍒版毚闇茬殑API锛屾墍浠ュぇ瀹朵細閬囧埌涓€涓瘮杈冪儲浜虹殑闂锛氭洿鏂扮増鏈悗锛屼細鎶ュぇ闈㈢Н鐨勯敊璇€傛垜鎯充簡寰堜箙銆傚浣曞府鍔╂偍蹇€熻縼绉伙紵鏈€鍚庯紝鎴戞兂鍑轰簡涓€涓悎鐞嗙殑瑙e喅鏂规銆俧lutter_smart_dialog4.0鐨勬敼鍔紝涓昏鏄负浜嗚В鍐充箣鍓嶆病鏈夋兂鍒扮殑鍘嗗彶閬楃暀闂銆傝繖涓簱鐨勫垵琛蜂富瑕佹槸涓轰簡瑙e喅鍔犺浇鍜屽璇濈┛閫忕殑闂锛涚幇鍦ㄦ墿灞曚负锛欳ustomdialog銆乤ttachdialog銆乴oading銆乼oast锛屾渶鍒濈殑璁捐纭疄涓嶅锛宑onfig涓殑API寰堥毦鎺у埗缁嗗垎鐨勮繖鍥涗釜妯″潡鐨勫姛鑳斤紝涓€浜涘弬鏁扮殑璁捐鍩虹涔熶笉鍚堢悊鍏充簬鐩墠鐨勫姛鑳藉拰鍦烘櫙绛夛紝甯屾湜澶у鑳界悊瑙f垜涓轰粈涔堣閲嶆瀯馃ズ锛屾垜缁濆涓嶆槸鐬庢悶馃ズ蹇€熻縼绉绘寚鍗楀吋瀹笰PI锛堝繀濉級猸愶笍璇存槑show鏂规硶蹇€熷吋瀹筍martDialog.compatible.show();SmartDialog.compatible.showAttach();SmartDialog銆俢ompatible.showLoading();SmartDialog.compatible.showToast();config蹇€熷吋瀹筍martDialog.compatible.config;娣诲姞鍏煎鐨勪腑闂村彉閲忓彲浠ュ揩閫熷吋瀹瑰悇绉嶅凡缁忔敼鍙樼殑鍙傛暟銆傚揩閫熸搷浣滀娇鐢ㄥ叏灞€鏇挎崲鍔熻兘蹇€熻縼绉伙細SmartDialog.show-->SmartDialog.compatible.showMac:command+shift+rWindows:ctrl+shift+rConfig:SmartDialog.config--->SmartDialog.compatible.configMac:command+shift+rWindows:ctrl+shift+r鍙傛暟鍒犻櫎锛堝繀椤伙級猸愶笍4.0鐗堝垹闄ゅ皯閲忓弬鏁版柟娉曡鏄巗howLoading(...)鍒犻櫎鍚庡彴鍙傛暟锛坈ompatible涓庢鍙傛暟涓嶅吋瀹癸級showToast(...)鍒犻櫎瀵归綈鍙傛暟锛堝吋瀹逛笌姝ゅ弬鏁颁笉鍏煎锛塻howAttach(...)鍒犻櫎楂樹寒鍙傛暟锛堜笌姝ゅ弬鏁板吋瀹癸級鍒犻櫎杩欎簺鍙傛暟锛屽垵濮嬪寲鑷畾涔夋椂鍔犺浇鍜屽悙鍙革紝闇€瑕佸仛涓€鐐硅皟鏁磛oidmain()=>runApp(MyApp());classMyAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(home:HomePage,//herenavigatorObservers:[FlutterSmartDialog.observer],//herebuilder:FlutterSmartDialog.init(//榛樿鍚愬徃灏忛儴浠秚oastBuilder:(Stringmsg)=>CustomToastWidget(msg:msg),//榛樿鍔犺浇灏忛儴浠秎oadingBuilder:(Stringmsg)=>CustomLoadingWidget(msg:鍛崇簿),),);}}璇存槑涓€涓嬶紝鍙傛暟background鍜宎lignment鐪熺殑娌′粈涔堢敤锛岃€屼笖浣跨敤棰戠巼澶綆浜嗐€備竴鑸兘鏄嚜瀹氫箟鐨則oast鍜宭oading鏍峰紡锛屼綘鎯虫€庝箞鐢诲氨鎬庝箞鐢伙紱濡傛灉鍙槸浣跨敤toast鍜宭oading锛岃繖涓や釜鍙傛暟鏃犳硶瀹炵幇寰堝己鐨勮嚜瀹氫箟鏁堟灉锛屽お绻佺悙锛屽彧闇€閫氳繃涓婇潰鍏煎鐨凙PI鍜屽弬鏁扮Щ闄ゅ垹闄ゅ弬鏁板悕鏇存敼锛堝彲閫夛級锛屽氨鍙互瀹屽叏杩佺Щ鍙傛暟鍚嶄簡鎴戜細change杩欓噷瀹屽叏鍐欎笅鏉ワ紝鍙互鎸夌収鍘熸潵鐨勫弬鏁板悕鏀瑰弬鏁板悕銆倃idgetbuilder锛氬榻愯矾鐢卞璇濇鍙傛暟锛堣瑙佷笅鏂嘼uilder鍙傛暟璇存槑锛塱sLoading/isLoadingTempanimationType锛氭柟渚垮悗鏈熸墿灞曞悇绉嶅姩鐢荤被鍨媔sPenetrate/isPenetrateTempusePenetrate:true(鐐瑰嚮浜嬩欢浼氱┛閫忚儗鏅?,false(涓嶇┛閫?isUseAnimation/isUseAnimationTempuseAnimation:true(浣跨敤鍔ㄧ敾),false(涓嶄娇鐢?clickBgDismiss/clickBgDismissTempclickMaskDismiss:true(鐐瑰嚮閬僵鍚庯紝鍏抽棴瀵硅瘽妗?,false锛堜笉鍏抽棴锛塧nimationDuration/animationDurationTempanimationTime锛氬姩鐢绘椂闀縜lignmentTempalignment锛氭帶鍒跺脊绐椾綅缃甿askColorTempmaskColor锛氶伄缃╅鑹瞞askWidgetTempmaskWidget锛氶珮搴﹀彲瀹氬埗鐨勯伄缃ヾebounceTempdebounce锛氶槻鎶栧姛鑳絫ime(showToast)displayTime锛歵oast绫诲瀷鏄剧ず鐨勬椂闂?showToast))displayType:toast鏄剧ず閫昏緫鐨勫悇绫籦uilder鍙傛暟璇存槑(閲嶈)4.0鐗堟湰瀵硅嚜瀹氫箟鎺т欢鍙傛暟鍋氫簡寰堝ぇ鏀瑰姩鏃х増鏈琒martDialog.show(widget:Container(height:80,width:180,decoration:BoxDecoration(color:棰滆壊.black,borderRadius:BorderRadius.circular(10),),alignment:Alignment.center,child:Text('easycustomdialog',style:TextStyle(color:Colors.white),),),),);鐗堟湰4.0SmartDialog.show(builder:(context){returnContainer(height:80,width:180,decoration:BoxDecoration(color:Colors.black,borderRadius:BorderRadius.circular(10),),alignment:Alignment.center,child:Text('easycustomdialog',style:TextStyle(color:Colors.white),),);});铏界劧杩欎釜鏀瑰姩浼氳浣跨敤璧锋潵鏈夌偣楹荤儲锛屼絾鏄嵈鏈夌潃闈炲父閲嶈鐨勬剰涔夈€傞鍏堬紝瀹冧笌璺敱瀵硅瘽妗嗙殑api瀵归綈銆傝矾鐢卞璇濇鐨勮嚜瀹氫箟鎺у埗鍙傛暟涔熸槸涓€涓猙uilder锛岀劧鍚庤В鍐充簡鑷畾涔夊璇濇鏈韩鍔ㄦ€佸埛鏂扮殑闂锛氳嚜瀹氫箟甯冨眬鏈変竴涓猅extField銆傚綋閿洏寮瑰嚭鏃讹紝瀹冧細鑷姩瀹氫箟瀵硅瘽妗嗗竷灞€浠ュ姩鎬佽皟鏁磋窛绂伙紙闇€瑕佷娇鐢ㄧ浉搴旂殑灏忛儴浠讹級銆?.0鐗堟湰鏈変竴涓己澶х殑鏂癈onfig锛屽彲浠ラ€氳繃config鑾峰彇瀵硅瘽妗嗘槸鍚﹀瓨鍦ㄣ€?/鑷畾涔夊璇濇锛宎ttachorloading锛屾帴鍙d笂鏄惁瀛樺湪SmartDialog.config.isExist;//鎺ュ彛涓婃槸鍚﹀瓨鍦ㄨ嚜瀹氫箟瀵硅瘽妗嗘垨attachSmartDialog.config.isExistDialog;//鎺ュ彛鏄惁瀛樺湪loadingSmartDialog.config.isExistLoading;//鐣岄潰涓婃槸鍚﹀瓨鍦╰oastSmartDialog.config.isExistToast;config鍙互鏇磋缁嗗湴鎺у埗show銆乻howAttach銆乻howLoading銆乻howToast绛夊脊绐椼€係martConfigXxx()鐨勯粯璁ゅ弬鏁伴兘鏄垜缁忚繃娣辨€濈啛铏戝悗璁剧疆鐨勩€傚鏃犵壒娈婅姹傦紝鏃犻渶棰濆璁剧疆銆傚鏋滀笉闇€瑕佽嚜瀹氫箟config鍊硷紝涓嬮潰鐨勫垵濮嬪寲浠g爜涓嶉渶瑕佸啓SmartDialog.config..custom=SmartConfigCustom()..attach=SmartConfigAttach()..loading=SmartConfigLoading()..toast=SmartConfigToast();浣犲彲浠ヨ嚜瀹氫箟config涓殑浠绘剰鍊兼潵婊¤冻鐩稿簲鐨勯渶姹傘€備笅闈㈢殑浠g爜鐢ㄤ簬婕旂ず鑷畾涔夊弬鏁般€傛偍鍙互鏍规嵁闇€瑕佽缃甋martDialog.config..custom=SmartConfigCustom(maskColor:Colors.black.withOpacity(0.35),useAnimation:true,)..attach=SmartConfigAttach(animationType:SmartAnimationType.scale,usePenetrate:false,)..loading=SmartConfigLoading(clickMaskDismiss:false,leastLoadingTime:constDuration(姣:0),)..toast=SmartConfigToast(intervalTime:constDuration(milliseconds:100),displayTime:constDuration(milliseconds:2000),);bindPage琛ㄧず杩欎釜鍙傛暟鐨勬剰鎬濇槸缁戝畾SmartDialog鍒伴〉闈細濡傛灉璺宠浆鍒版煇涓〉闈nSmartDialog灏哠martDialog缁戝畾鍒板綋鍓嶉〉闈細鑷姩闅愯棌骞惰繑鍥炵粦瀹氶〉闈€係martDialog浼氬湪Dialog涓婃樉绀鸿烦椤甸棶棰樸€?.0涔嬪墠鐨勭増鏈彲浠ヤ娇鐢╱seSystem鍙傛暟鏉ヨВ鍐炽€傚湪浣跨敤useSystem鍙傛暟鏃讹紝鍏跺疄璐ㄥ氨鏄互self鍜宒ialog涓鸿浇浣擄紝鍙互鍚堢悊鐨勪笌椤甸潰杩涜浜や簰銆備絾鏄敱浜庡唴缃甦ialog鐨勫悇绉嶉檺鍒讹紝鍦ㄤ娇鐢╱seSystem鏃讹細usePenetrate,tag,KeepSingle,permanent閮借绂佹浣跨敤4.0鐗堟湰寮曞叆鐨刡indPage鐨勯€昏緫锛屽彲浠ラ伩鍏嶃€傞粯璁ゅ惎鐢╱seSystembindPage鏃剁殑鍚勭闄愬埗锛堝彲鍦╟onfig涓厤缃級锛屼篃鍙互鍦ㄤ娇鐢╯how鍜宻howAttach鏃舵墜鍔ㄥ叧闂垨寮€鍚紱鐗规畩涓氬姟鍦烘櫙涓嬶紝鏍规嵁闇€瑕佷娇鐢╞indPage鍜寀seSystem浣跨敤鏁堟灉鍐欎竴涓狣emonstrationdemo锛岃繖鏄脊绐楃殑姝e父椤甸潰璺宠浆鎿嶄綔void_dialogBindPage()async{varindex=0;鍔熻兘锛堬級锛熸樉绀哄璇濇锛泃oNewPage(booluseSystem)async{Get.to((){returnScaffold(appBar:AppBar(title:Text('NewPage${++index}')),body:Container(color:randomColor(),alignment:Alignment.center,child:ElevatedButton(onPressed:()=>showDialog?.call(),child:Text('testbindPage$index'),),),);},闃叉閲嶅:false,);}showDialog=(){SmartDialog.show(builder:(_){returnContainer(width:300,height:170,alignment:Alignment.center,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(20),),child:ElevatedButton(onPressed:()=>toNewPage(false),child:Text('testbindPage$index'),),);});};showDialog();}鐪嬫晥鏋滆瀹炶瘽涓嶄娇鐢╱seSystem鍑芥暟鏁堟灉涓濇粦锛屼絾鏄痓indPage涔熻В鍐充簡寮圭獥璺抽〉鐨勯棶棰橈紝鍚屾椂淇濈暀浜唘sePenetrate锛宼ag锛孠eepSingle鐨勫姛鑳姐€佹案涔呯瓑鎮ㄥ彲浠ユ牴鎹渶瑕佷娇鐢ㄥ叧闂脊绐楁椂鎼哄甫鏁版嵁鐨勫姛鑳姐€傝鍔熻兘涓巉lutter璺敱鍏抽棴锛屾惡甯﹀拰杩斿洖鏁版嵁鐨勫姛鑳藉榻愩€傜湅demo锛氱偣鍑籹howresult鎸夐挳鍏抽棴寮圭獥锛屽皢杈撳叆妗嗕腑鐨勬暟鎹繑鍥瀡oid_dialogCarryResult()async{varresult=awaitSmartDialog.show(builder:(_){varmessage='';returnContainer(width:300,height:170,alignment:Alignment.center,decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(20),),child:Column(mainAxisSize:MainAxisSize.min,鍎跨锛歔瀹瑰櫒锛堝搴︼細100锛岃竟璺濓細EdgeInsets.only锛堝簳閮細30锛夛紝鍎跨锛歍extField锛坥nChanged锛氾紙msg锛?>娑堟伅=msg锛夛紝ElevatedButton锛坥nPressed锛氾紙锛?>SmartDialog.dismiss锛堢粨鏋滐細娑堟伅)锛屽瓙锛氭枃鏈?'鏄剧ず缁撴灉'),)]),);});SmartDialog.showToast("$result");}鏁堟灉PermanentDialog璁剧疆permanent鍙傛暟涓簍rue锛屾墦寮€鐨刣ialog浼氬彉鎴愭案涔卍ialog锛屾鏋跺唴閮ㄧ殑鎵€鏈夌壒鍐欐搷浣滐紙returnevent,routingpop,clickmask,绛夛級浼氬け鏁堬紝鍙兘鎵嬪姩绂佺敤璇ュ姛鑳斤紝璇风粨鍚堝疄闄呬笟鍔″満鏅娇鐢紝涓嶈婊ョ敤鎵撳紑姘镐箙瀵硅瘽妗哠martDialog.show(permanent:true,usePenetrate:true,builder:(_)=>Container(width:150,height:150,color:Colors.black),);鍏抽棴姘镐箙鍖杁ialogSmartDialog.dismiss(force:true);鏉ョ湅涓媎emovoid_dialogPermanent()async{openPermanentDialog(){SmartDialog.show(permanent:true,alignment:Alignment.centerRight,usePenetrate:true,clickMaskDismiss:false,builder:(_){returnContainer(width:150,height:double.鏃犵┓澶э紝瀵归綈锛欰lignment.center锛岃楗帮細BoxDecoration锛堥鑹诧細Colors.white锛宐orderRadius锛欱orderRadius.only锛坱opLeft锛歊adius.circular锛?0锛夛紝bottomLeft锛歊adius.circular锛?0锛夛紝锛夛紝boxShadow锛歔BoxShadow锛坈olor:Colors.grey,blurRadius:8,spreadRadius:0.2)],),child:Text('permanentdialog'),);},);}SmartDialog.show(builder:(_){杩斿洖Con瀹瑰櫒锛堝搴︼細300锛岄珮搴︼細170锛屽榻愭柟寮忥細Alignment.center锛岃楗帮細BoxDecoration锛堥鑹诧細Colors.white锛宐orderRadius锛欱orderRadius.circular锛?0锛夛紝锛夛紝瀛╁瓙锛歐rap锛堥棿璺濓細20锛屽瀛愶細[ElevatedButton锛坥nPressed:()=>openPermanentDialog(),child:Text('open'),),ElevatedButton(onPressed:()=>SmartDialog.dismiss(force:true),child:Text('close'),)])澶嶅埗浠g爜,);});}鏁堟灉锛氬彲浠ョ湅鍒皃op璺敱锛岀偣鍑籱ask鍜宺eturn浜嬩欢锛屼笉鑳藉叧闂璸ermanentdialogminimumloadingtime銆俢onfig涓璴oading涓湁涓€涓猯eastLoadingTime鍙傛暟锛屽彲浠ユ帶鍒舵渶鐭姞杞芥椂闂淬€傝繖涓姛鑳芥槸涓轰簡瑙e喅鎺ュ彛璇锋眰閫熷害杩囧揩锛屽鑷磍oading寮圭獥涓€闂€岃繃鐨勯棶棰樸€備娇鐢細璇风粨鍚堝疄闄呬笟鍔″満鏅负璇ュ弬鏁拌缃悎閫傜殑鏁版嵁銆俵eastLoadingTime鐨勯粯璁ゅ€间负0绉掋€傝繖閲屽彧鏄负浜嗘紨绀猴紝鐒跺悗鍦ㄨ繖閲岄噸鏂拌祴鍊肩粰config.loading锛屼竴鑸缓璁湪app鍒濆鍖栦綅缃缃弬鏁皊howLoading()鍚庣珛鍗宠皟鐢╠ismiss锛宭oading浼氶棯杩囧苟璁剧疆leastLoadingTime涓?绉掞紝loading浼氬己鍒剁瓑寰呬袱绉抎ismiss鐢熸晥void_loadingLeastTime()async{SmartDialog.config.loading=SmartConfigLoading(leastLoadingTime:constDuration(seconds:2),);鏅鸿兘瀵硅瘽妗?showLoading();SmartDialog.dismiss();SmartDialog.config.loading=SmartConfigLoading();}鏁堟灉杩炵画鍚愬徃鏄剧ず闂撮殧鏃堕棿杩炵画鏄剧ず澶氫釜鍚愬徃鏃讹紝涓婁竴涓悙鍙稿拰涓嬩竴涓悙鍙镐笉鏄剧ず闂撮殧鏃堕棿锛岀湅鏍峰瓙鏈夌偣绐佸厐銆傝繖閲屽湪SmartConfigToast涓鍔犱簡涓€涓猧ntervalTime鍙傛暟鏉ユ帶鍒舵椂闂撮棿闅斻€傞粯璁ょ殑intervalTime宸茬粡鏄竴涓悎鐞嗙殑鍙傛暟銆傚鏋滀笉鏄繀椤荤殑锛屾渶濂戒笉瑕佹敼锛岀湅鐪嬫晥鏋溿€傚彧鏄负浜嗘紨绀猴紝灏唅ntervalTime鐨勫€艰缃緱绋嶅井澶т竴浜泇oid_toastIntervalTime()async{SmartDialog.config.toast=SmartConfigToast(intervalTime:constDuration(milliseconds:800),);瀵逛簬(vari=0;i<3;i++){SmartDialog.showToast("toast$i").then((value){if(!SmartDialog.config.isExistToast){SmartDialog.config.toast=SmartConfigToast();}});}}鏁堟灉鍥炬€荤粨SmartDialog4.0鏄竴涓潪甯搁噸瑕佺殑鐗堟湰锛屾爣蹇楃潃SmartDialog鐨勫憡鍒€傜粡杩囪繖娆¢噸鏋勶紝鎴戜篃鏈変俊蹇冨幓闈㈠鏇村鏉傜殑涓氬姟鍦烘櫙锛岃繘琛屽悇绉嶆墿灞曘€傝繖娆¢噸鏋勬垜鍋氫簡寰堝鎬濊€冿紝闈炲父鎰熻阿澶у缁欐垜鐨勫缓璁€傝繖绫婚棶棰橈紝浣犲惎鍙戜簡鎴戯紒