自定义Flutter SliverAppBar标题布局问题求助

问题出在你把头像放在了FlexibleSpaceBar的title中，这个区域被限制在SliverAppBar的布局范围内，所以无法通过Positioned或Padding让它突破边界和下方内容重叠。

你可以用Stack包裹整个滚动区域，把头像作为独立的子组件放在Stack里，通过Positioned来精确控制它的位置，这样就能实现你想要的效果：

import 'package:flutter/material.dart';

class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          CustomScrollView(
            slivers: [
              SliverAppBar(
                pinned: true,
                expandedHeight: 200,
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.network(
                    "abc.com/a.jpg", 
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              SliverToBoxAdapter(
                child: Padding(
                  // 给下方内容添加上边距，避免被头像挡住
                  padding: const EdgeInsets.only(top: 40),
                  child: Container(
                    height: 250,
                    color: Colors.red,
                  ),
                ),
              )
            ],
          ),
          // 独立控制的头像组件
          Positioned(
            top: 160, // 调整这个值控制头像在AppBar展开时的位置
            left: MediaQuery.of(context).size.width / 2 - 38,
            child: const CircleAvatar(
              backgroundColor: Color.fromRGBO(31, 27, 36, 1),
              radius: 38,
              child: CircleAvatar(
                backgroundImage: NetworkImage('abc.com/286.png'),
                radius: 35,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键改动说明：

• 移除了FlexibleSpaceBar中的title，把头像移到Stack里作为独立层
• 用Positioned固定头像的位置，top值可以根据你的需求调整，确保在AppBar展开和收起时都能达到预期效果
• 给下方的红色容器添加上边距，避免内容被头像遮挡

如果需要让头像在AppBar滚动收起时有跟随动画，可以结合ScrollController监听滚动偏移量，动态调整Positioned的top值，实现更流畅的过渡效果。

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