SliverAppBarページコントロールは、Android CollapsingToolbarLayoutに似た頭部、折りたたみ効果を、拡大して実施することができます。
SliverAppBarが達成される効果の下で見て、次のようにレンダリング：
用いてSliverAppBar制御ニーズとCustomScrollViewは、SliverAppBarは、通常、他のスライバコントロール続いて、第一繊維束に置きました。
CustomScrollView（
スライバー：[
SliverAppBar（
),
//其他sliver控件
],
)
構造SliverAppBarおよびその他のスライバのコントロールを次のように
SliverAppBarは非常に重要なパラメータflexibleSpaceを持っている、flexibleSpaceはSliverAppBar拡張し、折り畳み領域で、expandedHeightとflexibleSpaceで使用するために、
expandedHeightは、高さflexibleSpace表し
SliverAppBar（
200.0、：expandedHeight
flexibleSpace：FlexibleSpaceBarを（
),
),
SliverAppBar其他常用属性说明如下：
属性 说明
leading 左侧控件，通常情况下为"返回"图标
title 标题，通常为Text控件
actions 右侧控件
flexibleSpace 展开和折叠区域
bottom 底部控件
elevation 阴影
expandedHeight 展开区域的高度
floating 设置为true时，向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现
pinned 设置为true时，当SliverAppBar内容滑出屏幕时，将始终渲染一个固定在顶部的收起状态
snap 设置为true时，当手指放开时，SliverAppBar会根据当前的位置进行调整，始终保持展开或收起的状态，此效果在floating=true时生效
实现文章开头效果的整体代码如下：
class SliverAppBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text(‘复仇者联盟’),
background: Image.network(
‘http://img.haote.com/upload/20180918/2018091815372344164.jpg’,
fit: BoxFit.fitHeight,
),
),
),
SliverFixedExtentList(
itemExtent: 80.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Container(
アラインメント：Alignment.center、
色：Colors.primaries [（インデックス18％）]、
子：テキスト（ ''）、
）、
）。
}、
）、
）、
]
）。
}
}
この記事はあなたを助けている場合、スキャンコード懸念のサブスクリプション番号を歓迎し、親指は、前方、コメントは、私は報酬を共有し続ける最大の力です。
