iOS端AppBar flexibleSpace中Tween动画致侧滑导航图片重叠问题

问题描述 #

在iOS设备上，当在AppBar的flexibleSpace中使用Tween动画时，执行侧滑导航操作会出现图片重叠的异常：

• 实际效果：侧滑导航过程中，AppBar内的动画元素出现重叠显示
• 预期效果：侧滑导航时元素显示正常，无重叠现象

相关代码 #

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(
        flexibleSpace: CommunityBannerInAppBarWidget(),
      ),
      body: const Center(child: Text('second Screen')),
    );
  }
}

class CommunityBannerInAppBarWidget extends StatefulWidget {
  CommunityBannerInAppBarWidget({
    Key? key,
  }) : super(key: key);

  @override
  State createState() => _CommunityBannerInAppBarWidgetState();
}

class _CommunityBannerInAppBarWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
      tween: Tween(begin: 1.0, end: 1.5),
      duration: const Duration(milliseconds: 500),
      builder: (context, progress, child) {
        return Transform.scale(scale: progress, child: child);
      },
    );
  }
}

解决方案 #

方案1：给AppBar添加裁剪行为 #

iOS侧滑导航时，页面过渡会让AppBar内的动画元素超出可视范围，添加clipBehavior可裁剪超出部分：

appBar: AppBar(
  clipBehavior: Clip.hardEdge, // 添加该行
  flexibleSpace: CommunityBannerInAppBarWidget(),
),

方案2：给动画组件包裹裁剪容器 #

用ClipRect包裹TweenAnimationBuilder，限制动画元素的显示边界：

@override
Widget build(BuildContext context) {
  return ClipRect(
    child: TweenAnimationBuilder(
      tween: Tween(begin: 1.0, end: 1.5),
      duration: const Duration(milliseconds: 500),
      builder: (context, progress, child) {
        return Transform.scale(scale: progress, child: child);
      },
      child: // 你的图片或目标组件
    ),
  );
}

方案3：监听导航状态控制动画 #

通过监听页面路由状态，在侧滑开始时暂停/重置动画，避免动画冲突：

class _CommunityBannerInAppBarWidgetState extends State<CommunityBannerInAppBarWidget> with SingleTickerProviderStateMixin {
  late Animation<double> _animation;
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    );
    _animation = Tween(begin: 1.0, end: 1.5).animate(_controller);
    _controller.forward();

    // 监听路由状态
    ModalRoute.of(context)?.addStatusListener((status) {
      if (status == RouteStatus.pop) {
        _controller.reset(); // 侧滑开始时重置动画
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.scale(scale: _animation.value, child: child);
      },
      child: // 你的图片或目标组件
    );
  }
}

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