码个蛋(codeegg)第 605 次推文
前言
Flutter系列文章:
《Flutter 入门指北(Part 3)之 Appbar,Scaffold 填坑》
《Flutter 入门指北(Part 5)之输入处理及实战》
上节最后留了个坑到这节来解决,因为涉及部件比较多,所以留到这边来继续讲,不然写太多了怕小伙伴看不下去
在上节最后,给小伙伴们展示了 SliveGrid 和 SliverFixedExtentList 的用法,基本上和 GridView 和 ListView 的用法差不多,所以这边就不多讲这两个部件了。
SliverAppBar
相信很多 Android 开发的小伙伴会用到 MaterialDesign 的 CollapsingToolbarLayout 来实现折叠头部,既然 Android 有的,那么 Flutter 也不会少,毕竟 Flutter 主打的也是 MaterialDesign 啊。首先看下 SliverAppBar 的源码吧,其实和 AppBar 的参数差不多,只是多了一些比较特殊的属性
const SliverAppBar({
Key key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace, // 通过这个来设置背景
this.bottom,
this.elevation,
this.forceElevated = false, // 是否显示层次感
this.backgroundColor,
this.brightness,
this.iconTheme,
this.textTheme,
this.primary = true,
this.centerTitle,
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.expandedHeight, // 展开的高度
// 以下三个等例子再讲
this.floating = false,
this.pinned = false,
this.snap = false,
})
别的参数应该不陌生吧,都是 AppBar 的,那么直接来看个例子吧,还是通过上节说的 CustomScrollView 来包裹 Sliver 部件
class SliverD