Flutter Sliver滾動組件的演示代碼
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:展開區(qū)域的高度。
flexibleSpace:展開取消顯示內(nèi)容。
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:顯示內(nèi)容。
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組件可以將多個組件組合在一起,具有統(tǒng)一的滾動效果,但是CustomScrollView只能嵌套Sliver系列的組件,如SliverList、SliverGrid、SliverPadding、SliverAppBar等。
NestedScrollView可以協(xié)調(diào)兩個滾動組件滑動。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)], ), )
優(yōu)化聯(lián)動效果
SliverAppBar+CustomScrollView組合,當反向滑動時,SliverAppBar就會整體回到屏幕頂部,出現(xiàn)遮擋問題,為了解決該問題,可以用在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 滾動組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
21天學習android開發(fā)教程之SQLite分頁讀取
21天學習android開發(fā)教程之SQLite分頁讀取,Android包含了常用于嵌入式系統(tǒng)的SQLite,免去了開發(fā)者自己移植安裝的功夫,感興趣的朋友可以參考一下2016-02-02Android學習筆記-保存數(shù)據(jù)到SQL數(shù)據(jù)庫中(Saving Data in SQL Databases)
這篇文章主要介紹了Android學習筆記-保存數(shù)據(jù)到SQL數(shù)據(jù)庫中的(Saving Data in SQL Databases)2014-10-10Android 仿日歷翻頁、仿htc時鐘翻頁、數(shù)字翻頁切換效果
這篇文章主要介紹了Android 仿日歷翻頁、仿htc時鐘翻頁、數(shù)字翻頁切換效果,需要的朋友可以參考下2017-07-07Android 使用Vitamio打造自己的萬能播放器(5)——在線播放(播放優(yōu)酷視頻)
本文主要介紹Android Vitamio的使用,這里給大家提供效果圖和代碼實例,來說明Vitamio組件播放網(wǎng)絡視頻,有需要的小伙伴可以參考下2016-07-07android 仿微信demo——微信通訊錄界面功能實現(xiàn)(移動端,服務端)
本系列文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能給你們提供幫助2021-06-06