固定的SliverPersistentHeader与Android状态栏重叠

Question

我正在使用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;
  }

}

- Sebastian

---

你最后解决这个问题了吗？我有一个粗糙的解决方法，但它需要使用“栈”来显示一个带有状态栏高度的彩色容器，该容器位于被“安全区域”包裹的滚动视图后面。 - Chris

Answer 1

只需将您的CustomScrollView包装到SafeArea中即可：

 return SafeArea(
      child: CustomScrollView(
             ...

- diegoveloper

---

据称，SafeArea与SliverPersistentHeader不兼容。 - Gabryel Ferreira

Answer 2

此外，您可能需要使用脚手架来保持滚动小部件的位置：

return Scaffold(
           body: SafeArea(
                 child: CustomScrollView...

- Hector Waldmann

---

你能否编辑并解释一下这个答案在做什么，以及它与几年前提交的另一个答案有何不同？ - General Grievance