Flutter中滚动时FloatingActionButton动画重复重建问题

我来帮你分析一下这个问题，你遇到的FAB在WebView滚动时先隐藏再显示的异常，大概率和不必要的组件重建、自定义动画与系统动画的冲突，以及FAB位置计算的频繁变化有关，咱们一步步来解决：

问题根源分析 #

1. 不必要的Build触发：WebView滚动时如果你的显示逻辑写在滚动回调里，可能会频繁调用setState；或者Scaffold的布局参数（比如scaffoldGeometry）随滚动变化，导致FAB每次都被重新创建，自定义动画的状态被重置，看起来就像先隐藏再显示。
2. 自定义动画与系统逻辑冲突：Visibility只是简单控制显示隐藏，但FAB自身的floatingActionButtonAnimator会处理位置变化的动画，当滚动导致FAB位置计算变化时，动画器会触发位置动画，叠加显示隐藏逻辑就出现了异常。
3. 位置计算的不稳定：你的MarginEndFloatFABLocation中，父类的getOffsetY可能随滚动时Scaffold的布局变化（比如底部栏高度变化），导致FAB目标位置频繁更新，触发不必要的动画。

具体解决方案 #

1. 用AnimatedSwitcher替代Visibility，精准控制显示隐藏动画 #

Visibility没有动画控制能力，而AnimatedSwitcher可以明确控制组件切换时的动画，避免和FAB自身的位置动画冲突：

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: AnimatedSwitcher(
      // 自定义显示隐藏的动画时长
      duration: const Duration(milliseconds: 300),
      switchInCurve: Curves.easeOut,
      switchOutCurve: Curves.easeIn,
      // 只有当_fabIsVisible变化时，才会触发切换动画
      child: _fabIsVisible
          ? FloatingActionButton(
              key: const ValueKey('scroll-to-top-fab'),
              onPressed: () {
                webView.scrollTo(x: 0, y: 0, animated: true);
              },
              child: const Icon(Icons.arrow_upward),
              backgroundColor: Theme.of(context).primaryColor,
            )
          : const SizedBox.shrink(),
    ),
    floatingActionButtonAnimator: NoFABAnimation(),
    floatingActionButtonLocation: MarginEndFloatFABLocation(),
    appBar: TopBar(widget.articlePreview.url),
    body: Builder(builder: (BuildContext context) {
      return InAppWebView(
        // 你的WebView配置
        onScrollChanged: (controller, x, y) {
          // 优化：只有当显示状态确实变化时才调用setState
          final shouldShowFab = y > 200; // 这里改成你的显示阈值
          if (shouldShowFab != _fabIsVisible) {
            setState(() {
              _fabIsVisible = shouldShowFab;
            });
          }
        },
      );
    }),
  );
}

2. 优化自定义动画器，避免不必要的动画触发 #

调整NoFABAnimation的逻辑，把缩放/旋转动画交给AnimatedSwitcher处理，只保留必要的位置动画：

class NoFABAnimation extends FloatingActionButtonAnimator {
  @override
  Offset getOffset({Offset begin, Offset end, double progress}) {
    // 线性插值实现位置动画，避免多余变量存储
    return Offset.lerp(begin, end, progress)!;
  }

  @override
  Animation<double> getRotationAnimation({Animation<double> parent}) {
    // 不需要旋转动画，返回固定值
    return AlwaysStoppedAnimation(0);
  }

  @override
  Animation<double> getScaleAnimation({Animation<double> parent}) {
    // 缩放动画交给AnimatedSwitcher，这里返回固定1.0
    return AlwaysStoppedAnimation(1);
  }
}

3. 稳定FAB的位置计算 #

确保MarginEndFloatFABLocation的偏移计算不会随滚动频繁变化：

class MarginEndFloatFABLocation extends StandardFabLocation with FabEndOffsetX, FabFloatOffsetY {
  @override
  double getOffsetY(ScaffoldPrelayoutGeometry scaffoldGeometry, double adjustment) {
    // 基于父类基础偏移，加上固定的方向调整值
    final baseOffset = super.getOffsetY(scaffoldGeometry, adjustment);
    final directionalAdjustment = scaffoldGeometry.textDirection == TextDirection.ltr ? -50.0 : 50.0;
    return baseOffset + directionalAdjustment;
  }
}

4. 避免FAB被频繁重建 #

把FAB实例缓存到State变量中，减少不必要的重建：

late final FloatingActionButton _scrollToTopFab;

@override
void initState() {
  super.initState();
  _scrollToTopFab = FloatingActionButton(
    key: const ValueKey('scroll-to-top-fab'),
    onPressed: () {
      webView.scrollTo(x: 0, y: 0, animated: true);
    },
    child: const Icon(Icons.arrow_upward),
  );
}

// 在build中直接使用缓存的实例
child: _fabIsVisible ? _scrollToTopFab : const SizedBox.shrink(),

验证效果 #

做完这些调整后，WebView滚动时，只有当_fabIsVisible的状态真正变化时，才会触发AnimatedSwitcher的显示/隐藏动画，FAB的位置动画也只会在必要时触发，不会出现先隐藏再显示的异常了。

内容的提问来源于stack exchange，提问作者progNewbie