Flutter SliverAppBar顶部悬浮

首先来张图看看效果

73763e3ed7181aa1d230f305cfee6e78 (1).gif

这玩意就和安卓的协调布局一个样,按道理说做起来是差不多的,但是flutter这玩意,自带了自己的高度,所以要做成产品要求的设计,只能自己去改源码了,
代码块

const SliverAppBar({
    Key key,
    this.leading,//左侧的图标或文字，多为返回箭头
    this.automaticallyImplyLeading = true,//没有leading为true的时候，默认返回箭头，没有leading且为false，则显示title
    this.title,//标题
    this.actions,//标题右侧的操作
    this.flexibleSpace,//可以理解为SliverAppBar的背景内容区
    this.bottom,//SliverAppBar的底部区
    this.elevation,//阴影
    this.forceElevated = false,//是否显示阴影
    this.backgroundColor,//背景颜色
    this.brightness,//状态栏主题，默认Brightness.dark，可选参数light
    this.iconTheme,//SliverAppBar图标主题
    this.actionsIconTheme,//action图标主题
    this.textTheme,//文字主题
    this.primary = true,//是否显示在状态栏的下面,false就会占领状态栏的高度
    this.centerTitle,//标题是否居中显示
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//标题横向间距
    this.expandedHeight,//合并的高度，默认是状态栏的高度加AppBar的高度
    this.floating = false,//滑动时是否悬浮
    this.pinned = false,//标题栏是否固定
    this.snap = false,//配合floating使用
  })

使用SliverAppBar他会自带一个状态栏的高度完全没办法做到和设计稿一样的效果,去掉SliverAppBar的高度,将SliverAppBar源码拷贝一下,然后修改1190行左右,如下图的2个地方,就好了

78c3c50862db287264d0392f33c8847.png

参考:https://blog.csdn.net/yechaoa/article/details/90701321