FloatingActionButton 动画在滚动时重建答案

【问题标题】：FloatingActionButton Animation rebuilds on scrollFloatingActionButton 动画在滚动时重建
【发布时间】：2021-03-09 15:47:25
【问题描述】：

我在我的应用程序中使用了 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;
  }
}

在我的容器内，内容是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-clause 无关，因为如果我在没有这个的情况下执行我的代码，这种情况完全相同。

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

我猜在 webview 中滚动时会以某种方式调用构建，这会导致动画重新开始？

【问题讨论】：

标签： flutter dart floating-action-button

【解决方案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;
        });
      }
    }
  }

【讨论】：