一统天下 flutter - widget Sliver: SliverAppBar/FlexibleSpaceBar - 可展开/收缩的标题栏（需要在 CustomScrollView 中使用）-526互联

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

示例如下:

lib\widget\sliver\sliver_app_bar.dart

/*
 * SliverAppBar/FlexibleSpaceBar - 可展开/收缩的标题栏（需要在 CustomScrollView 中使用）
 */

import 'dart:math';

import 'package:flutter/material.dart';

class SliverAppBarDemo extends StatefulWidget {
  const SliverAppBarDemo({Key? key}) : super(key: key);

  @override
  _SliverAppBarDemoState createState() => _SliverAppBarDemoState();
}

class _SliverAppBarDemoState extends State<SliverAppBarDemo> {

  final _random = Random();
  Color _getRandomColor() {
    return Color.fromARGB(255, _random.nextInt(256), _random.nextInt(256), _random.nextInt(256),);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            /// 完全展开时的高度
            expandedHeight: 200,
            /// true - 下拉滚动时，即使当前 CustomScrollView 不在顶部，SliverAppBar 也会向下展开
            /// false - 下拉滚动时，只有当前 CustomScrollView 在顶部时，SliverAppBar 才会向下展开（前提是 snap 为 false）
            floating: true,
            /// true - 手指放开时，SliverAppBar 如果是展开方向的话，则变为完全展开状态；如果是收缩方向且当前 CustomScrollView 不在顶部，则变为完全收缩状态
            /// false - 手指放开时，SliverAppBar 保持当前的展开大小不变
            snap: true,
            /// true - SliverAppBar 在完全收缩状态时，会显示为一个条状组件
            /// false - SliverAppBar 在完全收缩状态时，会彻底隐藏
            pinned: true,

            /// title
            title: const Text('SliverAppBar title'),
            /// 背景颜色
            backgroundColor: Colors.orange,

            /// 还有一些参数的使用基本和 AppBar 是一样的，请参见 /lib/widget/structure/scaffold_app_bar.dart
            /// foregroundColor, leading, automaticallyImplyLeading, actions, bottom, shape, ...

            /// FlexibleSpaceBar - 可展开/收缩
            flexibleSpace: FlexibleSpaceBar(
              /// 背景
              background: Image.asset('assets/son.jpg',fit: BoxFit.cover,),
              /// title
              title: const Text('FlexibleSpaceBar title'),
              /// title 是否显示在中间
              centerTitle: true,
              /// title 的边距
              titlePadding: EdgeInsets.zero,
              /// SliverAppBar 收缩时，FlexibleSpaceBar 背景的动画效果
              ///   parallax - 背景随着 SliverAppBar 的收缩，向上以视差的方式移动，这个是默认值
              ///   pin - 背景随着 SliverAppBar 的收缩，向上跟随移动
              ///   none - 背景位置不变
              collapseMode: CollapseMode.parallax,
              /// SliverAppBar 在完全展开状态时，FlexibleSpaceBar 的 title 的放大倍数
              expandedTitleScale: 1.5,
            ),
          ),

          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) =>
                Container(color: _getRandomColor(), height: 150,),
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

源码 https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下flexiblespacebar customscrollview

sliverappbar flutter

一统天下sliverfixedextentlist customscrollview

一统天下网格customscrollview slivergrid

一统天下customscrollview sliversafearea