Flutter - 在额外滚动条上显示行 - 列顶部(就像 Whatsapp 存档的聊天记录)

Question

我想在一列之上放置一行，这一开始是不可见的。只有当 SingleChildScrollview 的滚动偏移量为负数时才会可见。

换句话说，只有当用户滚动比正常情况(向下运动)更远时，该行才会显示。这是 Whatsapp 中的示例。 “搜索框”小部件最初不会显示，只有当您向上滚动时才会显示，一旦向下滚动就会消失。

更新

使用@Lulupointu 的回答，我能够做到这一点:

顶部小部件以流畅的动画滚动显示和隐藏。@Hooshyar 的回答也有效，但不太流畅，并且使用了不同的方法。

Answer 1

在这里使用 singleChildScrollView 是我使用 s NotificationListener() 小部件想到的，还有其他解决方案，但这是最简单的一个:

有一个 bool 值来确定容器可见性:

  bool shouldIShowTheUpperThing = false;

用 NotificationListener() 包装您的 SingleChildScrollView() :

NotificationListener(
        child: SingleChildScrollView(
          child: Column(
            children: [
              shouldIShowTheUpperThing == false ? Row(
    children: [
      Container(height: 0,),
    ],
    ) :   Row(
    children: [
      Expanded(child: Container(color: Colors.red , height: 100 , child: Text('the hidden box'),)),
    ],
    ),
              Container(
                padding: EdgeInsets.all(130),
                child: Text('data'),
                color: Colors.blueGrey,
              ),
              Container(
                padding: EdgeInsets.all(130),
                child: Text('data'),
                color: Colors.blueAccent,
              ),
              Container(
                padding: EdgeInsets.all(130),
                child: Text('data'),
                color: Colors.amber,
              ),
              Container(
                padding: EdgeInsets.all(130),
                child: Text('data'),
                color: Colors.black12,
              ),
              Container(
                padding: EdgeInsets.all(130),
                child: Text('data'),
              ),
            ],
          ),
        ),
        
        onNotification: (t) {
          if (t is ScrollNotification) {
            if (t.metrics.pixels < 1.0) {
              setState(() {
                shouldIShowTheUpperThing = true;
              });
            }
          }
          return true;
        });
  }