重新认识FlutterSlivers解决复杂的滑动窗口问题-part1

鍓嶈█鏃ュ父寮€鍙戝伐浣滀腑锛屼粎浣跨敤ListView銆丩istView.builder绛夋粦鍔ㄧ粍浠跺嵆鍙弧瓒冲ぇ閮ㄥ垎涓氬姟闇€姹傘€傚綋娣诲姞澶嶆潅鐨勬粦鍔ㄩ〉闈㈡椂锛孲livers绯诲垪涓嚑涓父鐢ㄧ殑缁勪欢涔熻兘杞绘澗瀹炵幇銆傝繖涔熷鑷翠簡涓€浜涘皬浼欎即瀵逛簬瑁傜墖鐏电郴鍒楁病鏈変竴涓瘮杈冨畬鏁寸殑浜嗚В銆傞偅涔堝湪閲嶆柊璁よ瘑Flutter鐨勪笓鏍忛噷锛岄璁′細鏈?绡嘢livers鐩稿叧鐨勬枃绔狅紝浠庣粍浠剁殑浣跨敤鍒拌儗鍚庣殑娓叉煋鍘熺悊锛岃鎴戜滑涓€璧锋帰绱livers鐨勯瓍鍔涘惂锛佷粈涔堟槸绐楀彛锛熼摱鏉℃槸浠€涔堬紵鐩镐俊鐐瑰紑杩欑瘒鏂囩珷鐨勫皬浼欎即锛屼竴瀹氫細瀵筁istView绛夋粴鍔ㄧ粍浠舵湁鎵€浜嗚В銆傛粴鍔ㄧ粍浠朵細鎻愪緵涓€涓潡鐢ㄤ簬婊氬姩鏄剧ず鍐呭锛屼絾鏄綋鍐呭寰堝鐨勬椂鍊欙紝鎴戜滑鍙兘鐪嬪埌涓€閮ㄥ垎鍙粴鍔ㄧ殑鍐呭銆?杩欏氨鏄鍙ｏ紙ViewPort锛夛紝涔熷氨鏄垪琛ㄥ彲瑙佸尯鍩熺殑澶у皬銆備緥濡傦紝涓€涓狶istView鐨勬樉绀哄尯鍩熼珮搴︽槸500鍍忕礌锛屽畠鐨勫垪琛ㄩ」鐨勬€婚珮搴﹀彲鑳借繙杩滆秴杩?00鍍忕礌锛屼絾瀹冪殑ViewPort浠嶇劧鏄?00鍍忕礌銆傞偅涔堥摱鏉℃槸浠€涔堬紵鎴戜滑鍙互浣跨敤ListView.builder()灏唅temCount璁剧疆涓簄ull鏉ユ瀯寤烘棤闄愬垪琛ㄥ唴瀹广€傚彧鏈夊綋鎴戜滑婊氬姩鐨勬椂鍊欙紝鎴戜滑鎵嶄細鍔ㄦ€佸垱寤虹獥鍙ｄ腑闇€瑕佸憟鐜扮殑鍐呭銆傝繖鏄摱鏉°€傚鏋滀竴涓粴鍔ㄧ粍浠舵敮鎸乻liver妯″瀷锛岄偅涔堣繖涓粍浠朵細鎶婂瓙缁勪欢鍒嗘垚寰堝涓猻liver锛屽彧鏈夊綋sliver鍑虹幇鍦ㄧ獥鍙ｄ腑鏃舵墠浼氭瀯寤恒€侺istView銆丟ridView绛塁ustomScrollView缁勪欢鍦ㄥ簳灞傚疄鐜颁腑閮芥湁瀵瑰簲鐨凷liver锛屽SliverList銆丼liverGrid銆係liver鐗堟湰鐨勫彲婊氬姩缁勪欢涓庨潪Sliver鐗堟湰鐨勫彲婊氬姩缁勪欢鏈€澶х殑鍖哄埆鍦ㄤ簬Sliver鐗堟湰鐨勭粍浠朵笉鍖呭惈鍙粴鍔ㄦā鍨嬶紙Scrollable锛夛紝缁勪欢鏈韩涓嶈兘婊氬姩銆傚洜姝わ紝濡傛灉瑕佷娇鐢⊿liver绯诲垪鐨勭粍浠讹紝闇€瑕佷负鍏舵坊鍔犳粴鍔ㄦā鍨嬨€侳lutter鎻愪緵浜咰ustomScrollView浣滀负Sliver绯诲垪缁勪欢杩愯鐨勫鍣ㄣ€侰ustomScrollView鐨勪富瑕佸姛鑳芥槸鎻愪緵Viewport鍜屼竴涓櫘閫氱殑Scrollable銆傚涓猄liver缁勪欢鍏变韩CustomScrollView鐨凷crollable锛屽疄鐜板崟涓€鐨勬粴鍔ㄥ満鏅€侰ustomScrollView鏈夊緢澶氬睘鎬э紝鍏朵腑鏈€甯哥敤鐨勬槸slivers锛岀敤浜庝紶鍏liver缁勪欢鍒楄〃銆傚氨鍍忚繖鏍凤細Scaffold(body:CustomScrollView(slivers:[SliverList(/**/),SliverGrid(/**/),],,);鍊熷姪CustomScrollView缁勪欢锛屽彲浠ュ疄鐜板鏉傜殑婊氬姩鏁堟灉锛岀湅璧锋潵骞舵病鏈夐偅涔堥毦銆傚鏋淪liverList闇€瑕佸湪涓€涓晫闈㈠垱寤哄涓垪琛紝鍒氭帴瑙lutter鐨勬湅鍙嬪彲鑳戒細鐢–olumn鍖呰９澶氫釜ListView鏉ュ疄鐜帮紝鍍忚繖鏍凤細浣嗘槸杩欐牱鐨勬晥鏋滆偗瀹氳揪涓嶅埌瑕佹眰銆傚鏋滀綘鎯宠瀹冧滑涓€璧锋粴鍔紝鎴栬€呮坊鍔犱竴浜涘鏉傜殑鍔ㄧ敾鏉ュ疄鐜拌繖鏍风殑鏁堟灉锛氶偅涔堝€熷姪SliverList灏卞彲浠ヨ交鏉惧疄鐜般€係liverList鏄竴绉峉liverWidget銆傚畠鐨勫姛鑳芥槸灏哤idgets鎺掑垪鍦ㄤ竴涓狶ist涓€傝浣跨敤SliverList锛屾偍闇€瑕佸畾涔変竴涓鎵樸€係liverdelegate鐢ㄤ簬鎻忚堪浣跨敤鍝鏂规硶鏉ユ覆鏌撶粍浠躲€傞€氬父鏈変袱绉嶇被鍨嬶細static鍜宐uilder銆傚湪SliverList涓紝鍙互瀹氫箟涓ょ绫诲瀷鐨勫鎵橈細SliverChildListDelegate锛氳幏鍙栭渶瑕佹樉绀虹殑缁勪欢鍒楄〃銆傛鍒楄〃涓畾涔夌殑缁勪欢灏嗙珛鍗冲憟鐜般€備笉浼氭湁浠讳綍寤惰繜鍔犺浇銆係liverChildBuilderDelegate锛氳幏鍙栧皢寤惰繜鍒涘缓鐨勫皬閮ㄤ欢鍒楄〃銆傝繖鎰忓懗鐫€褰撶敤鎴锋粴鍔ㄦ椂锛屽墿浣欑殑缁勪欢灏嗗紑濮嬫覆鏌撱€侺istView鍙互绠€鍗曠悊瑙ｄ负锛欳ustomScrollView+SliverList+SliverChildListDelegate锛涘皢ListView.Builder鐞嗚В涓猴細CustomScrollView+SliverList+SliverChildBuilderDelegate銆備簡瑙ｄ簡SliverList闇€瑕佸畾涔夌殑delegate涔嬪悗锛屼娇鐢ㄥ畠灏卞儚浣跨敤ListView涓€鏍风畝鍗曪細,),SliverList(delegate:SliverChildBuilderDelegate((BuildContextctx,intindex){returnContainer(height:50,color:Colors.primaries[index%Colors.primaries.length],);},childCount:5),),],),SliverGridSliverGrid鍜孏ridView涓€鏍凤紝灏嗙粍浠舵帓鍒楁垚涓€鎺掍袱涓垨澶氫釜銆傞櫎浜嗗儚SliverList瀹氫箟涓€涓櫘閫氱殑delegate涔嬪锛岃繕闇€瑕佷紶鍏ridDelegate鏉ユ弿杩版瘡琛屽浣曟樉绀虹粍浠躲€傚儚杩欐牱锛氭瘡琛屾渶澶?涓紝姣忎釜缁勪欢鐨勫搴︽槸鍏堕珮搴︾殑1.5鍊嶃€係liverGrid(gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:4,crossAxisSpacing:5,mainAxisSpacing:3,childAspectRatio:1.5),delegate:SliverChildBuilderDelegate((BuildContextcontext,intindex){杩斿洖瀹瑰櫒(color:Colors.primaries[index%Colors.primaries.length],},childCount:20),)SliverGrid涓彲浠ュ畾涔変袱绉峠ridDelegate锛歋liverGridDelegateWithFixedCrossAxisCount锛氭寚瀹氫竴琛屾湁澶氬皯鍒楋紝鐢ㄥ畠鏉ヨ嚜鍔ㄦ墿灞曞埌灞忓箷鐨勬渶澶у搴︺€?!---->crossAxisCount灞炴€ф槸鍒楁暟childAspectRatio灞炴€ф槸绾垫í姣擷XXSpacing灞炴€ф槸鎸囨瘡涓€椤逛箣闂寸殑杈硅窛SliverGridDelegateWithMaxCrossAxisExtent锛氬彲浠ユ寚瀹氬垪鐨勫搴?!---->maxCrossAxisExtent鏄垪涓殑鏈€澶у搴︺€侴ridView.builder鍙互鐞嗚В涓猴細CustomScrollView+SliverGrid+SliverChildBuilderDelegate+gridDelegate閬囧埌涓€浜涚畝鍗曠殑闇€姹傦紝涔熷彲浠ヤ娇鐢ㄧ缉鍐欑粍浠讹細SliverChildListDelegate+SliverGridDelegateWithMaxCrossAxisExtentSliverGrid.count(crossAxisCount:3,children:[...List.generate(3,(index)=>瀹瑰櫒(棰滆壊:Colors.primaries[index%Colors.primaries.length],),)],),SliverGrid.extent(maxCrossAxisExtent:100,children:[...List.generate(9,(index)=>Container(棰滆壊:Colors.primaries[index%Colors.primaries.length],),)],)SliverGrid涓嶴liverList涓€璧蜂娇鐢ㄥ彲浠ヨ揪鍒拌繖鏍风殑鏁堟灉锛歋liverAppBarAppBar鏄ぇ澶氭暟搴旂敤绋嬪簭涓潪甯搁噸瑕佺殑涓€涓粍浠讹紝瀹冧綅浜嶢pp鍦ㄩ《閮紝涓昏鎺у埗涓€浜涘彲鎿嶄綔鐨勬寜閽€傚湪Flutter涓紝Scaffold涓嬬粡甯镐娇鐢ˋppBar缁勪欢銆傞偅涔堜粈涔堟槸SliverAppBar鍛紵SliverAppBarWidget鍏煎Flutter涓殑CustomScrollView銆傚畠鍜孉ppBar缁勪欢涓€鏍凤紝涔熷氨鏄瀹冩嫢鏈堿ppBar鐨勬墍鏈夊睘鎬э紝姣斿锛歵itle,actions,leading锛屼絾鏄畠杩樻湁涓€浜涢澶栫殑鍙傛暟锛屾瘮濡俻inned,floating,snap,expandedHeight鐢ㄦ潵鑷畾涔夎涓虹殑搴旂敤鏍忋€係liverAppBar閫氬父鐢ㄤ綔CustomScrollViewslivers涓殑绗竴涓粍浠躲€係caffold(body:CustomScrollView(slivers:[SliverAppBar(title:Text("HelloSliverAppBar&Taxze"),actions:[IconButton(onPressed:()=>null,icon:constIcon(Icons.add))],),],),)杩欐槸涓€涓潪甯哥粡鍏哥殑Material搴旂敤鐨凙ppBar銆係liverAppBar鐨勫睘鎬у緢澶氾紝涓嶢ppBar鐩稿悓鐨勫睘鎬ф湰鏂囦笉鍐嶄粙缁嶏紝涓昏璁茶В鍏剁嫭鐗圭殑灞炴€с€俥xpandedHeight璇ュ睘鎬у畾涔変簡AppBar瀹屽叏灞曞紑鏃剁殑灏哄锛屽悜涓嬫粴鍔ㄦ椂楂樺害浼氱缉灏忋€係liverAppBar(title:Text("HelloSliverAppBar&Taxze"),expandedHeight:200,actions:[IconButton(onPressed:()=>null,icon:constIcon(Icons.add))],),鏈缃甧xpandedHeightexpandedHeight:200pinned璇ュ睘鎬х敤浜庡垽鏂綋鐢ㄦ埛鍚戜笅婊氬姩鏃禔ppBar鏄惁鍦ㄥ睆骞曚笂淇濇寔鍙銆係liverAppBar(title:Text("HelloSliverAppBar&Taxze"),expandedHeight:200,pinned:true,actions:[IconButton(onPressed:()=>null,icon:constIcon(Icons.add))],),pinned:truepinned:falsefloating濡傛灉姝ゅ睘鎬ц缃负true锛屽垯褰撶敤鎴峰悜涓婃粴鍔ㄦ椂锛孉ppBar灏嗙珛鍗冲彲瑙併€傚鏋滀负false锛屽垯浠呭湪婊氬姩鍒伴《閮ㄦ椂鍙銆係liverAppBar(title:Text("HelloSliverAppBar&Taxze"),expandedHeight:200,floating:true,actions:[IconButton(onPressed:()=>null,icon:constIcon(Icons.add))],),floating:truefloating:falsesnap濡傛灉杩欎釜灞炴€ц缃负true锛岄偅涔堢敤鎴峰悜涓婃粴鍔ㄤ竴鐐癸紝灏卞彲浠ョ湅鍒板畬鏁寸殑AppBar銆備娇鐢ㄦ灞炴€ч渶瑕佸皢floating璁剧疆涓簍rue銆係liverAppBar(title:Text("HelloSliverAppBar&Taxze"),expandedHeight:200,floating:true,snap:true,actions:[IconButton(onPressed:()=>null,icon:constIcon(鍥炬爣.add))],),snap:truefloating:true鍦ㄦ晥鏋滃浘涓彲浠ユ竻妤氱殑鐪嬪埌snap鍜宖loating鐨勬槑鏄惧尯鍒€俧lexibleSpace璇ュ睘鎬х敤浜庝负AppBar鎻愪緵鑳屾櫙鍜屾姌鍙犳ā寮忥紝浠ュ強鍙互闅忕潃鐢ㄦ埛婊氬姩鑰屾敼鍙樹綅缃殑鏍囬銆係liverAppBar(expandedHeight:200,flexibleSpace:FlexibleSpaceBar(title:Text("绗竴涓狥lexibleSpace",style:TextStyle(color:Colors.red),),background:Image.network("https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",fit:BoxFit.cover),),actions:[IconButton(onPressed:()=>null,icon:constIcon(Icons.add))],),褰撶敤鎴峰悜涓婃粴鍔ㄦ椂锛屼粬浠細寰楀埌瑙嗗樊鏁堟灉锛岃繖鏄洜涓篶ollapseMode锛屽畠鏈変笁绉嶆ā寮忥細parallax,pin,none銆俢ollapseMode榛樿涓篊ollapseMode.parallax锛屽鏋滀綘灏嗗畠璁剧疆涓簆in閭ｄ箞浣犲皢涓嶄細鑾峰緱瑙嗗樊鏁堟灉锛屽彧鏄竴涓畝鍗曠殑娣″叆娣″嚭銆俧lexibleSpace:FlexibleSpaceBar(title:Text("绗竴涓狥lexibleSpace",style:TextStyle(color:Colors.black),),collapseMode:CollapseMode.pin,background:Image.network("https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",fit:BoxFit.cover),),CollapseMode.parallaxCollapseMode.pinstretch鍦ㄤ娇鐢ㄨ繖涓睘鎬т箣鍓嶏紝闇€瑕佸厛璁剧疆CustomScrollView鐨刾hysics锛岀粰瀹冧竴涓脊鎬ф晥鏋滐紝浠ュ強婊氬姩鍒板唴瀹规粴鍔ㄥ埌鏈€鍚庝粛鍦ㄨ繍琛屻€傚綋stretch灞炴€ц缃负true鏃讹紝FlexibleSpaceBar灏嗕笌澶栭儴缁勪欢鍚屾婊氬姩銆係liverAppBar(expandedHeight:200,pinned:true,stretch:true,flexibleSpace:FlexibleSpaceBar(title:Text("FirstFlexibleSpace",style:TextStyle(color:Colors.black),),//collapseMode:CollapseMode.pin,鑳屾櫙锛欼mage.network("https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",fit:BoxFit.cover),),actions:[IconButton(onPressed:()=>null,icon:constIcon(Icons.add))],),stretch:truestretch:falsestretchModes褰搒tretch灞炴€ц缃负true鏃讹紝FlexibleSpaceBar瀹瑰櫒鏀惧ぇ寮曡捣鐨勬敼鍙樿儗鏅浘鐗囩殑鍔ㄧ敾鏁堟灉琚Е鍙?>鎷変几妯″紡銆俿tretchModes鏈変笁涓睘鎬э細zoomBackground榛樿鏁堟灉锛屾斁澶ц儗鏅浘blurBackground妯＄硦鑳屾櫙鍥緁adeTitlefadetitleflexibleSpace:FlexibleSpaceBar(title:Text("FirstFlexibleSpace",style:TextStyle(color:Colors.black),),//collapseMode:CollapseMode.pin,鑳屾櫙:Image.network("https://p3-passport.byteimg.com/img/user-avatar/af5f7ee5f0c449f25fc0b32c050bf100~180x180.awebp",fit:BoxFit.cover),stretchModes:[//StretchMode.fadeTitle,//StretchMode.blurBackground,StretchMode.zoomBackground],),zoomBackgroundblurBackgroundfadeTitle鍏充簬鎴戝ぇ瀹跺ソ锛屾垜鏄疶axze锛屽鏋滄偍瑙夊緱鏂囩珷瀵规偍鏈変环鍊硷紝甯屾湜鎮ㄨ兘缁欐垜鐨勬枃绔犱竴涓潳锔忥紝濡傛湁浠讳綍闂锛岃鑱旂郴鎴戯細鍦ㄨ繖閲岋紝浣犱篃鍙互閫氳繃鎺橀噾鏂板鐨勭淇″姛鑳借仈绯绘垜銆傚鏋滆寰楁枃绔犺繕鏈変笉瓒筹紝璇峰叧娉ㄦ垜锛岀潱淇冩垜鍐欏嚭鏇村ソ鐨勬枃绔爚涓囦竴鍝ぉ鏀硅繘浜嗗憿锛燄煒?/p>