Flutter入门指北（Part 8）之Sliver 组件及NestedScrollView

码个蛋(codeegg)第 605 次推文

前言

Flutter系列文章:

《Flutter 入门指北(Part 1)之 Dart》

《Flutter 入门指北(Part 2)之基础部件》

《Flutter 入门指北(Part 3)之 Appbar，Scaffold 填坑》

《Flutter 入门指北(Part 4)之容器部件》

《Flutter 入门指北(Part 5)之输入处理及实战》

《Flutter 入门指北(Part 6) 之路由》

《Flutter 入门指北(Part 7)之滑动部件》

上节最后留了个坑到这节来解决，因为涉及部件比较多，所以留到这边来继续讲，不然写太多了怕小伙伴看不下去

在上节最后，给小伙伴们展示了 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