目录
- flutter sliver滚动组件
- sliverlist & slivergrid
- sliverappbar
- sliverpersistentheader
- slivertoboxadapter
- customscrollview & nestedscrollview
- nestedscrollview+sliverappbar+sliverfixedextentlist+listview
- nestedscrollview+sliverappbar+customscrollview
- 优化联动效果
- nestedscrollview+tabbarview
flutter sliver滚动组件
sliverlist & slivergrid
需要同时滚动listview和gridview时可以使用sliverlist和slivergrid。
customscrollview( slivers: [ sliverlist( delegate: sliverchildbuilderdelegate( (context, index) { return container( height: 50, color: colors.primaries[index % colors.primaries.length], ); }, childcount: 5, ), ), slivergrid( griddelegate: slivergriddelegatewithfixedcrossaxiscount( crossaxiscount: 3, crossaxisspacing: 5, mainaxisspacing: 5, ), delegate: sliverchildbuilderdelegate( (buildcontext context, int index) { return container( color: colors.primaries[index % colors.primaries.length], ); }, childcount: 20, ), ), ], )
sliverappbar
pinned：是否固定在屏幕顶部。
expandedheight：展开区域的高度。
flexiblespace：展开取消显示内容。
customscrollview( slivers: [ sliverappbar( pinned: true, expandedheight: 200, flexiblespace: flexiblespacebar( title: const text("sliverappbar"), background: image.asset("images/avatar.jpg", fit: boxfit.cover), ), ), sliverfixedextentlist( delegate: sliverchildbuilderdelegate( (buildcontext context, int index) { return container( alignment: alignment.center, color: colors.primaries[index % colors.primaries.length], child: text("$index"), ); }, ), itemextent: 50.0, ), ], )
sliverpersistentheader
sliverpersistentheader组件可以控制滚动的最大高度和最小高度，类似sliverappbar效果。
build：显示内容。
maxextent & minextent：滚动的高度范围。
shouldrebuild：是否需要更新。
customscrollview( slivers: [ sliverpersistentheader( pinned: true, delegate: mysliverpersistentheaderdelegate(), ), slivergrid( griddelegate: slivergriddelegatewithfixedcrossaxiscount( crossaxiscount: 3, crossaxisspacing: 5, mainaxisspacing: 5, ), delegate: sliverchildbuilderdelegate( (buildcontext context, int index) { return container( color: colors.primaries[index % colors.primaries.length], ); }, ), ), ], )
class mysliverpersistentheaderdelegate extends sliverpersistentheaderdelegate { @override widget build( buildcontext context, double shrinkoffset, bool overlapscontent) { return container( color: colors.blue, alignment: alignment.center, child: text( "hello world", style: textstyle(color: colors.white), ), ); } @override double get maxextent => 200; @override double get minextent => 50; @override bool shouldrebuild(covariant sliverpersistentheaderdelegate olddelegate) { return false; } }
slivertoboxadapter
customscrollview只能包含sliver组件，如果需要使用普通组件可以使用slivertoboxadapter。
customscrollview( slivers: [ slivertoboxadapter( child: container( height: 200, color: colors.black26, alignment: alignment.center, child: text("hello world"), ), ), sliverlist( delegate: sliverchildbuilderdelegate( (buildcontext context, int index) { return container( height: 60, color: colors.primaries[index % colors.primaries.length], ); }, childcount: 50, ), ), ], )
customscrollview & nestedscrollview
customscrollview组件可以将多个组件组合在一起，具有统一的滚动效果，但是customscrollview只能嵌套sliver系列的组件，如sliverlist、slivergrid、sliverpadding、sliverappbar等。
nestedscrollview可以协调两个滚动组件滑动。nestedscrollview在逻辑上将可滚动组件分为header和body两部分，heade部分只能接收sliver类型的组件，而body部分可以接收任意类型的组件。
nestedscrollview+sliverappbar+sliverfixedextentlist+listview
nestedscrollview( //sliver组件 headersliverbuilder: (buildcontext context, bool innerboxisscrolled) { return [ sliverappbar( title: const text("嵌套listview"), pinned: true, //固定appbar forceelevated: true, ), sliverfixedextentlist( itemextent: 50, delegate: sliverchildbuilderdelegate( (buildcontext context, int index) { return listtile(title: text("$index")); }, childcount: 5, ), ), ]; }, //滚动组件 body: listview.builder( padding: const edgeinsets.all(8), physics: const clampingscrollphysics(), //需要 itemcount: 30, itembuilder: (buildcontext context, int index) { return sizedbox( height: 50, child: center(child: text("item $index")), ); }, ), )
nestedscrollview+sliverappbar+customscrollview
nestedscrollview( headersliverbuilder: (buildcontext context, bool innerboxisscrolled) { return [ sliverappbar( floating: true, snap: true, expandedheight: 200, forceelevated: innerboxisscrolled, flexiblespace: flexiblespacebar( background: image.asset( "images/logo.png", fit: boxfit.cover, ), ), ), ]; }, body: customscrollview( slivers: [buildsliverlist(50)], ), )
优化联动效果
sliverappbar+customscrollview组合，当反向滑动时，sliverappbar就会整体回到屏幕顶部，出现遮挡问题，为了解决该问题，可以用在header里用sliveroverlapabsorber组件包裹sliverappbar，body里sliver列表最前面添加一个sliveroverlapinjector。
nestedscrollview( headersliverbuilder: (buildcontext context, bool innerboxisscrolled) { return [ sliveroverlapabsorber( handle: nestedscrollview.sliveroverlapabsorberhandlefor(context), sliver: sliverappbar( floating: true, snap: true, expandedheight: 200, forceelevated: innerboxisscrolled, flexiblespace: flexiblespacebar( background: image.asset( "images/logo.png", fit: boxfit.cover, ), ), ), ), ]; }, body: builder( builder: (buildcontext context) { return customscrollview( slivers: [ sliveroverlapinjector( handle: nestedscrollview.sliveroverlapabsorberhandlefor(context), ), buildsliverlist(50), ], ); }, ), )
nestedscrollview+tabbarview
class mypageview extends statefulwidget { late list<string> tabs; mypageview({key? key, required this.tabs}) : super(key: key); @override state<statefulwidget> createstate() { return _mypageviewstate(); } } class _mypageviewstate extends state<mypageview> with singletickerproviderstatemixin { late tabcontroller _controller; @override void initstate() { super.initstate(); _controller = tabcontroller(length: widget.tabs.length, vsync: this); } @override void dispose() { super.dispose(); _controller.dispose(); } @override widget build(buildcontext context) { return nestedscrollview( headersliverbuilder: (buildcontext context, bool innerboxisscrolled) { return [ sliveroverlapabsorber( handle: nestedscrollview.sliveroverlapabsorberhandlefor(context), sliver: sliverappbar( title: const text("hi flutter"), floating: true, snap: true, forceelevated: innerboxisscrolled, bottom: tabbar( controller: _controller, tabs: widget.tabs.map((e) => tab(text: e)).tolist(), ), ), ), ]; }, body: tabbarview( controller: _controller, children: widget.tabs.map((e) { return builder(builder: (buildcontext context) { return customscrollview( key: pagestoragekey(e), slivers: [ sliveroverlapinjector( handle: nestedscrollview.sliveroverlapabsorberhandlefor(context), ), sliverpadding( padding: const edgeinsets.all(9), sliver: buildsliverlist(50), ), ], ); }); }).tolist(), ), ); } }
到此这篇关于flutter sliver滚动组件的文章就介绍到这了,更多相关flutter 滚动组件内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
需要了解更多c/c++开发分享Flutter Sliver滚动组件的演示代码，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/993014.html