flutter - 如何用颤动的条子做动画切换器

Question

所以我有一个带有 a的SliverAppBar(floating: true, snap: true)CustomScrollView 。SliverPersistentHeader(pinned: true)SliverList

我想要做的是单击标题中的一个按钮，然后在 and 占用的空间中弹出一个小SliverPersistentHeade部件SliverList。我尝试将它们放在 a nestedScrollViewand 嵌套SliverPersistentHeader和SliverList另一个 scrollView 内，但由于SliverAppBarand不在一起，它会在 it( ) 快速启动和关闭SliverPersistentHeader时弄乱预期的效果。SliverAppBar

为什么我需要这样：我想用 appBar 中的元素执行一些动画，因为两个页面之间的下部过渡有点像animtions 共享轴包

问题

• 将persistantHeader保留在第一页
• 保持 snap 浮动 appbar 功能
• 过渡下半部分

注意：答案不一定需要依赖条子。实现这一目标的可能方法

我现在的代码大致是这样的

CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.white,
            floating: true,
            snap: true,
            titleSpacing: 0,
            elevation: 4,
            title: Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(top: 10, bottom: 10, left: 10),
                    child: Container(color: Colors.grey),
                    ),
                  ),
                ),
                Container(
                  child: LeadingButton(
                    color: lightShadeColor,
                    icon: Icons.qr_code_scanner_rounded,
                    iconColor: darkColor,
                    size: 37, // btnShadow: false
                  ),
                ),
              ],
            ),
          ),
          SliverPersistentHeader(
                  delegate: PersistentHeader(
                    widget: Row(
                      // Format this to meet your need
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        
                        Container(
                          padding: EdgeInsets.all(10),
                          child: Text('data'),
                        )
                      ],
                    ),
                  ),
                  pinned: true,
                ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return ListTile(
                title: Text('index $index'),
              );
            }),
          )
        ],
      ),

标签： flutterdartflutter-layoutflutter-animation