当我在应用栏flexibleSpace中使用补间动画时，ios滑动导航时背景图像重叠

Question

在AppBar的flexibleSpace中使用补间动画并在iOS上执行滑动导航时，存在图像体验重叠的问题。

.

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: 

);
},
);
}
}

Answer 1

您只需使用像

ClipRect

这样的小部件来剪辑第二页的内容

更新您的第二个屏幕：

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

更改后应该如下所示：