CustomScrollView

构造函数

 const CustomScrollView({
    Key key,
    Axis scrollDirection = Axis.vertical, //滑动的方向
    bool reverse = false, //控制 CustomScrollView 里列表项的排列顺序
    ScrollController controller, //可以控制 CustomScrollView 滚动的位置
                                                                     ScrollController 提供以下的几个功能：
                                                                     1.设置 CustomScrollView 滑动的初始位置
                                                                     2.可以控制 CustomScrollView 是否存储和恢复滑动的位置
                                                                     3.可以读取、设置当前滑动的位置
                                                                     可以继承 ScrollController 实现自定义的功能
                                                                     当 primary 为 true 时，controller 必须为 null
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    Key center, //放在 CustomScrollView 中间的 子Widget 的 key    
    double anchor = 0.0, //CustomScrollView 开始滑动的偏移量
                                                如果 anchor 为 0.0，则 CustomScrollView 的 子Widget 从头开始排列
                                                如果 anchor 为 0.5，则 CustomScrollView 的 子Widget 从中间开始排列
                                                如果 anchor 为 1.0，则 CustomScrollView 的 子Widget 从底部开始排列    
    double cacheExtent,
    this.slivers = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,//
                           确定处理拖动开始行为的方式。
                                                如果设置为[DragStartBehavior.start]，则在检测到拖动手势时将开始滚动拖动行为
                                                如果设置为[DragStartBehavior.down]，它将在首次检测到向下事件时开始    可选
  })

SliverAppBar

基本和AppBar一样,只是他只能在CustomScrollView中使用,应该很常见,滑动的时候固定appbar,就需要用到他.

const SliverAppBar({
    Key key,
    this.leading,                          //左上角添加组件
    this.automaticallyImplyLeading = true,
    this.title,   
    this.actions,               //右上角添加组件
    this.flexibleSpace,   //扩展的组件
    this.bottom,          //
    this.elevation,
    this.forceElevated = false,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.expandedHeight,
    this.floating = false,
    this.pinned = false,
    this.snap = false,
    this.stretch = false,
    this.stretchTriggerOffset = 100.0,
    this.onStretchTrigger,
    this.shape,
  })

大部分和appbar一样,主要说下重要的几个:

pinned

是否将导航栏部分固定在appbar的位置.这个需求在实际中很常用. 看看效果图.

当 pinned = false:
**

可以看到appbar并没有固定在最上面,而是根据内容划出了界面.

当 pinned = true :
**

这个应该是需求中经常用到的效果了.

floating

当floating = false :

当floating = true:



仔细看 ，区别是在列表整体向下滑动时,appbar开始显示的位置不同.
当为false时,向下滑动时,会先降列表内容滑动顶部,然后appbar会跟着列表滑动显示出来.如上图
当为true时,向下滑动时,appbar会先跟着列表滑动显示出来. 然后继续列表的滑动. 如上图

snap

不能单独使用要配合 floating 和 pinned
具体效果看官网地址

stretch

是否展开,默认false,直接看值为true的效果图,就明白了.

flexibleSpace

可以再里面添加扩展的内容:

 flexibleSpace: FlexibleSpaceBar(
   title: Text('开学季 Pinned 效果'),
   background: Image.network(
     "https://goss.cfp.cn/creative/vcg/800/new/VCG211165042753.jpg",
     fit: BoxFit.cover,
   ),
 ),

flexibleSpace: Row(
  children: <Widget>[
    Expanded(
      child: Image.network('https://goss.cfp.cn/creative/vcg/800/new/VCG211165042753.jpg',fit: BoxFit.cover,),
    )
  ],
),

通过测试发现 后面不是 FlexibleSpaceBar 的话, stretch = true 无效.
**

SliverPadding

和Padding一样.子控件是 sliver 类型…

const SliverPadding({
    Key key,
    @required this.padding,
    Widget sliver,
})

列子:

 SliverPadding(
   padding: EdgeInsets.only(top: 10),
   sliver: SliverToBoxAdapter(
     child: Container(
       height: 66,
       color: Colors.cyanAccent,
     ),
   ),
 ),

上图中在padding中添加了一个背景色为青色的容器widget

SliverToBoxAdapter

const SliverToBoxAdapter({
    Key key,
    Widget child,
  })

里面可以设置不是sliver类型的widget。如上图中的 padding中添加的 container

SliverGrid

 const SliverGrid({
    Key key,
    @required SliverChildDelegate delegate,
    @required this.gridDelegate,
  })

就两个协议,一个是布局协议一个展示协议.基本和GridView一样.也有count和extext… 不设置个数默认无数个
SliverChildListDelegate 这种方式前提是知道cell个数，比较少，好搭建
SliverChildBuilderDelegate 这种方式，可以根据数组去创建，不知道cell个数

SliverFixedExtentList

 const SliverFixedExtentList({
    Key key,
    @required SliverChildDelegate delegate,
    @required this.itemExtent,
  }) :

和listview差不多.也是协议 不设置个数默认无数个

例子:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MinePage extends StatefulWidget {
  @override
  _MinePageState createState() => _MinePageState();
}
class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
         slivers: <Widget>[
           SliverAppBar(
             pinned: true,
             stretch: true,
             expandedHeight: 200.0,
             flexibleSpace: FlexibleSpaceBar(
               title: Text('开学季'),
               background: Image.network(
                 "https://goss.cfp.cn/creative/vcg/800/new/VCG211165042753.jpg",
                 fit: BoxFit.cover,
               ),
             ),
           ),
           SliverPadding(padding: EdgeInsets.only(top: 10),),
           SliverGrid(
             //调整间距
             gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
               crossAxisSpacing: 10,
               maxCrossAxisExtent: 200,
               mainAxisSpacing: 10,
               childAspectRatio: 4.0
             ),
             //加载内容
             delegate: SliverChildBuilderDelegate(
                 (context,index) {
                   return Container( //设置每个item的内容
                     alignment: Alignment.center,
                     color: Colors.orangeAccent,
                     child: Text("$index"),
                   );
                 },
               childCount: 20, //设置个数
             ),
           ),
           SliverPadding(padding: EdgeInsets.only(top: 10),),
           SliverFixedExtentList(
             itemExtent: 50,
             //加载内容
             delegate: SliverChildBuilderDelegate(
                 (context, index) {
                   return Container(
                     alignment: Alignment.center,
                     color: Colors.deepPurpleAccent,
                     child: Text('$index'),
                   );
                 },
               //设置显示个数
               childCount: 20,
             ),
           )
         ],
    );
  }
}