【Flutter】二十、Flutter中常用组件—— CustomScrollView

一、CustomScrollView

CustomScrollView是可以使用sliver自定义滚动模型（效果）的widget。其中sliver包括SliverList、SliverFixedExtentList、SliverGrid、SliverPadding、SliverAppBar，对于大多数Sliver来说，它们和可滚动Widget最主要的区别是Sliver不会包含Scrollable Widget，也就是说Sliver本身不包含滚动交互模型。因此，CustomScrollView可以将它们组合起来，统一控制滚动。

示例

import 'package:flutter/material.dart';

class CustomScrollViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true,
          leading: Icon(Icons.arrow_back),
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('title'),
            background: Image.network('http://pic38.nipic.com/20140228/2457331_083845176000_2.jpg', fit: BoxFit.cover,),
          ),
        ),
        SliverPadding(
          padding: EdgeInsets.all(10.0),
          sliver: SliverGrid(
            delegate: SliverChildBuilderDelegate((context, index) => Container(
              color: Colors.lightBlueAccent,
            ),
                childCount: 15),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 20.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 5.0/2.0
            ),
          ),
        ),
        SliverFixedExtentList(
          delegate: SliverChildBuilderDelegate((context, index) => ListTile(
            title: Text('标题$index'),
          ),
              childCount: 10),
          itemExtent: 40.0,
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate((context, index) => ListTile(
            title: Text('标题$index'),
          ),
          childCount: 10),
        ),
      ],
    );
  }
}

效果

二、Sliver

2.1 SliverAppBar

头部可伸缩widget，屏幕向下滑动时SliverAppBar会自动收缩到一定高度。

属性说明

SliverAppBar({
    Key key,
    this.leading, // 左上方图标
    this.automaticallyImplyLeading = true,
    this.title, // 标题
    this.actions, // 右侧图标组
    this.flexibleSpace, // 设置内容，背景、标题等
    this.bottom,
    this.elevation, // 阴影范围
    this.forceElevated = false, // 是否一致显示阴影，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.shape, // 边框设置
  })