根据您的屏幕截图,我可以说您正在使用BouncingScrollPhysics
为您PageView
。 iOS 设备通常使用此行为。尽管如此,我也查看了您提供的整个源代码here https://pastebin.com/fnxgQHtJ.
什么地方出了错
您已添加PageView
没有伴随它Scaffold
or Material
小部件位于顶层,这就是为什么背景位于子项后面PageView
颜色是黑色。
https://dartpad.dev/c709e410d0a68248ac5b387b3bc6af93 https://dartpad.dev/c709e410d0a68248ac5b387b3bc6af93
从文档中:
Scaffold
实现基本的材料设计视觉布局结构。
如果没有这个小部件,您会注意到您的应用程序可能会占据设备的整个屏幕,包括通知栏,因为它(PageView
)不知道状态栏位于屏幕的什么位置。
你可以做什么
我注意到所有的孩子都添加了PageView
有个人的Scaffold
and AppBar
, 确实没有必要嵌套脚手架 https://api.flutter.dev/flutter/material/Scaffold-class.html#material.Scaffold.4你可能想使用TabBarView https://api.flutter.dev/flutter/material/TabBarView-class.html代替PageView
,并让父小部件处理AppBar
改变通过TabController https://api.flutter.dev/flutter/material/TabController-class.html.
但是,如果您认为重构会花费太多精力,请随时查看以下选项,这些选项只需进行最少的更改即可满足您的需求:
选项1。您可以将您的小部件包装在Scaffold
widget.
https://dartpad.dev/4620ff91444353f5e000d2063594bd96 https://dartpad.dev/4620ff91444353f5e000d2063594bd96
选项 2。鉴于嵌套Scaffold
小部件不是一个好的做法,您可以只使用简单的Material
小部件来包装你的PageView
与孩子们包裹着Scaffold
widget.
https://dartpad.dev/43f8730e5592ce1f96193fc01f08a29c https://dartpad.dev/43f8730e5592ce1f96193fc01f08a29c
这些解决方案将改变背景颜色PageView
从黑到白。
选项 3。如果你真的想摆脱动画,最简单的方法就是改变你的滚动物理:
physics: ClampingScrollPhysics(),
但是,当您尝试在屏幕末端滑动时,这仍然会产生发光或波纹效果。
为了进一步消除这种影响,我将与您分享以下答案:
-
如何去除滚动发光? https://stackoverflow.com/questions/51119795/how-to-remove-scroll-glow(适用于安卓)
-
如何去除ios上的过度滚动? https://stackoverflow.com/questions/58645048/how-to-remove-overscroll-on-ios(适用于 iOS)
进一步阅读
- https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html
- https://medium.com/flutter-community/custom-scroll-physicals-in-flutter-3224dd9e9b41 https://medium.com/flutter-community/custom-scroll-physics-in-flutter-3224dd9e9b41