固定的 SliverPersistentHeader 与 Android StatusBar 重叠
Pinned SliverPersistentHeader overlaps with Android StatusBar
我正在与 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(
...
此外,您可能需要使用脚手架固定滚动小部件:
return Scaffold(
body: SafeArea(
child: CustomScrollView...
我正在与 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(
...
此外,您可能需要使用脚手架固定滚动小部件:
return Scaffold(
body: SafeArea(
child: CustomScrollView...