首先來張圖看看效果
73763e3ed7181aa1d230f305cfee6e78 (1).gif
這玩意就和安卓的協(xié)調(diào)布局一個樣,按道理說做起來是差不多的,但是flutter這玩意,自帶了自己的高度,所以要做成產(chǎn)品要求的設計,只能自己去改源碼了,
代碼塊
const SliverAppBar({
Key key,
this.leading,//左側(cè)的圖標或文字，多為返回箭頭
this.automaticallyImplyLeading = true,//沒有l(wèi)eading為true的時候丁逝，默認返回箭頭梭姓，沒有l(wèi)eading且為false，則顯示title
this.title,//標題
this.actions,//標題右側(cè)的操作
this.flexibleSpace,//可以理解為SliverAppBar的背景內(nèi)容區(qū)
this.bottom,//SliverAppBar的底部區(qū)
this.elevation,//陰影
this.forceElevated = false,//是否顯示陰影
this.backgroundColor,//背景顏色
this.brightness,//狀態(tài)欄主題罪既，默認Brightness.dark释牺，可選參數(shù)light
this.iconTheme,//SliverAppBar圖標主題
this.actionsIconTheme,//action圖標主題
this.textTheme,//文字主題
this.primary = true,//是否顯示在狀態(tài)欄的下面,false就會占領(lǐng)狀態(tài)欄的高度
this.centerTitle,//標題是否居中顯示
this.titleSpacing = NavigationToolbar.kMiddleSpacing,//標題橫向間距
this.expandedHeight,//合并的高度，默認是狀態(tài)欄的高度加AppBar的高度
this.floating = false,//滑動時是否懸浮
this.pinned = false,//標題欄是否固定
this.snap = false,//配合floating使用
})
使用SliverAppBar他會自帶一個狀態(tài)欄的高度完全沒辦法做到和設計稿一樣的效果,去掉SliverAppBar的高度,將SliverAppBar源碼拷貝一下,然后修改1190行左右,如下圖的2個地方,就好了
78c3c50862db287264d0392f33c8847.png
