Flutter SliverAppBar 内容一致？

问题描述

我正在尝试创建一个 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,child: Container(color: Colors.green,)
            ],);
  }
}

我也尝试过使用 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),)
        );
      },));
  }

  @override
  double get maxExtent => maxHeight;

  @override
  double get minextent => minHeight;

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

是否可以使用 SliverAppBar 或 SliverPersistentHeaderDelegate 来实现这一目标？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）