flutter - 将SafeArea添加到SliverAppBar

如何使SliverAppBar中的FlexibleSpaceBar兑现SafeArea？

CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              title: FittedBox(
                  fit: BoxFit.fitWidth,
                  child: Image.asset('assets/images/user.png')),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              TextField(),
            ]),
          )
        ],
      )

我需要图像始终在os header 下方



我试图用SafeArea小部件包装它，但是没有用，并且崩溃了

最佳答案

以下应该工作:

class TestSafeArea extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPersistentHeader(
              pinned: true,
              delegate: SafeAreaPersistentHeaderDelegate(
                  expandedHeight: 200,
                  child: Image.asset('assets/YOUR_IMAGE.png'))),
          SliverList(
            delegate: SliverChildListDelegate([
              TextField(),
            ]),
          )
        ],
      ),
    );
  }
}

class SafeAreaPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;

  final double expandedHeight;

  SafeAreaPersistentHeaderDelegate({this.child, this.expandedHeight});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SafeArea(bottom: false, child: SizedBox.expand(child: child));
  }

  @override
  double get maxExtent => expandedHeight;

  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(SafeAreaPersistentHeaderDelegate old) {
    if (old.child != child) {
      return true;
    }
    return false;
  }
}

抱歉造成困惑!