在导航栏存在的情况实现内容顶到屏幕上方的效果

109 阅读1分钟

实现的最终效果图

最终实现效果图

Scaffold 设置了 appbarbody最初样式

image.png

看好了,接下来就是操作的时候了

1、首先设置AppBar部件的属性shadowColorbackgroundColor的颜色为透明

backgroundColor: Color.fromRGBO(0, 0, 0, 0),
shadowColor: Color.fromRGBO(0, 0, 0, 0),

image.png

2、然后设置Scaffold部件 的属性 extendBodyBehindAppBartrue

image.png

3、如此发现通过滑动,可以抵达顶部。接着就是去除body上边的高度。设置MediaQuery.removePadding 来去除内容的上边距

MediaQuery.removePadding(
    removeTop: true,
    context: context,
    child: ListView()
)

此时即可实现带有AppBar的情况下,还能将内容顶到屏幕顶部的效果。如第一张那个图片的效果