首页页面头部这里可以再改造一下，新建一个文件，放在 lib/app/header 里面，名字是 app_header.dart，在文件里定义一个小部件，名字是 AppHeader，小部件里面用一个 SliverAppBar。

打开 app_home.dart，把这个 Scaffold 里的 appBar 参数删除掉。

post_index.dart

然后打开 post_index.dart，在这个 CustomScrollView 的 slivers 里面，在 PostList() 小部件的上面添加一个 AppHeader。

app_header_title.dart

下面可以再新建一个文件，放在 lib/app/header/components 里面，名字是 app_header_title.dart ，在文件里定义一个小部件，名字是 AppHeaderTitle。

小部件里面 return 的可以用一个 Observer，添加一个 builder ，接收一个 context 参数， 在这个 builder 里面，声明一个 text ，值是一个 Text，文字暂时设置成发现，用 style 设置一下文字的样式，一个 TextStyle，把 fontSize 设置成 28，再把 fontWeight 设置成 FontWeight.bold。

下面声明一个 title ，值是一个 Container ，用 padding 添加点边距，EdgeInsets.only ，在左边添加点边距，大小是 8 。

它的 child 可以用一个 GestureDetector，因为我想在点按这个标题内容的时候去做点事情，暂时先只设置一下它的 child ，值是一个 Row，这个 Row 的 children 里面先添加一个 text 。

这个 builder 返回的是一个 Row，在它的 children 里面先添加一个 title 。 后面我们会再回来继续编辑这个小部件。

app_header.dart

回到 app_header.dart，先设置一下这个 SliverAppBar，这里可以把 floating 设置成 true ，这样向下滚动的时候会隐藏这个 SliverAppBar，向上滚动一点，就又会显示出来这个 SliverAppBar 。下面再把 elevation 设置成 30 ，然后设置一下 title，值是 AppHeaderTitle() 。

测试

下面再测试一下，现在页面头部这里用的就是一个 SliverAppBar ， 向下滚动页面，会隐藏它，然后再向上滚动，因为我们把它的 floating 设置成了 true，所以向上滚动一下，这个 SliverAppBar 就又会显示出来。