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

Posted 2023-02-23

【中文标题】如何在 Flutter 中滚动带有粘性标题的堆叠容器？

【英文标题】：How to scroll stacked containers with sticky header in Flutter?

【发布时间】：2021-03-25 20:53:43

【问题描述】：

我正在尝试在 Flutter Web 中实现滚动，其中堆叠的容器很少，我使用 SingleChildScrollView 滚动小部件。但是，当我滚动第一个容器时，一切正常，但第二个容器的子容器响应滚动而没有完成初始容器。还有一种方法可以为第二个容器制作一个粘性标题。在第二个（蓝色）完成滚动后，如何使第三个容器（橙色）滚动？这是我想要实现的目标： 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,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  

【参考方案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],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );