SliverAppBar简单应用和说明

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SliverAppBarDemo extends StatefulWidget{
  @override
  _SliverAppBarDemoState createState()=>_SliverAppBarDemoState();
}
class _SliverAppBarDemoState extends State<SliverAppBarDemo>{
  ScrollController _customerScrollViewController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _customerScrollViewController=ScrollController();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      //appBar: null,
      body: CustomScrollView(
        scrollDirection: Axis.vertical,//默认vertical，设置试图的滚动方向，是上下滚动，还是左右滚动
        reverse: false,//默认值false,滚动方向是否沿着读取方向滚动，如果当前是从上往下滚动，设置为true，那么就是从下往上滚动
        controller: _customerScrollViewController,//滚动对象，可以控制该视图的滚动位置
        primary: false,//默认true，是否与父级关联主滚动视图，controller默认设置为null
        physics: AlwaysScrollableScrollPhysics(),//滚动视图应如何响应用户输入。AlwaysScrollableScrollPhysics,总是允许用户滚动
        shrinkWrap: false,//默认false，[scrollDirection]中滚动视图的范围是否应由正在查看的内容确定。
        semanticChildCount: 10,//子控件的数量
        slivers: [
          SliverAppBar(
            //leading，标题前面的控件，例如默认给的返回按钮
            leading: IconButton(icon: Icon(Icons.ac_unit),onPressed: (){
              Navigator.pop(context,'');
            },),
            //前导小部件的宽度,默认56
            leadingWidth:50,
            //标题
            title: Text("SliverAppbarDemo SliverAppbarDemo SliverAppbarDemo SliverAppbarDemo SliverAppbarDemo SliverAppbarDemo",
              maxLines: 3,
            ),
            //actions,标题后面现实的控件
            actions: [
              IconButton(icon: Icon(Icons.access_alarm),onPressed:(){}),
            ],
            //堆叠在状态栏和标题栏后面，设置了flexibleSpace，会遮挡backgroundColor背景色,brightness亮度
            flexibleSpace: Container(
              //height: 250,
              //width: 500,
              color: Colors.red,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(Icons.home),
                  Text('flexibleSpace'),
                  Icon(Icons.home),
                  Icon(Icons.home),
                  Icon(Icons.home),
                ],
              ),
            ),
            //在标题栏下面的控件，一般是tabbar，也可以是其他
            bottom: PreferredSize(
              preferredSize: Size(MediaQuery.of(context).size.width,100),
              child: Container(
                height: 100,
                width: 100,
                color: Colors.green,
              ),
            ),
            //标题栏下方阴阳范围
            elevation: 10.0,
            //标题栏下方阴影颜色
            shadowColor: Colors.yellow,
            //是否显示合适的阴影
            forceElevated: true,
            //标题栏背景色
            backgroundColor: Colors.blue,
            //标题栏的亮度
            brightness: Brightness.dark,
            //Icon的主题样式
            iconTheme: IconThemeData(
              color: Colors.amber,//颜色
              size: 30,//大小
              opacity: 0.5,//透明度
            ),
            //actions里面的Icon的主题样式
            actionsIconTheme: IconThemeData(
              color: Colors.blue,//颜色
              size: 30,//大小
              opacity: 0.5,//透明度
            ),
            //文本样式
            textTheme: TextTheme(
              //设置title标题样式
              headline6: TextStyle(
                fontSize: 16,
                color: Colors.green,
              ),

            ),
            //标题栏是否显示在顶部，默认true
            primary: true,
            //标题是否居中，默认true
            centerTitle: false,
            //标题是否根据语义换行，默认false
            excludeHeaderSemantics:true,
            //标题title左右的间距，0为没有间距
            titleSpacing:0.0,
            //title标题换行后的高度
            collapsedHeight:80,
            //标题栏和标题栏底部bottom,flexibleSpace的总高度
            expandedHeight:200,
            //滚动后，是否立即显示标题栏,必须和snap设置相同
            floating:true,
            //滚动时，标题栏是否保持显示
            pinned:false,
            //如果[snap]和[floating]为true，则浮动应用程序栏将“捕捉”进入视图。
            //如果[snap]为true，则显示浮动应用程序栏的滚动条将触发动画，将整个应用栏滑动到视图中。
            snap: true,
            //应用栏是否应拉伸以填充过度滚动区域。
            stretch: true,
            //触发stretch拉伸动画的滚动偏移量，默认100
            stretchTriggerOffset:100,
          ),
          SliverFixedExtentList(
            itemExtent: 120.0,
            delegate: SliverChildBuilderDelegate((context, int index) {
              Container _piece;
              if (index == 0){
                _piece = Container(
                  child: Text('行一一一一一',),
                );
              }else{
                _piece = Container(
                  child: Text('行行行行行二',),
                );
              }
              return _piece;
            },
              childCount: 20,
            ),
          ),

        ],
      ),
    );

  }
}