flutter - 在 Flutter 中实现折叠工具栏

Question

我正在尝试使用 SliverApp 栏在我的应用程序中实现折叠工具栏，但问题是当 SliverAppBar 折叠时 SliverAppBar 与我的内容重叠，我附上 gif 以供更多理解，

绿色背景中的内容位于工具栏下方，我想避免这种情况，感谢任何线索。

  @override
  Widget build(BuildContext context) {
    // TODO: implement buildr
    var _tabs = {"1", "2", "3"};
    return Scaffold(
      backgroundColor: Colors.white,
      body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  child: SliverAppBar(
                    expandedHeight: 250.0,
                    floating: false,
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                        centerTitle: true,
                        background: Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            image: DecorationImage(
                              fit: BoxFit.fill,
                              image: CachedNetworkImageProvider(
                                  newsPost.photos[0].url),
                            ),
                          ),
                        )),
                    forceElevated: innerBoxIsScrolled,
                  ))
            ];
          },
          body: SafeArea(
            top: false,
            bottom: false,
            child: Builder(
              builder: (BuildContext context) {
                return CustomScrollView(
                  slivers: <Widget>[
                    SliverOverlapInjector(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                          context),
                    ),
                    SliverPadding(
                      padding: const EdgeInsets.all(8.0),
                      sliver: SliverFillRemaining(child: _getBody()),
                    ),
                  ],
                );
              },
            ),
          )),
    );
  }

Answer 1

我认为你应该使用 SliverList而不是 SliverFillRemaining .

body: SafeArea(
        top: false,
        bottom: false,
        child: Builder(
          builder: (BuildContext context) {
            return CustomScrollView(
              shrinkWrap: true,
              slivers: <Widget>[
                SliverOverlapInjector(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                      context),
                ),
                SliverPadding(
                  padding: const EdgeInsets.all(0.0),
                  sliver: SliverList(
                    delegate: SliverChildBuilderDelegate((context, index) {
                      return Text('Lorem ipsum dolor sit');
                    }, childCount: 1),
                  ),
                ),
              ],
            );
          },
        ),
      )