Flutter-Sliver
October 3, 2022 •
Comment
Slivers
Sliver世界
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(child: FlutterLogo(size: 200)),
SliverGrid.count(
crossAxisCount: 4,
children: List.generate(
44,
(index) => Container(
height: 200,
color: Colors.primaries[index % 18],
),
),
),
SliverList(delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
height: 200,
color: Colors.primaries[index % 18],
);
},
))
],
),
);
SliverPrototypeExtentList
CustomScrollView(
slivers: [
SliverPrototypeExtentList( // 根据用户手机上的item大小来设置extend,利于性能优化
delegate: SliverChildListDelegate([
Text('hello'),
Text('hello'),
Text('hello'),
]),
prototypeItem: FlutterLogo( // 这里的组件就是item
size: 48,
),
),
],
),
SliverFillViewport
CustomScrollView(
slivers: [
SliverFillViewport( //类似Pageview一样充满整个屏幕视图
delegate: SliverChildListDelegate([
Container(color: Colors.red),
Container(color: Colors.amber),
Container(color: Colors.green),
]),
),
],
),
SliverAppBar(实用的带动画AppBar)
CustomScrollView(
slivers: [
SliverAppBar(
// title: Text('Sliver App Bar'), // 自带的title
// floating: true, // 滑动隐藏/显示
// snap: true, // 是否吸附,完整显示/隐藏
pinned: true, // 固定住,不隐藏的
flexibleSpace: FlexibleSpaceBar( // 上拉预留空间
background: FlutterLogo(),
title: Text('Hello, Sliver App bar!'),
),
expandedHeight: 300, // 上拉预留空间的高度
),
SliverToBoxAdapter(
child: Placeholder(),
),
SliverList(
delegate: SliverChildListDelegate([
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 200),
FlutterLogo(size: 200),
FlutterLogo(size: 200),
FlutterLogo(size: 200),
]))
],
),
SliverAppBar(
// title: Text('Sliver App Bar'),
// floating: true,
// snap: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: FlutterLogo(),
title: Text('Hello, Sliver App bar!'),
stretchModes: [ // 拉伸动画
StretchMode.blurBackground,
StretchMode.zoomBackground,
StretchMode.fadeTitle,
],
collapseMode: CollapseMode.parallax, // 视差效果
),
expandedHeight: 300,
stretch: true, // 应用拉伸动画
),
计算剩余内容
slivers: [
SliverAppBar(
title: Text('flutter sliver.'),
),
SliverToBoxAdapter(
child: FlutterLogo(size: 230),
),
SliverGrid(
delegate: SliverChildListDelegate([
Icon(Icons.add),
Icon(Icons.dashboard),
Icon(Icons.fiber_dvr_sharp),
Icon(Icons.water_damage),
]),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 180,
),
),
SliverToBoxAdapter(
child: Divider(
height: 30,
thickness: 4,
indent: 20,
endIndent: 20,
color: Colors.amber,
),
),
SliverFillRemaining( // 计算屏幕剩余的页面内容
child: Container(
alignment: Alignment.center,
color: Colors.black,
child: CircularProgressIndicator(),
),
),
],