Flutter Sliver滾動(dòng)組件的演示代碼
更新時(shí)間：2021年11月17日 16:19:24 作者：xiangxiongfly915
本文通過(guò)實(shí)例代碼給大家介紹了Flutter Sliver滾動(dòng)組件的相關(guān)知識(shí)，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
Flutter Sliver滾動(dòng)組件
SliverList & SliverGrid
需要同時(shí)滾動(dòng)ListView和GridView時(shí)可以使用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：展開(kāi)區(qū)域的高度。
flexibleSpace：展開(kāi)取消顯示內(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組件可以控制滾動(dòng)的最大高度和最小高度，類似SliverAppBar效果。
build：顯示內(nèi)容。
maxExtent & minExtent：滾動(dòng)的高度范圍。
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組件可以將多個(gè)組件組合在一起，具有統(tǒng)一的滾動(dòng)效果，但是CustomScrollView只能嵌套Sliver系列的組件，如SliverList、SliverGrid、SliverPadding、SliverAppBar等。
NestedScrollView可以協(xié)調(diào)兩個(gè)滾動(dòng)組件滑動(dòng)。NestedScrollView在邏輯上將可滾動(dòng)組件分為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,
),
),
];
},
//滾動(dòng)組件
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)動(dòng)效果
SliverAppBar+CustomScrollView組合，當(dāng)反向滑動(dòng)時(shí)，SliverAppBar就會(huì)整體回到屏幕頂部，出現(xiàn)遮擋問(wèn)題，為了解決該問(wèn)題，可以用在header里用SliverOverlapAbsorber組件包裹SliverAppBar，body里Sliver列表最前面添加一個(gè)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(),
),
);
}
}
到此這篇關(guān)于Flutter Sliver滾動(dòng)組件的文章就介紹到這了,更多相關(guān)Flutter 滾動(dòng)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Flutter實(shí)現(xiàn)滾動(dòng)選擇數(shù)字
- Flutter滾動(dòng)組件之ListView使用方法詳解
- Flutter滾動(dòng)組件之SingleChildScrollView使用詳解
- Flutter實(shí)現(xiàn)文本滾動(dòng)高亮效果的示例講解
- Flutter 滾動(dòng)監(jiān)聽(tīng)及實(shí)戰(zhàn)appBar滾動(dòng)漸變的實(shí)現(xiàn)
- android使用flutter的ListView實(shí)現(xiàn)滾動(dòng)列表的示例代碼
- flutter實(shí)現(xiàn)頭部tabTop滾動(dòng)欄
相關(guān)文章
21天學(xué)習(xí)android開(kāi)發(fā)教程之SQLite分頁(yè)讀取
21天學(xué)習(xí)android開(kāi)發(fā)教程之SQLite分頁(yè)讀取，Android包含了常用于嵌入式系統(tǒng)的SQLite，免去了開(kāi)發(fā)者自己移植安裝的功夫，感興趣的朋友可以參考一下2016-02-02
Android入門(mén)之bindService的用法詳解
indService大家可以認(rèn)為它是和Android的一個(gè)共生體。即這個(gè)service所屬的activity如果消亡那么bindService也會(huì)消亡。本文將通過(guò)簡(jiǎn)單的例子帶大家了解一下bindService的用法，感興趣的可以了解一下2022-12-12
Android學(xué)習(xí)筆記-保存數(shù)據(jù)到SQL數(shù)據(jù)庫(kù)中(Saving Data in SQL Databases)
這篇文章主要介紹了Android學(xué)習(xí)筆記-保存數(shù)據(jù)到SQL數(shù)據(jù)庫(kù)中的(Saving Data in SQL Databases)2014-10-10
有時(shí)我們的程序使用默認(rèn)的Toast時(shí)會(huì)和程序的整體風(fēng)格不搭配，這個(gè)時(shí)候我們就需要自定義Toast，使其與我們的程序更加融合,使用自定義Toast，首先我們需要添加一個(gè)布局文件，該布局文件的結(jié)構(gòu)和Activity使用的布局文件結(jié)構(gòu)一致，在該布局文件中我們需設(shè)計(jì)我們Toast的布局2013-01-01
Android 仿日歷翻頁(yè)、仿htc時(shí)鐘翻頁(yè)、數(shù)字翻頁(yè)切換效果
這篇文章主要介紹了Android 仿日歷翻頁(yè)、仿htc時(shí)鐘翻頁(yè)、數(shù)字翻頁(yè)切換效果,需要的朋友可以參考下2017-07-07
Android 使用Vitamio打造自己的萬(wàn)能播放器（5）——在線播放（播放優(yōu)酷視頻）
本文主要介紹Android Vitamio的使用,這里給大家提供效果圖和代碼實(shí)例,來(lái)說(shuō)明Vitamio組件播放網(wǎng)絡(luò)視頻,有需要的小伙伴可以參考下2016-07-07
Android隱藏標(biāo)題欄及解決啟動(dòng)閃過(guò)標(biāo)題的實(shí)例詳解
這篇文章主要介紹了Android隱藏標(biāo)題欄及解決啟動(dòng)閃過(guò)標(biāo)題的實(shí)例詳解的相關(guān)資料,這里提供兩種方法幫助大家解決這種問(wèn)題，需要的朋友可以參考下2017-09-09
Android 中Crash時(shí)如何獲取異常信息詳解及實(shí)例
這篇文章主要介紹了Android 中Crash時(shí)如何獲取異常信息詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
android 仿微信demo——微信通訊錄界面功能實(shí)現(xiàn)(移動(dòng)端,服務(wù)端)
本系列文章主要介紹了微信小程序-閱讀小程序?qū)嵗╠emo），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望能給你們提供幫助2021-06-06
這篇文章主要介紹了android monkey命令詳解,Monkey 就是SDK中附帶的一個(gè)工具,該工具主要用于進(jìn)行壓力測(cè)試,需要的朋友可以參考下2014-03-03