FloatingActionButton 动画在滚动时重建

Question

我在我的应用程序中使用了 FloatingActionButton。我的代码如下所示：

@override
Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: new Visibility(
            visible: _fabIsVisible,
            child: FloatingActionButton(
              onPressed: () {
                webView.scrollTo(x: 0, y: 0, animated: true);
              },
              child: Icon(Icons.arrow_upward),
              backgroundColor: Theme.of(context).primaryColor,
            )),
        floatingActionButtonLocation: MarginEndFloatFABLocation(),
        appBar: new TopBar(widget.articlePreview.url),
        body: Builder(builder: (BuildContext context) {
          return Container();
        }));
  }

class MarginEndFloatFABLocation extends StandardFabLocation with FabEndOffsetX, FabFloatOffsetY {
  @override
  double getOffsetY(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
    final double directionalAdjustment = scaffoldGeometry.textDirection == TextDirection.ltr ? -50.0 : 50.0;
    return super.getOffsetY(scaffoldGeometry, adjustment) + directionalAdjustment;
  }
}

我的 Container 里面有一个 InAppWebView。当我滚动内容时，按钮会发生这种情况：

那是我加的时候：floatingActionButtonAnimator: NoFABAnimation(),

class NoFABAnimation extends FloatingActionButtonAnimator {
  double _x;
  double _y;

  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
    _x = begin.dx + (end.dx - begin.dx) * progress;
    _y = begin.dy + (end.dy - begin.dy) * progress;
    return Offset(_x, _y);
  }

  @override
  Animation<double> getRotationAnimation({Animation<double> parent}) {
    return parent;
  }

  @override
  Animation<double> getScaleAnimation({Animation<double> parent}) {
    return parent;
  }
}

但是在添加这个之后我得到了这个行为：

我喜欢动画本身。我希望每次我使按钮可见时它是否会出现。但是现在按钮总是隐藏在滚动和之后重新出现。这绝对与我的 Visibility-子句无关，因为如果我没有这个就执行我的代码，情况完全相同。

任何人都知道我在这里做错了什么或者我如何才能防止这种 FAB 行为？

我猜想在 web 视图中滚动时以某种方式调用了构建，这会导致动画再次开始？

Answer 1

哦，我自己找到了答案。我的 inappwebview 中有这个监听器：

onScrollChanged: (InAppWebViewController controller, int x, int y) {
    if (y > 0) {
        setState(() {
          _fabIsVisible = true;
        });
    } else {
        setState(() {
          _fabIsVisible = false;
        });
    }
}

我更改了它，所以它只在确实有更改时才调用 setState。这解决了我的问题。

onScrollChanged: (InAppWebViewController controller, int x, int y) {
    if (y > 0) {
      if (!_fabIsVisible) {
        setState(() {
          _fabIsVisible = true;
        });
      }
    } else {
      if (_fabIsVisible) {
        setState(() {
          _fabIsVisible = false;
        });
      }
    }
  }

FloatingActionButton 动画在滚动时重建

FloatingActionButton Animation rebuilds on scroll

dart

floating-action-button

flutter