Flutter 如何在颤振中滚动带有粘性标题的堆叠容器？

我试图实现在颤振网页滚动，我有几个容器堆叠，我使用SingleChildScrollView滚动小部件。但是，当我滚动第一个容器时，一切正常，但第二个容器（第二个容器的子容器）响应滚动，而没有完成初始的滚动。还有一种方法可以为第二个容器制作一个粘性头。在第二个（蓝色）容器完成滚动后，如何使第三个容器（橙色）滚动？以下是我努力实现的目标：

到目前为止，我得到的是：

class主屏幕扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：堆栈(
儿童：[
IntroScreen（），
SingleChildScrollView(
子：容器(
子：列(
儿童：[
大小盒子(
高度：MediaQuery.of（context）.size.height-100，
),
容器(
高度：MediaQuery.of（context）.size.height，
宽度：MediaQuery.of（context）.size.width，
颜色：颜色，蓝色，
子：SingleChildScrollView(
子：列(
儿童：[
大小盒子(
高度：MediaQuery.of（context）.size.height，
),
容器(
填充：仅限边缘设置（顶部：100），
高度：MediaQuery.of（context）.size.height，
宽度：MediaQuery.of（context）.size.width，
颜色：颜色。橙色，
),
],
),
),
),
],
),
),
),
],
),
);
}
}

您可以使用棉条来实现它

SliveToboxAdapter

用屏幕高度-应用程序栏高度填充透明区域

SliverAppBar

：通过将floating和pin设置为true，使其具有粘性

class主屏幕扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：堆栈(
儿童：[
IntroScreen（），
自定义滚动视图(
条子：[
滑动双轴适配器(
子：容器(
高度：MediaQuery.of（context）.size.height-50，
),
),
滑杆(
//身高：50，
浮动：是的，
对,，
标题：集装箱(
子项：居中（子项：文本（‘标题’），
),
),
银表(
代表：SliverChildBuilderDelegate(
（上下文，索引）=>容器(
高度：MediaQuery.of（context）.size.height-50，
颜色：颜色.primaries[索引%Colors.primaries.length]，
),
),
),
],
),
],
),
);
}
}

非常感谢您，它成功了！

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          IntroScreen(),
          SingleChildScrollView(
            child: Container(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: MediaQuery.of(context).size.height - 100,
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.blue,
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          SizedBox(
                            height: MediaQuery.of(context).size.height,
                          ),
                          Container(
                            padding: EdgeInsets.only(top: 100),
                            height: MediaQuery.of(context).size.height,
                            width: MediaQuery.of(context).size.width,
                            color: Colors.orange,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          IntroScreen(),
          CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Container(
                  height: MediaQuery.of(context).size.height - 50,
                ),
              ),
              SliverAppBar(
                // toolbarHeight: 50,
                floating: true,
                pinned: true,
                title: Container(
                  child: Center(child: Text('Header')),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) => Container(
                    height: MediaQuery.of(context).size.height-50,
                    color: Colors.primaries[index % Colors.primaries.length],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}