SliverPersistentHeader

SliverPersistentHeader

我正在和Slivers合作。我有一个SliverAppBar,然后是SliverPersistentHeader,最后是SliverList。

我要实现的行为是SliverAppBar滚动离开屏幕,但SliverPersistentHeader保持固定在屏幕顶部。

我能够做到,但SliverPersistentHeader与android状态栏重叠。关于如何解决此问题的任何想法吗?

flutter - 固定的SliverPersistentHeader与Android StatusBar重叠-LMLPHP
flutter - 固定的SliverPersistentHeader与Android StatusBar重叠-LMLPHP

最后这是代码

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/

10-08 23:49