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

Question

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

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

是否有人成功实现了这种效果，或者是否有任何内置动画用于我想要实现的目标？

Answer 1

你说得对，没有任何onScroll上的事件GestureDetector ，但也有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),
        ),
      ),
    );
  }