首先来张图看看效果
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
