FloatingActionButton 动画在滚动时重建

时间:2021-03-09 15:47:25

标签: flutter dart floating-action-button

我在我的应用中使用了 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。当我滚动内容时,按钮会发生这种情况:

enter image description here

那是我添加的时候: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;
  }
}

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

enter image description here

我喜欢动画本身。我想每次让按钮可见时它是否都会出现。但是现在按钮总是在滚动时隐藏,然后再重新出现。而且这绝对与我的 Visibility 子句无关,因为如果我在没有这个的情况下执行我的代码,这会发生完全相同的情况。

有谁知道我在这里做错了什么,或者我如何防止这种 FAB 行为?

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

1 个答案:

答案 0 :(得分:0)

哦,我自己才找到答案。我的 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;
        });
      }
    }
  }