涓嶈杞荤巼鐨勮瘎浠锋垜锛屼綘鍙煡閬撴垜鐨勫悕瀛楋紝鍗翠笉鐭ラ亾鎴戠殑鏁呬簨锛屼綘鍙煡閬撴垜鍋氫簡浠€涔堬紝鍗翠笉鐭ラ亾鎴戠粡鍘嗕簡浠€涔堛€備織璇濊锛屼竴鍝佷笁瀹濓紝寮圭獥娴眰鍔犲紩瀵笺€備笂鍥炬槸鎴戝叕鍙窤PP榛戞澘涓殑鍙ｇ畻妯″潡銆傜浉淇℃瘡涓猘pp寮€鍙戝湪宸ヤ綔涓兘浼氶亣鍒拌繖绉嶅満鏅€備负閬垮厤鐢ㄦ埛瀵规柊鍔熻兘浜х敓娣锋穯锛岄儴鍒嗗姛鑳戒細澧炲姞涓€浜涘紩瀵兼搷浣溿€傚湪鍘熺敓寮€鍙戜腑锛屾瘮濡侫ndroid寮€鍙戯紝鎴戜滑鍙互浣跨敤NewbieGuide绛夊紑婧愬簱鏉ュ疄鐜般€備絾涓嶅垢鐨勬槸锛屾垜鍦―art鍖呬腑杩涜浜嗘悳绱紝浣嗕竴鏃犳墍鑾枫€備絾鏄垜浠繕鏄緢蹇В鍐充簡闂銆傛棦鐒惰В鍐充笉浜嗛棶棰橈紝灏辫瀛︿細璁╄繖涓棶棰樹笉瀛樺湪銆傝繖涓椂鍊欏紑鍙戝疂鐗╁氨鐗瑰埆鏈夌敤浜嗐€傛湰绡囧埌姝ょ粨鏉燂紝涓嬫湡瑙侌煈媬~~寮€涓帺绗戙€備竴涓暍浜庣洿闈㈡儴娣＄敓娲伙紝鏁簬鐩撮潰婊磋鐨勫ぇ姹夛紝宀傛槸涓€涓佺偣闇€瑕佸氨鑳芥墦璐ユ垜浠殑銆傛帴涓嬫潵鎴戜滑寮€濮嬫€濊€冨浣曞疄鐜拌繖涓紩瀵兼搷浣溿€傜浉淇″ぇ瀹舵帴鍒拌繖涓渶姹傞鍏堟兂鍒扮殑鏄紝杩欎釜涓滆タ涓嶅氨鏄妸鏁翠釜椤甸潰璐翠笂涓€灞傞伄缃╋紝鐒跺悗鍦ㄤ腑闂村壀鎺変竴鍧椼€傚彧闇€鍦ㄦ湯灏炬坊鍔犱竴浜涙枃鏈拰涓嬩竴姝ユ寜閽€傚鏋滀綘鎶婅繖涓渶姹傛兂鐨勮繖涔堢畝鍗曪紝閭ｄ綘灏辩湡鐨勫浜嗐€傞偅涔堟垜浠氨鎸夌収涓婇潰璇寸殑涓変釜姝ラ鏉ュ疄鐜拌繖涓笢瑗裤€傚綋鐒讹紝濡傛灉浣犱笉鎯崇户缁線涓嬬湅锛屼篃鍙互鐩存帴鐐硅繖閲屼娇鐢ㄦ垜浠紑鍙戠殑鍚姩缁勪欢搴擄紝鍦ㄤ綘鐨凢lutter宸ョ▼涓揩閫熸帴鍏ュ惎鍔ㄥ姛鑳姐€傞偅涔堝浣曞湪Flutter椤甸潰涓婅鐩栦竴涓诞灞傚憿锛熺炕鐪嬩簡Flutter鐨凙PI鏂囨。锛屽彂鐜颁簡涓や釜娉曞疂锛屽垎鍒槸Overlay鍜孫verlayEntry銆備袱鑰呯殑鐢ㄦ硶濡備笅銆俢lass_MyWidgetStateextendsState{OverlayEntryoverlayEntry;@overrideWidgetbuild(BuildContextcontext){returnCenter(child:Column(mainAxisSize:MainAxisSize.min,children:[RaisedButton(onPressed:(){///1.鍒涘缓涓€涓猳verlayEntry瀹炰緥锛宐uilder鏂规硶杩斿洖涓€涓猈idget///Widget浼氳娓叉煋鍒伴〉闈㈢殑椤跺眰{///3.鎵цremove鏂规硶閿€姣乷verlayEntry瀹炰緥overlayEntry.remove();},child:Text('鐐规垜鍏抽棴OverlayEntry'),),),),);///2.浣跨敤OverlayState.insert鏂规硶鏄剧ずoverlayEntryOverlay.of(context).insert(overlayEntry);},child:Text('鐐规垜浣跨敤搴峰悍瑕嗙洊'),),],),);}}濡傛灉浣犱笉鏄お璁ㄥ帉锛屼綘涔熷彲浠ョ偣鍑昏繖閲岃嚜宸辫瘯涓€璇曘€備腑闂村垏涓€鍧楋紝瑙ｅ喅浜嗘诞灞傞棶棰樸€備笅闈㈡垜浠氨鏉ョ湅鐪嬪浣曡閬僵涓棿鐨勬煇涓尯鍩熶寒璧锋潵銆傝繖涓棶棰樺緢绠€鍗曘€備负浠€涔堟槸浜殑锛熷洜涓烘湁鍏夛紝鎬庝箞鍙兘鏈夊厜銆傛垜鎯冲埌浜嗕笂甯濓紝鍥犱负涓婂笣璇磋鏈夊厜锛屾墍浠ュ氨鏈変簡鍏夈€侭ecomingGodI锛堟壘鍒扮粍浠剁殑浣嶇疆锛夋槸濡備綍鎴愪负涓婂笣鐨勭涓€姝ャ€傛垜浠渶瑕佹壘鍒伴渶瑕侀珮浜樉绀虹殑缁勪欢鐨勫ぇ灏忓拰浣嶇疆銆備粩缁嗘煡浜嗕竴涓嬶紝鍙戠幇鍦‵lutter涓紝鍙互閫氳繃GlobalKey鑾峰彇涓€涓厓绱犵殑澶у皬鍜屼綅缃紝鏍稿績浠ｇ爜濡備笅锛?//1.澹版槑涓€涓猤lobalKeyfinalglobalKey=GlobalKey();RaisedButton(///2.灏唃lobalKey缁戝畾鍒扮粍浠堕敭涓婏細globalKey,onPressed:(){///},child:Text('鐐瑰嚮鎴戠殑搴峰悍鎺у埗鍙拌緭鍑?,),);///3.浣跨敤濡備笅浠ｇ爜鑾峰彇缁勪欢鐨勫ぇ灏忓拰浣嶇疆RenderBoxrenderBox=globalKey.currentContext.findRenderObject();Sizesize=renderBox.size;Offsetoffset=renderBox.localToGlobal(Offset.zero);print(size);print(offset);鍏朵腑Size涓湁width鍜宧eight灞炴€э紝鍒嗗埆琛ㄧず楂樹寒缁勪欢鐨勫楂樺睘鎬э紝Offset涓湁dx鍜宧eight灞炴€э紝dy灞炴€ц〃绀虹粍浠跺乏涓婅鍒扮粍浠剁殑璺濈鍒嗗埆浣嶄簬灞忓箷鐨勫乏渚у拰椤堕儴銆傜浉淇″仛web寮€鍙戠殑鍚屽瀵规閮戒笉闄岀敓銆傚鏋滀綘涓嶆槸澶鍘岋紝涔熷彲浠ョ偣杩欓噷鑷繁璇曚竴涓嬫晥鏋溿€傛垚绁炰簩锛堥珮浜樉绀虹粍浠舵墍鍦ㄥ尯鍩燂級鎴戜滑宸茬粡鍦ㄤ唬鐮佸眰闈㈠畾浣嶄簡杩欎釜缁勪欢鐨勪綅缃紝鎺ヤ笅鏉ュ氨鏄杩欎釜鍖哄煙杩涜绮惧噯鎵撳嚮锛岃杩欎釜鍖哄煙涓嶈棰滆壊瑕嗙洊娴眰璇风湅鎴愮绗簩姝ャ€傚厛鐪嬬粨鏋滐紝鍙互鐪嬪埌涓棿鐨勭粍浠舵病鏈夎mask灞傝鐩栵紝浣嗘槸鏈夌溂鍔涚殑鍚屽鍙兘浼氬彂鐜颁负浠€涔堥《閮ㄥ拰搴曢儴鐨勯儴鍒嗘病鏈夎瑕嗙洊锛岄偅鏄洜涓篟aisedButton鏈変竴涓猼op鍜宐ottom鐨刴argin锛屾墍浠ヤ唬鐮佽幏鍙栧埌鐨凴aisedButton瀹為檯鍗犵敤鐨勭┖闂存瘮鐪嬭捣鏉ヨ澶э紝鏈夊叴瓒ｇ殑鍚屽鍙互鐮旂┒涓嬪浣曞幓鎺夎繖涓猰argin銆傚彟涓€涓悓瀛︿細璇达紝涓轰粈涔堣繖涓埅鍥炬槸绉诲姩绔殑鎴浘锛岃€屼笉鏄綉椤垫祻瑙堝櫒鐨勬埅鍥俱€傝繖鏄釜濂介棶棰橈紝璇风湅涓嬮潰鐨勬牳蹇冧唬鐮併€侽verlayEntry(builder:(context)=>Stack(children:[///鎴戜滑浣跨敤ColorFiltered鏉ュ疄鐜拌繖涓姛鑳紺olorFiltered(colorFilter:ColorFilter.mode(///閬僵灞傞鑹睠olors.red.withOpacity(.4),BlendMode.srcOut,),child:Stack(children:[Container(decoration:BoxDecoration(///浠讳綍棰滆壊閮藉彲浠olor:Colors.white,backgroundBlendMode:BlendMode.dstOut,),),Positioned(///骞朵笖闇€瑕侀珮鐨勫昂瀵竌ndpositionofthebrightcomponentsareconsistentchild:Container(///浠绘剰棰滆壊鍙敤.dy,),],),),],));涓婇潰鍙互鐪嬪埌锛屾垜浠娇鐢⊿tack鍜孭ositioned鎶婄粍浠舵斁鍦ㄦ垜浠兂瑕佺殑鍦版柟锛岀劧鍚庨珮浜殑鏍稿績缁勪欢鏄疌olorFiltered锛屽彲浠ュ緢妫掞紝鎴戝お鍠滄杩欎釜缁勪欢浜嗭紝瀹冭兘鍋氫粈涔堝墽鎯呬篃寰堟湁鎰忔€濓紝鎴戜滑浼氬彟鍙戜竴绡囨枃绔犲崟鐙粙缁嶏紝鏁鏈熷緟~鐒跺悗璇磋涓轰粈涔堟垜浠殑鎴浘鏄湪绉诲姩绔紝涓嶅啀鏄綉椤电锛屽洜涓篊olorFiltered澶己澶т簡銆傝嚦浜嶧lutter鍥㈤槦杩樻病鏈夊湪FlutterWeb涓婂畬鍏ㄥ疄鐜板畠銆傚湪Flutter浠撳簱涓彲浠ュ湪Web涓婃壘鍒板緢澶氬叧浜嶤olorFiltered鎬ц兘寮傚父鐨勯棶棰樸€傚綋鐒讹紝濡傛灉浣犱笉瀚岄夯鐑︼紝涔熸効鎰忓皾璇曞湪Web涓婃病鏈夋晥鏋滅殑鏁堟灉锛屾垜涔熶负浣犵簿蹇冨噯澶囦簡涓€涓湪绾块摼鎺ャ€傛垚绁炰笁锛堝姞next鎸夐挳鍜屾枃瀛楋級缁堜簬鍒颁簡鏈€鍚庝竴姝ヤ簡锛屽姞next鎸夐挳鍜屾枃瀛楋紝涓嶇敤璇翠簡锛屽湪鍒涘缓overlayEntry鐨勬椂鍊檅uilder鏂规硶閲岄潰闅忎究杩斿洖浠€涔堝氨鍙互浜嗐€傞偅涔堟垜杩橀仐婕忎簡浠€涔堬紵璁ょ湡鎬濊€冪殑鍚屽鍙兘浼氭兂锛屾垜璇ュ浣曟洿鏂皁verlayEntry鍛紵涓€鑸湁澶氫釜寮曞椤点€傛€讳笉鑳芥瘡娆￠兘鍘绘帀褰撳墠鐨勶紝鍐嶆彃鍏ユ柊鐨勫惂锛岃繖鏍烽〉闈㈣偗瀹氫細闂€傚叾瀹炲鏋滀綘浠旂粏闃呰OverlayEntry鐨勬枃妗ｏ紝浣犳槸缁濆涓嶄細閿欒繃杩欎釜markNeedsBuild鏂规硶鐨勩€傝繖閲屽氨涓嶄妇渚嬩簡锛屾垜鎳掍簡銆傜畝鑰岃█涔嬶紝濡傛灉builder鐨勫唴瀹瑰彂鐢熷彉鍖栵紝鍙互鍦╫verlayEntry涓婃墽琛屼竴娆verlayEntry.markNeedsBuild()锛孎lutter浼氶噸鏂版覆鏌揵uilder杩斿洖鐨勫唴瀹广€傝繖鏍峰氨鍙互涓嶉棯鐑佸湴鍒囨崲寮曞椤典簡銆傜浉淇″畬鎴愪互涓婁笁姝ュ悗锛屽嵆浣挎垜浠病鏈夋垚绁烇紝涔熷彲浠ユ湁鍏夛紝楂樹寒鎸囧畾鍖哄煙銆備竴鍙ヨ瘽鎬荤粨锛氭垜浠娇鐢∣verlay鍜孋olorFiltered瀹屾垚浜嗗紩瀵奸〉鐨勫埗浣溿€傜湅瀹屼箣鍚庯紝鑰愬績鐪嬪畬鐨勫皬浼欎即浠竴瀹氳寰椾綔鑰呮病鏈夐獥鎴戙€傜‘瀹炲緢绠€鍗曘€傛垜宸茬粡浣跨敤浜嗚繖涓や釜缁勪欢銆侭ut锛氫簬鏄紝鎴戜滑璐村績鍦板紑鍙戜簡涓€涓皬搴擄紝鍊熺敤浜嗙綉缁滀笂鐭ュ悕鐨勫紩瀵煎簱Intro.js鐨勫悕瀛楋紝鍙栧悕涓篺lutter_intro銆傚簾璇濆皯璇达紝鍏堢湅浜嬫儏銆備笂鍥炬槸浣跨敤flutter_intro榛樿涓婚鍙互蹇€熷疄鐜扮殑寮€鏈烘晥鏋溿€傞偅涔堟垜璇ュ浣曚娇鐢ㄥ畠鍛紵棣栧厛鍦ㄩ」鐩緷璧栨枃浠秔ubspec.yaml涓紩鍏lutter_intro銆傚崟鍑绘澶勬煡鐪嬫渶鏂扮増鏈€傚紩鍏ntro骞跺疄渚嬪寲涓€涓璞mport'package:flutter_intro/flutter_intro.dart';///1.寮曞叆Intro锛屽疄渚嬪寲涓€涓璞★紝浼犲叆闇€瑕佺殑stepCount鍙傛暟///鍜寃idgetBuilder鍙傛暟锛屽叾涓瓀idgetBuilder鍙互浣跨敤搴撴瀯寤?in///鏂规硶锛岃繖鏍峰彧闇€瑕佷紶鍏ヨ鏄剧ず鐨勬枃鏈嵆鍙€?//褰撶劧锛屽鏋滀綘涓嶅お璁ㄥ帉锛屼綘涔熷彲浠ヨ嚜宸卞疄鐜皐idgetBuilder鏂规硶銆侷ntrointro=Intro(///寮曞椤垫€绘暟蹇呴』閫氳繃stepCount:4,///楂樹寒鍖哄煙鍜寃idget涔嬮棿鐨勫唴杈硅窛padding:EdgeInsets.all(8),///鐨勫渾瑙掑崐寰勯珮浜尯鍩焍orderRadius:BorderRadius.all(Radius.circular(4)),///浣跨敤搴撻粯璁ゆ彁渚涚殑useDefaultTheme锛屽彲浠ュ揩閫熸瀯寤哄紩瀵奸〉闈?//闇€瑕佽嚜瀹氫箟寮曞鐨勬牱寮忓拰鍐呭椤甸潰锛岄渶瑕佽嚜宸卞疄鐜皐idgetBuilder鏂规硶widgetBuilder:StepWidgetBuilder.useDefaultTheme(///Prompttexttexts:['浣犲ソ锛屾垜鏄疐lutterIntro.','鎴戝彲浠ュ府浣犲揩閫熼槄璇籉lutter椤圭洰涓殑RealizeStepByStepguidance.','鎴戠殑鐢ㄦ硶涔熷緢绠€鍗曪紝澶у鍙互閫氳繃example鍜宎pi鏂囨。蹇€熸帉鎻″拰浣跨敤銆?,'涓轰簡蹇€熷疄鐜版寚瀵硷紝鎴戣繕榛樿鎻愪緵浜嗕竴濂楁牱寮忥紝鍑篵ox,绁濅綘浣跨敤鎰夊揩锛屽啀瑙侊紒',],///鎸夐挳鏂囧瓧btnLabel:'Igotit',///鎸夐挳鍚庢槸鍚︽樉绀哄綋鍓嶆楠howStepLabel:true,),);涓嬪浘鏄痜lutter_intro鏀寔鐨勪竴浜涘弬鏁伴厤缃搴斾綅缃殑浠嬬粛锛氬皢globalKey缁戝畾鍒伴渶瑕佸紑鏈虹殑Widget涓婃槸寰堢啛鎮夌殑鎿嶄綔锛屽拰涓婇潰浠嬬粛鐨勪竴妯′竴鏍枫€傚綋鐒讹紝涓轰簡浣犵殑鏂逛究锛屽簱宸茬粡涓轰綘鍒涘缓浜嗕竴涓猤lobalKey锛屼綘鍦ㄤ娇鐢ㄧ殑鏃跺€欏彧闇€瑕侀€氳繃intro.keys[subscript]鑾峰彇鍗冲彲銆侾laceholder(///2.绗竴涓紩瀵奸〉鏄粦瀹氶敭涓殑绗竴椤癸紝浠嬬粛閿細intro.keys[0])澶柟渚夸簡锛佸叏鍐涘噯澶囪繘鏀伙紝鎴戜滑宸茬粡鍋氬ソ浜嗕竴鍒囧噯澶囥€傝緭鍏ヤ互涓嬪懡浠ゅ苟鍗曞嚮杩愯銆備粙缁嶃€傚紑濮嬶紙涓婁笅鏂囷級锛涗笉鐢ㄤ簡锛屾槸涓嶆槸寰堢畝鍗曘€備綘澶笐浜嗐€傚鏋滀綘瑙夊緱鎴戠殑榛樿涓婚寰堜笐锛屾兂鑷繁瀹炵幇widgetBuilder鏂规硶锛屾垜鍙互鎺ュ彈銆傛渶缁堢殑灏忛儴浠跺嚱鏁帮紙StepWidgetParamsparams锛墂idgetBuilder锛涜鏂规硶浼氬湪寮曞椤甸潰鍑虹幇鏃惰flutter_intro鍐呴儴璋冪敤锛屽苟灏嗗綋鍓嶉〉闈㈢殑涓€浜涙暟鎹互鍙傛暟鐨勫舰寮忛€氳繃StepWidgetParams浼犲叆锛屾渶缁堟覆鏌撳埌灞忓箷涓婂苟鐢辫鏂规硶缁勪欢杩斿洖銆俢lassStepWidgetParams{///杩斿洖涓婁竴涓紩瀵奸〉鏂规硶锛屽鏋滄病鏈夊垯nullfinalVoidCallbackonPrev;///杩涘叆涓嬩竴涓紩瀵奸〉闈㈡柟娉曪紝濡傛灉娌℃湁鍒檔ullfinalVoidCallbackonNext;///缁撴潫鎵€鏈夊紩瀵奸〉MethodfinalVoidCallbackonFinish;///褰撳墠鎵ц鐨勫紩瀵奸〉鏁帮紝浠?寮€濮媐inalintcurrentStepIndex;///鎬诲紩瀵奸〉鏁癴inalintstepCount;///灞忓箷鐨勫楂榝inalSizescreenSize;///Height浜壊缁勪欢鐨勫楂榝inalSizesize;///楂樹寒缁勪欢finalOffset鍋忕Щ閲忓乏涓婅鐨勫潗鏍囷紱}StepWidgetParams鎻愪緵浜嗙敓鎴愬紩瀵奸〉闇€瑕佺殑鎵€鏈夊弬鏁帮紝榛樿鎻愪緵鐨勪富棰樹篃鏄牴鎹繖涓弬鏁扮敓鎴愬紩瀵奸〉銆傚ぉ涓嬫病鏈変笉鏁ｇ殑绛靛腑锛屼絾浣犺嫢璇锋垜锛屾垜鍙互闄綘鍚冧竴闃靛瓙銆傛湰鏂囦富瑕佷粙缁嶅浣曞湪Flutter涓疄鐜版搷浣滃紩瀵硷紝骞跺湪姝ゅ熀纭€涓婂皝瑁呬簡涓€涓垜浠溂涓笢鍗婄悆鏈€濂界殑flutter_intro銆傚鐢靛瓙鎰熷叴瓒ｏ紵璇峰叧娉ㄦ垜浠殑寮€婧愰」鐩瓻lectronPlayground锛屽甫浣犲揩閫熶笂鎵婨lectron銆傛瘡鍛ㄤ簲鎴戜滑閮戒細鎸戦€変竴浜涙湁瓒ｇ殑鏂囩珷鍜屾柊闂讳笌澶у鍒嗕韩銆傚揩鏉ュ叧娉ㄦ垜浠殑灏忛鍛ㄥ垔鍚с€傛垜浠槸濂芥湭鏉ュ皬榛戞澘鐨勫墠绔妧鏈洟闃熴€傛垜浠細缁忓父涓庢偍鍒嗕韩鏈€鏂版渶閰风殑琛屼笟鎶€鏈煡璇嗐€傛杩庣煡涔庛€佹帢閲戙€丼egmentfault銆丆SDN銆佺畝涔︺€佸紑婧愪腑鍥姐€佸崥瀹㈠洯鍏虫敞鎴戜滑銆?/p>
