Flutter ListView 滚动Item到指定位置，ListView与PigeVeiw联动

最近在学习Flutter,遇到一个需要ListView与PageVeiw联动的场景，网上搜索了不少文章，都没找到想要的结果。折腾了一天最后终于搞定了。最终效果如下：

lv+vp.gif

按照android原生开发的思路，实现上述效果需要以下几个步骤：
1，点击标题项，内容项滚动到特定页，同时这个标题项滚动到屏幕正中间
2，滑动内容页，标题页跟随滚动。

首先看第一步：
1.1 点击标题页，内容项滚动到特定页，这个效果比较简单，因为内容页是PageView，通过PageView的controller，轻松实现，代码如下

  //标题被点击时回调  滚动body页面
  void _tittleItemClickCall(int pos){
    _pageController.animateToPage(pos, duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
  }

1.2,点击标题项，该项滚动到屏幕正中间。
分析下实现这个效果需要哪些条件：a,屏幕的宽度，b,该项的位置已经宽度。

a,屏幕的宽度通过以下方式来获取：

//   获取屏幕宽高
    double windowW=MediaQuery.of(context).size.width;
//    double windowH=MediaQuery.of(context).size.height;

b,获取控件位置以及宽高。
查了些资料，大概也知道了需要使用GlobalKey来获取控件位置以及宽高。GlobKey使用步骤如下
A，初始化一个GlobalKey实例key；
B，将key设置给需要测量的Widget
C，通过key来获取Widget的位置以及宽高
关键代码如下：

    //初始化GlobalKey 
    GlobalKey key=GlobalKey(debugLabel:"abc");
    
    //给Widge设置key 
    Container(
        key: key,
        ...
    );

    //获取控件我位置  宽 高
    RenderBox box=key.currentContext.findRenderObject();
    Offset os=box.localToGlobal(Offset.zero);
    os.dx;
    os.dx;
    key.currentContext.size.height,
    key.currentContext.size.width

最后，实现文章开头的全部代码如下：

class MainPage extends StatelessWidget{

  static const _TITTLE_COUNT=50;
  List _tittles=[];
  PageController _pageController=PageController();
  void Function(int) pageCall;

  //title设置回来的回调  当body页面变化时，会调用参数中的函数，将结果传递到title界面
  void _pageChagedCall(void Function(int) call){
      this.pageCall=call;
  }

  //标题被点击时回调  滚动body页面
  void _tittleItemClickCall(int pos){
    _pageController.animateToPage(pos, duration: Duration(milliseconds: 200), curve: Curves.easeInOut);
  }

  void _pageChage(int pos){
    if(pageCall!=null){
      pageCall(pos);
    }
  }

  @override
  Widget build(BuildContext context) {
    //准备数据源
    _tittles.addAll(generateWordPairs().take(_TITTLE_COUNT));
    return Scaffold(
      appBar: AppBar(
        //因为tittle准备放置一个listview，设置这个属性title横向填满
        titleSpacing: 0.0,
        title:TittlePage(
            _tittles,
            setCall: _pageChagedCall,
            itemClick: _tittleItemClickCall,
        ),
      ),
      body: BodyPage(
        datas: _tittles,
        controller:_pageController ,
        pageChageCall: _pageChage,
      ),
    );
  }
}

class TittlePage extends StatefulWidget{
  List datas;
  void Function(void Function(int)) setCall;
  void Function(int) itemClick;
  TittlePage(this.datas,{this.setCall,this.itemClick});

  @override
  State createState() {
    // TODO: implement createState
    return TittlePageState(datas,setCall: setCall,itemClick: itemClick);
  }
}
class TittlePageState extends State{

  List datas;
  List keys=[];
  ScrollController _controller=ScrollController();
  void Function(void Function(int)) setCall;
  void Function(int) itemClick;
  int curItem=0;

  TittlePageState(this.datas,{this.setCall,this.itemClick}){
    setCall(bodyPageChange);
    for(int i=0;i datas;
  PageController controller;
  void Function(int) pageChageCall;
  BodyPage({this.datas,this.controller,this.pageChageCall});


  Widget _buildItemPage(int pos){
    return Container(
      alignment: Alignment.center,
      child: Text(datas[pos].asPascalCase,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 20),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return PageView.builder(
        controller: controller,
        itemCount: datas.length,
        onPageChanged: pageChageCall,
        itemBuilder:(context,pos){
          return _buildItemPage(pos);
        }
    );
  }
}