如何让Flutter的CircleAvatar定位在AppBar与Body中间？

你当前的代码里，AppBar的bottom设置了高度250的空容器，这会把AppBar高度拉得过长，而Body里的CircleAvatar默认从Body顶部开始布局，自然没法卡在AppBar和Body的中间位置。下面给你两种可行的解决方案：

方法一：用Stack布局（更推荐） #

通过Stack将头像放在AppBar下方，同时给主体内容留出头像的空间，实现跨区域的视觉效果：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: const Color(0xFFf65d46),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(100),
            bottomLeft: Radius.circular(100),
          ),
        ),
      ),
      body: Stack(
        alignment: Alignment.topCenter,
        children: [
          // 主体内容容器，顶部留出等于头像半径的空间，避免内容被头像遮挡
          Padding(
            padding: const EdgeInsets.only(top: 75),
            child: Container(
              // 这里添加你的登录表单等页面内容
              color: Colors.white,
            ),
          ),
          // 头像向上偏移自身半径的一半，刚好卡在AppBar和Body中间
          const CircleAvatar(
            backgroundImage: AssetImage('assets/images/logo_2.png'),
            radius: 75,
            margin: EdgeInsets.only(top: -37.5),
          ),
        ],
      ),
    );
  }
}

方法二：调整AppBar的bottom和Body的margin #

基于你原来的代码结构，修改AppBar的bottom高度，再给头像设置负margin实现偏移：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: const Color(0xFFf65d46),
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(100),
            bottomLeft: Radius.circular(100),
          ),
        ),
        // 设置bottom高度为头像半径的一半，给头像预留位置
        bottom: const PreferredSize(
          preferredSize: Size.fromHeight(37.5),
          child: Container(),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: const [
          CircleAvatar(
            backgroundImage: AssetImage('assets/images/logo_2.png'),
            radius: 75,
            // 向上偏移整个头像的高度，让一半在AppBar下方，一半在Body上方
            margin: EdgeInsets.only(top: -75),
          ),
          // 这里添加登录按钮、输入框等其他内容
        ],
      ),
    );
  }
}

核心逻辑说明 #

要实现头像跨在两个区域中间，本质是让头像的一半处于AppBar的下方延伸区域，另一半处于Body的上方区域。两种方法都是通过偏移来达到这个效果，Stack的方式更灵活，适合后续页面内容复杂的场景；第二种改动小，适合快速调整你现有的代码。

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