本头条核心宗旨

欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本文核心要点

最近Flutter版本已经更新了，很积极的参加了一下新版本体验，虽然大家对Flutter这门技术有点排斥，并不是看好它的未来，但是我相信只要你参与评论，就说明你已经在开始关注它了，只有你关注了才能来评论，不管看好它还是不看好它，至少你还在观望。

今天我这边给大家分享一个组件：NestedScrollView，滚动页面都会用到的组件，一般会运用到一个页面有多种样式的滚动，就会使用这个组件，可以在其内部嵌套其他滚动视图的组件，其滚动位置是固有链接的。

在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView内部的任何列表都不会相互作用 与外部ScrollView。例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。

滚动隐藏AppBar

NestedScrollView(
 headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
   return <Widget>[SliverAppBar(
     title: Text('技术刚刚好'),
  )];
},
 body: ListView.builder(itemBuilder: (BuildContext context,int index){
   return Container(
     height: 50,
     color: Colors.primaries[index % Colors.primaries.length],
     alignment: Alignment.center,
     child: Text(
       '',
       style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  );
},itemCount: 20,),
)

其他属性

通过scrollDirection和reverse参数控制其滚动方向，用法如下：

NestedScrollView(
  scrollDirection: Axis.horizontal,
  reverse: true,
  ...
)

scrollDirection滚动方向，分为垂直和水平方向。

reverse参数表示反转滚动方向，并不是由垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。

controller为滚动控制器，可以监听滚到的位置，设置滚动的位置等，用法如下：

_scrollController = ScrollController();

//监听滚动位置
    _scrollController.addListener((){
      print('${_scrollController.position}');
    });
    //滚动到指定位置
    _scrollController.animateTo(20.0);

CustomScrollView(
  controller: _scrollController,
  ...
)

physics表示可滚动组件的物理滚动特性，系统提供的ScrollPhysics有：

• AlwaysScrollableScrollPhysics：总是可以滑动
• NeverScrollableScrollPhysics：禁止滚动
• BouncingScrollPhysics ：内容超过一屏 上拉有回弹效果
• ClampingScrollPhysics ：包裹内容 不会有回弹

谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。