如何在SliverAppBar与SliverList上方叠加CircleAvatar？（实现Twitter式滚动头部动画效果）

我正在用Flutter的Sliver组件实现个人资料页面，已经写出了基础代码，但尝试在SliverList里用Stack和Positioned放置头像（CircleAvatar）时，这个头像总是被SliverAppBar挡住，显示在它的后方。有没有办法解决这个问题，或者有什么替代方案？

我的现有代码如下：

import 'package:flutter/material.dart';
class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: DefaultTabController(
          length: 4,
          child: NestedScrollView(
            body: TabBarView(children: [ //pages of tabBar ]),
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return [
                SliverAppBar(
                  //for the pinned appBar
                  elevation: 0.0,
                  backgroundColor: Colors.red,
                  leading: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: CircleAvatar(backgroundColor: Colors.red.withOpacity(0.4), child: Icon(Icons.arrow_back,color: Colors.white,), ),
                  ),
                  pinned: true,
                  flexibleSpace: FlexibleSpaceBar(
                    background: Image.network(
                      "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                      fit: BoxFit.cover,
                    ),
                  ),
                  expandedHeight: 150,
                ),
                SliverList(delegate: SliverChildListDelegate([ // for bio and other stuff ])),
                SliverAppBar(
                  toolbarHeight: 0.0,
                  primary: false,
                  pinned: true,
                  bottom: TabBar(tabs: [ // tab bars ],),
                )
              ];
            },
          ),
        ),
      ),
    );
  }
}

问题原因 #

你遇到的这个问题本质是Sliver组件的绘制层级顺序导致的：headerSliverBuilder里的Sliver组件是按顺序绘制的，第一个SliverAppBar因为设置了pinned: true，滚动时会固定在顶部，它的绘制层级会覆盖在后续Sliver（比如你的SliverList）内容之上，所以你放在SliverList里的头像会被它挡住。

可行解决方案 #

方案1：将头像整合到SliverAppBar的flexibleSpace中

这个方案适合希望头像随SliverAppBar的展开/收起同步变化的场景，比如头像会随着AppBar的收缩逐渐移动到顶部。

修改SliverAppBar的flexibleSpace，用Stack包裹背景图和头像，通过Positioned控制头像位置：

SliverAppBar(
  elevation: 0.0,
  backgroundColor: Colors.red,
  leading: Padding(
    padding: const EdgeInsets.all(8.0),
    child: CircleAvatar(
      backgroundColor: Colors.red.withOpacity(0.4),
      child: Icon(Icons.arrow_back,color: Colors.white,),
    ),
  ),
  pinned: true,
  flexibleSpace: Stack(
    alignment: Alignment.bottomLeft,
    children: [
      // 原背景图
      Image.network(
        "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
        fit: BoxFit.cover,
        width: double.infinity,
        height: double.infinity,
      ),
      // 叠加的头像，让一半在AppBar外，一半在内
      Positioned(
        bottom: -30,
        left: 16,
        child: CircleAvatar(
          radius: 30,
          backgroundColor: Colors.white,
          child: Icon(Icons.person, color: Colors.grey),
          // 也可以用网络图片：backgroundImage: NetworkImage("你的头像URL")
        ),
      ),
    ],
  ),
  expandedHeight: 150,
),

然后记得在SliverList的bio区域顶部添加padding，避免内容被头像挡住：

SliverList(delegate: SliverChildListDelegate([
  Padding(
    padding: EdgeInsets.only(left: 80, top: 16, right: 16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("Kanwar Manraj", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
        SizedBox(height: 4),
        Text("Flutter Developer | Profile Demo", style: TextStyle(color: Colors.grey)),
      ],
    ),
  ),
  // 其他内容
])),

方案2：用Stack包裹整个NestedScrollView，将头像放在最上层

这个方案适合希望头像固定在某个位置，不随AppBar滚动变化的场景。

把整个DefaultTabController放到Stack里，然后在Stack的子组件最后添加头像，确保它在最上层：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Stack(
        children: [
          DefaultTabController(
            length: 4,
            child: NestedScrollView(
              body: TabBarView(children: [
                // 你的Tab页面内容
                Container(color: Colors.grey[100]),
                Container(color: Colors.grey[200]),
                Container(color: Colors.grey[300]),
                Container(color: Colors.grey[400]),
              ]),
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return [
                  SliverAppBar(
                    elevation: 0.0,
                    backgroundColor: Colors.red,
                    leading: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: CircleAvatar(
                        backgroundColor: Colors.red.withOpacity(0.4),
                        child: Icon(Icons.arrow_back,color: Colors.white,),
                      ),
                    ),
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Image.network(
                        "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                        fit: BoxFit.cover,
                      ),
                    ),
                    expandedHeight: 150,
                  ),
                  SliverList(delegate: SliverChildListDelegate([
                    Padding(
                      padding: EdgeInsets.only(left: 80, top: 16, right: 16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Kanwar Manraj", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
                          SizedBox(height: 4),
                          Text("Flutter Developer | Profile Demo", style: TextStyle(color: Colors.grey)),
                        ],
                      ),
                    ),
                    SizedBox(height: 16),
                  ])),
                  SliverAppBar(
                    toolbarHeight: 0.0,
                    primary: false,
                    pinned: true,
                    bottom: TabBar(
                      tabs: [
                        Tab(text: "Tab 1"),
                        Tab(text: "Tab 2"),
                        Tab(text: "Tab 3"),
                        Tab(text: "Tab 4"),
                      ],
                    ),
                  )
                ];
              },
            ),
          ),
          // 固定位置的头像，放在Stack最后确保层级最高
          Positioned(
            top: 150 - 30, // 150是AppBar的expandedHeight，30是头像半径，刚好让头像底部对齐AppBar底部
            left: 16,
            child: CircleAvatar(
              radius: 30,
              backgroundColor: Colors.white,
              child: Icon(Icons.person, color: Colors.grey),
            ),
          ),
        ],
      ),
    ),
  );
}

方案3：自定义SliverPersistentHeader（进阶）

如果需要更复杂的头部交互，可以自定义SliverPersistentHeaderDelegate，完全控制头部的布局和动画，这样可以自由调整所有元素的层级和位置。不过这个方案代码量会多一些，适合有定制化需求的场景。

内容的提问来源于stack exchange，提问作者kanwar manraj