scroll - 如何仅在用户滚动时显示小部件？

Question

我想隐藏屏幕上的按钮，并在用户开始滚动直到上次滚动后 5 秒后显示它们。

我用 GestureDetector 封装了 SingleChildScrollView ，并通过 onTap 回调更改可见性值，以使用 Visibility< 隐藏按钮 小部件。但是，GestureDetector 上没有像 onScroll 这样的事件。

是否有人成功实现了该效果，或者是否有任何内置动画可以实现我想要实现的效果？

Answer 1

你是对的，GestureDetector上没有onScroll事件，但是有onVerticalDrag事件，基本上是一样的，用另一个名字。

但是，为此，您实际上并不需要 GestureDetector。您可以监听滚动更改，使用 NotificationListener 处理 ScrollStartNotification 和 ScrollEndNotification 通知，因为您已经在使用 SingleChildScrollView.

我创建了一个小示例来向您展示它将产生以下结果: 滚动时，显示按钮的标志设置为 true，最后，它将重置回 false 并在 5 秒后重建没有按钮的树(如果没有更多)滚动通知介于两者之间(这就是为什么您不在 Future 完成之后但之前设置 _buttonShowing = false 的原因。

bool _buttonShowing = false;

  @override
  Widget build(BuildContext context) {
    List<Widget> columnWidgets = List<Widget>.filled(100, Container(height: 100.0, child: Placeholder()));

    if (_buttonShowing) {
      columnWidgets = List.from(columnWidgets)
        ..insert(
            3, Visibility(child: RaisedButton(child: Text('Press me'), onPressed: () {}), visible: _buttonShowing));
    }

    return Scaffold(
      appBar: AppBar(),
      body: NotificationListener<ScrollNotification>(
        onNotification: (scrollNotification) {
          if (scrollNotification is ScrollStartNotification) {
            if (!_buttonShowing) {
              setState(() => _buttonShowing = true);
            }
          } else if (scrollNotification is ScrollEndNotification) {
            if (_buttonShowing) {
              _buttonShowing = false;
              Future.delayed(Duration(seconds: 5)).then((_) => setState(() {}));
            }
          }
        },
        child: SingleChildScrollView(
          child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: columnWidgets),
        ),
      ),
    );
  }