flutter-layout - Flutter SliverAppBar 内容一致？

Question

我正在尝试创建一个AppBar在已经折叠时会显示一些内容并在展开时显示更多内容的内容。

我现在拥有的：

期望的结果是红色和蓝色容器在 SliverAppBar 折叠时保持可见，而在展开时绿色容器显示出来。

我努力了：

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: CustomScrollView(
        slivers: [
          TestAppBar(),
          SliverList(
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
              return Center(child: Text('text'));
            }, childCount: 100),
          )
        ],
      ),
    );
  }
}

class TestAppBar extends StatelessWidget {
  const TestAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      elevation: 0,
      titleSpacing: 0,
      centerTitle: false,
      pinned: true,
      title: Text('Test app bar'),
      shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20))),
      collapsedHeight: 254,
      expandedHeight: 436 + MediaQuery.of(context).viewPadding.top,
      backgroundColor: Colors.grey,
      flexibleSpace: FlexibleSpaceBar(
        background: Padding(
          padding:
              EdgeInsets.only(top: MediaQuery.of(context).viewPadding.top + 44),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(color: Colors.red, height: 100),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(color: Colors.blue, height: 100),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(color: Colors.green, height: 100),
              )
            ],
          ),
        ),
      ),
    );
  }
}

我也尝试过使用 来完成这项工作SliverPersistentHeaderDelagate，但也没有运气：

class TestPageHeader extends SliverPersistentHeaderDelegate {
  final double minHeight = 200;
  final double maxHeight = 500;
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {

    return SizedBox.expand(child: LayoutBuilder(
      builder: (_, constraints) {
        return Container(
          decoration: const BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(20),
                  bottomRight: Radius.circular(20))),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(color: Colors.red, height: 100),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(color: Colors.blue, height: 100),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(color: Colors.green, height: 100),
              )
            ],
          )
        );
      },
    ));
  }

  @override
  double get maxExtent => maxHeight;

  @override
  double get minExtent => minHeight;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return maxExtent != oldDelegate.maxExtent ||
        minExtent != oldDelegate.minExtent;
  }
}

甚至可以用SliverAppBaror来实现这一点SliverPersistentHeaderDelegate吗？