Flutter：实现一个滑动头部折叠的动画效果

更新：关于Slivers的具体用法，请看这篇文章：Flutter：Slivers大家族，让滑动视图的组合变得很简单！

本文写的只是SliverAppBar的用法，实际上使用Slivers可以实现多种折叠效果。

 

Android和iOS中都有类似的滑动折叠效果，Flutter官方也提供了NestedScrollView控件来实现类似的效果，但是因为Flutter的一些特性，布局容易出现溢出，这些坑需要自己处理。

 

  先上效果图：

头部折叠.gif

  效果实现是基于Google的gallery demo中的tabs_demo来实现的，主要是通过NestedScrollView控件来实现。

  头部为一个SliverAppBar，折叠部分的内容都放在了flexibleSpace中。

  全部代码如下：

import 'package:flutter/material.dart';

// Each TabBarView contains a _Page and for each _Page there is a list
// of _CardData objects. Each _CardData object is displayed by a _CardItem.

const String _kGalleryAssetsPackage = 'flutter_gallery_assets';

class _Page {
  _Page({this.label});

  final String label;

  String get id => label[0];

  @override
  String toString() => '$runtimeType("$label")';
}

class _CardData {
  const _CardData({this.title, this.imageAsset, this.imageAssetPackage});

  final String title;
  final String imageAsset;
  final String imageAssetPackage;
}

final Map<_Page, List<_CardData>> _allPages = <_Page, List<_CardData>>{
  new _Page(label: 'LEFT'): <_CardData>[
    const _CardData(
      title: 'Vintage Bluetooth Radio',
      imageAsset: 'shrine/products/radio.png',
      imageAssetPackage: _kGalleryAssetsPackage,
    ),
    const _CardData(
      title: 'Sunglasses',