如何在 Flutter 中滚动带有粘性 header 的堆叠容器？

Question

我正在尝试在 Flutter Web 中实现滚动，其中我有几个堆叠的容器，我使用 SingleChildScrollView 来滚动小部件。但是，当我滚动第一个容器时，一切正常，但是第二个容器的 child 响应滚动而没有完成初始容器。还有一种方法可以为第二个容器制作粘性 header。如何在第二个（蓝色）容器完成滚动后让第三个容器（橙色）滚动？这是我想要实现的目标： https://yobithemes.com/demo/html/freda/dark-video-index.html

到目前为止我得到的是：

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

Answer 1

你可以用sliver来实现

SliverToBoxAdapter 用 屏幕高度 - 应用栏高度 .

填充透明区域

SliverAppBar：通过将 floating 和 pin 设置为 true

使其具有粘性

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

如何在 Flutter 中滚动带有粘性 header 的堆叠容器？

How to scroll stacked containers with sticky header in Flutter?

flutter

flutter-layout

flutter-web