Flutter 颤振中折叠工具栏的实现

我试图在我的应用程序中使用SliveApp bar实现折叠工具栏，但问题是当SliveApp bar折叠时，SliveApp bar与我的内容重叠，我将附加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()),
                    ),
                  ],
                );
              },
            ),
          )),
    );
  }

@覆盖
小部件构建（构建上下文）{
//TODO:实现buildr
var_tabs={“1”、“2”、“3”}；
返回脚手架(
背景颜色：Colors.white，
正文：嵌套滚动视图(
headerSliverBuilder：（BuildContext上下文，boolInnerBoxIsCrolled）{
返回[
银光吸收器(
处理：
NestedScrollView.SliverOverlapsAberHandleFor（上下文），
孩子：滑杆(
扩展高度：250.0，
浮动：假，
对,，
flexibleSpace:FlexibleSpaceBar(
标题：对，
背景：集装箱(
装饰：盒子装饰(
形状：BoxShape.rectangle，
图像：装饰图像(
fit:BoxFit.fill，
图像：CachedNetworkImageProvider(
newsPost.photos[0].url），
),
),
)),
强制提升：内包装箱为羊角形，
))
];
},
正文：安全区(
上图：错，
底部：错误，
孩子：建筑工人(
生成器：（BuildContext上下文）{
返回自定义滚动视图(
条子：[
滑动式喷油器(
句柄：NestedScrollView.SliverOverlapperHandleFor(
上下文），
),
填缝料(
填充：常数边集全部（8.0），
银条：银条填充剩余（子项：_getBody（）），
),
],
);
},
),
)),
);
}

---

我认为你应该使用

SliverList

而不是

SliverList

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),
                  ),
                ),
              ],
            );
          },
        ),
      )

主体：安全区域(
上图：错，
底部：错误，
孩子：建筑工人(
生成器：（BuildContext上下文）{
返回自定义滚动视图(
收缩膜：对，
条子：[
滑动式喷油器(
句柄：NestedScrollView.SliverOverlapperHandleFor(
上下文），
),
填缝料(
填充：常量边集全部（0.0），
银条：银条列表(
委托：SliverChildBuilderDelegate（（上下文，索引）{
返回文本（“Lorem ipsum dolor sit”）；
}，儿童人数：1），
),
),
],
);
},
),
)

SliverAppBar

创建可放置在

嵌套滚动视图中的材质设计应用程序栏。两者结合起来帮助我们实现视差滚动

SafeArea(
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 240.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(
                      "App Bar",
                    ),
                    background: Image.network(
                      "https://images.pexels.com/photos/4148020/pexels-photo-4148020.jpeg",
                      fit: BoxFit.cover,
                    )),
              ),
            ];
          },
          body: Center(
            child: Text("Hello World!!!"),
          ),
        ),
      ),
    );

安全区(
孩子：脚手架(
正文：嵌套滚动视图(
headerSliverBuilder：（BuildContext上下文，boolInnerBoxIsCrolled）{
返回[
滑杆(
扩展高度：240.0，
浮动：假，
对,，
flexibleSpace:FlexibleSpaceBar(
标题：对，
标题：正文(
“应用程序栏”，
),
背景：Image.net(
"https://images.pexels.com/photos/4148020/pexels-photo-4148020.jpeg",
适合：BoxFit.cover，
)),
),
];
},
正文：中(
孩子：文本（“你好，世界！！！”，
),
),
),
);

你的目标是什么，让文本进入应用程序栏？