有时候,当我们滑动列表时,希望AppBar可以自动隐藏,这一效果可以由两种方式实现:
1. SliverAppBar
详细代码:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: _sliverBuilder,
body: Center(
child: Text('hahaha'),
)),
);
}
}
List<Widget> _sliverBuilder(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
centerTitle: true, //标题居中
expandedHeight: 200.0, //展开高度200
backgroundColor: Colors.tealAccent,
floating: false, //不随着滑动隐藏标题
pinned: false, //不固定在顶部
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
background: Image.asset(
"assets/pic.jpg",
fit: BoxFit.cover,
),
),
)
];
}
2. CustomScrollView
代码:
_buildBody() {
return CustomScrollView(
physics: BouncingScrollPhysics(),
slivers: <Widget>[
SliverAppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.search, color: Color(0xffffffff)),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.refresh, color: Colors.white),
onPressed: () {
_setPoetryList();
},
)
],
leading: _buildAppBarLeading(),
floating: true,
),
new SliverPadding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 10.0),
sliver: new SliverList(
delegate: new SliverChildListDelegate(_getMainBody()),
),
),
],
);
}