我正在和Slivers合作。我有一个SliverAppBar,然后是SliverPersistentHeader,最后是SliverList。
我要实现的行为是SliverAppBar滚动离开屏幕,但SliverPersistentHeader保持固定在屏幕顶部。
我能够做到,但SliverPersistentHeader与android状态栏重叠。关于如何解决此问题的任何想法吗?
最后这是代码
class ExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('SliverAppBar'),
pinned: false,
floating: true,
snap: true,
elevation: 0.0,
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
child: PreferredSize(
preferredSize: Size.fromHeight(40.0),
child: Container(
color: Theme.of(context).primaryColor,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('SliverPersistentHeader', style: TextStyle(color: Colors.white, fontSize: 20.0))
],
),
),
),
)
),
),
SliverFixedExtentList(
itemExtent: 150.0,
delegate: SliverChildListDelegate(
[
Container(color: Colors.red),
Container(color: Colors.purple),
Container(color: Colors.green),
Container(color: Colors.orange),
Container(color: Colors.yellow),
Container(color: Colors.pink),
],
),
),
],
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
final PreferredSize child;
_SliverAppBarDelegate({ this.child });
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
// TODO: implement build
return child;
}
@override
// TODO: implement maxExtent
double get maxExtent => child.preferredSize.height;
@override
// TODO: implement minExtent
double get minExtent => child.preferredSize.height;
@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
// TODO: implement shouldRebuild
return false;
}
}
最佳答案
只需将CustomScrollView
包装成SafeArea
即可:
return SafeArea(
child: CustomScrollView(
...
关于flutter - 固定的SliverPersistentHeader与Android StatusBar重叠,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53412812/