Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to use Flutter Sliver scrolling components, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Flutter Sliver scrolling component SliverList & SliverGrid

You can use SliverList and SliverGrid when you need to scroll ListView and GridView at the same time.

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: whether it is fixed at the top of the screen.

ExpandedHeight: the height of the expanded area.

FlexibleSpace: expand to cancel the display.

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

The SliverPersistentHeader component can control the maximum and minimum height of the scroll, similar to the SliverAppBar effect.

Build: displays the content.

MaxExtent & minExtent: the height range of the scroll.

ShouldRebuild: whether to update or not.

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 can only contain Sliver components, and you can use SliverToBoxAdapter if you need to use normal components.

CustomScrollView (slivers: [SliverToBoxAdapter (child: Container, 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 components can combine multiple components together to have a unified scrolling effect, but CustomScrollView can only nest Sliver series components, such as SliverList, SliverGrid, SliverPadding, SliverAppBar and so on.

NestedScrollView can coordinate the sliding of two scrolling components. NestedScrollView logically divides scrollable components into header and body. The heade part can only receive components of type Sliver, while the body part can receive components of any type.

NestedScrollView+SliverAppBar+SliverFixedExtentList+ListView

NestedScrollView (/ / Sliver component headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {return [SliverAppBar (title: const Text ("nested ListView"), pinned: true, / / fixed AppBar forceElevated: true,), SliverFixedExtentList (itemExtent: 50 Delegate: SliverChildBuilderDelegate ((BuildContext context, int index) {return ListTile (title: Text ("$index")) }, childCount: 5,),),] }, / / scrolling component body: ListView.builder (padding: const EdgeInsets.all (8), physics: const ClampingScrollPhysics (), / / requires 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)],),) optimize the linkage effect

SliverAppBar+CustomScrollView combination, when sliding in reverse, the SliverAppBar will return to the top of the screen as a whole, resulting in occlusion problems. To solve this problem, you can use the SliverOverlapAbsorber component to wrap SliverAppBar,body in header and add a SliverOverlapInjector to the front of the Sliver list.

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 tabs; MyPageView ({Key? Key, required this.tabs}): super (key: key); @ override State createState () {return _ MyPageViewState ();}} class _ MyPageViewState extends State 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 (),);}} Thank you for reading this article carefully. I hope the article "how to use Flutter Sliver scrolling components" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.