Flutter如何实现视差滚动？

Flutter如何实现视差滚动？

效果如下：

在Flutter 中实现视差滚动，非常简单，Flutter已经提供相关的控件。CustomScrollView
CustomScrollView是一个可以实现多个嵌套滚动自定义控件。可以同时嵌套多个GridView、多个ListView或者混合嵌套，同时保证一致的滑动效果。

所有需要滚动的模块都必须是Sliver。可滚动widget，如ListView、GridView等都有对应的Sliver实现如SliverList、SliverGrid等。

对于大多数Sliver来说，它们和可滚动Widget最主要的区别是Sliver不会包含Scrollable Widget，也就是说Sliver本身不包含滚动交互模型 ，正因如此，CustomScrollView才可以将多个Sliver"粘"在一起，这些Sliver共用CustomScrollView的Scrollable，最终实现统一的滑动效果。

import 'package:flutter/material.dart';
class CustomView extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => CustomViewState();

}

class CustomViewState extends State<CustomView>{

  bool isToTop = false;
  //滚动控制器
  ScrollController _controller;

  void _onPressed(){
   //回到ListView顶部
    _controller.animateTo(0, duration: Duration(milliseconds: 200), curve: Curves.ease);
  }

  @override
  void initState() {
    _controller = ScrollController();
    _controller.addListener((){

      if(_controller.offset > 1000){
        setState(() {
          isToTop = true;
        });
      }else if(_controller.offset <=500){
        setState(() {
          isToTop = false;
        });

      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor:Colors.white,
        appBar: AppBar(title: Text("CustomView AppBar Title")),
        body: CustomScrollView(
          controller: _controller,
          slivers: <Widget>[
            SliverAppBar(
              title: Text("视差滚动效果",style: TextStyle(color: Colors.grey,fontWeight: FontWeight.bold)),
              floating: true,
              flexibleSpace:
              Image.network("http://img95.699pic.com/photo/50057/7197.jpg_wh300.jpg"
                  ,fit:BoxFit.cover),
              expandedHeight: 200,
            ),
            SliverList( 
              delegate: SliverChildBuilderDelegate(
                    (context,index)=>ListTile(title: Text('Item $index')),
                childCount:100,
              ),
            )
          ],
        ),
        floatingActionButton: isToTop?FloatingActionButton(
            onPressed: ()=>_onPressed(),
            child:Icon(Icons.arrow_upward)
        ):null,
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();