一个通用的滑动结构，可以指定滑动方向、是否反向、滑动控制器等属性。其中包含的子组件们必须是Sliver家族。

相关组件

SliverAppBar SliverList SliverGird

CustomScrollView基本使用

  1.    <br />【slivers】 : 子组件列表   【List<Widget>】<br />【reverse】 : 是否反向   【bool】<br />【scrollDirection】 : 滑动方向   【Axis】<br />【controller】 : 控制器   【ScrollController】<br />![199.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589509735200-e777b313-82fe-49c4-9454-fb43fff4d7a3.gif#align=left&display=inline&height=774&margin=%5Bobject%20Object%5D&name=199.gif&originHeight=774&originWidth=414&size=3517338&status=done&style=none&width=414)
  1. import 'package:flutter/material.dart';
  2. class CustomScrollViewDemo extends StatelessWidget {
  3.   final data = <Color>[
  4.     Colors.purple[50],
  5.     Colors.purple[100],
  6.     Colors.purple[200],
  7.     Colors.purple[300],
  8.     Colors.purple[400],
  9.     Colors.purple[500],
  10.     Colors.purple[600],
  11.     Colors.purple[700],
  12.     Colors.purple[800],
  13.     Colors.purple[900],
  14.   ];
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return Container(
  19.       height: 300,
  20.       child: CustomScrollView(
  21.         anchor: 0,
  22.         scrollDirection: Axis.vertical,
  23.         reverse: false,
  24.         slivers: <Widget>[_buildSliverAppBar(), _buildSliverFixedExtentList()],
  25.       ),
  26.     );
  27.   }
  29.   Widget _buildSliverFixedExtentList() => SliverFixedExtentList(
  30.         itemExtent: 60,
  31.         delegate: SliverChildBuilderDelegate(
  32.             (_, int index) => Container(
  33.                   alignment: Alignment.center,
  34.                   width: 100,
  35.                   height: 50,
  36.                   color: data[index],
  37.                   child: Text(
  38.                     colorString(data[index]),
  39.                     style: TextStyle(color: Colors.white, shadows: [
  40.                       Shadow(
  41.                           color: Colors.black,
  42.                           offset: Offset(.5, .5),
  43.                           blurRadius: 2)
  44.                     ]),
  45.                   ),
  46.                 ),
  47.             childCount: data.length),
  48.       );
  50.   String colorString(Color color) =>
  51.       "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
  53.   _buildSliverAppBar() {
  54.     return SliverAppBar(
  55.       expandedHeight: 190.0,
  56.       leading: Container(
  57.           margin: EdgeInsets.all(10),
  58.           child: Image.asset('assets/images/icon_head.png')),
  59.       flexibleSpace: FlexibleSpaceBar(
  60.         //伸展处布局
  61.         titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
  62.         collapseMode: CollapseMode.parallax, //视差效果
  63.         title: Text(
  64.           '张风捷特烈',
  65.           style: TextStyle(color: Colors.black, //标题
  66.               shadows: [
  67.                 Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2)
  68.               ]),
  69.         ),
  70.         background: Image.asset(
  71.           "assets/images/caver.jpeg", fit: BoxFit.cover,
  72.         ),
  73.       ),
  74.     );
  75.   }
  76. }