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

Question

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

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

有人成功实现了这种效果吗？或者我想要实现的内置动画是什么？

Answer 1

是的，onScroll上没有任何GestureDetector事件，但是有onVerticalDrag个事件，它们基本上是相同的，只是名字不同。

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

我创建了一个小示例向您展示它将产生以下结果： 滚动时，将显示按钮的标志设置为true，最后，如果之间没有滚动通知，则它将重置为false，并在5秒后无按钮重建树（这就是为什么您在_buttonShowing = false完成后而不在此之前未设置Future的原因。

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