Flutter中如何实现AppBar底部偏移且跨栏的溢出Logo？

问题根源在于你将Logo放在body的Stack中，设置top: -60会让Logo超出body的顶部边界，而body的顶部受AppBar下方区域限制，超出部分会被自动裁切。以下是两种可行的解决方法：

方法一：让body延伸到AppBar下方 #

在Scaffold中启用extendBodyBehindAppBar属性，允许body内容延伸至AppBar下方区域，同时调整Logo的位置参数，使其刚好落在AppBar与body之间：

Scaffold(
  extendBodyBehindAppBar: true, // 核心配置
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(100),
    child: AppBar(
      title: Text(
        'My App',
        style: Theme.of(context).textTheme.headlineLarge,
      ),
      backgroundColor: Colors.transparent,
      elevation: 0,
    ),
  ),
  body: Stack(
    children: [
      // 给ListView添加顶部内边距，避免内容被Logo遮挡
      Padding(
        padding: const EdgeInsets.only(top: 50),
        child: ListView.builder(
          itemCount: DUMMY_MEALS.length,
          itemBuilder: (ctx, index) {
            final mealData = DUMMY_MEALS[index];
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              child: MealItemInOverview(
                mealData.id,
                mealData.title,
                mealData.preparation_time,
                mealData.ingredients,
                mealData.steps,
              ),
            );
          },
        ),
      ),
      Positioned(
        top: 100 - 50, // AppBar高度减去Logo半径，让Logo一半搭在AppBar下方
        right: 20,
        child: CircleAvatar(
          radius: 50,
          backgroundImage: AssetImage('assets/images/images.png'),
        ),
      ),
    ],
  ),
);

方法二：将Logo嵌入AppBar的Stack布局 #

把AppBar的内容用Stack包裹，让Logo直接从AppBar底部延伸到body区域，无需修改body的基础布局：

Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(100),
    child: Stack(
      children: [
        AppBar(
          title: Text(
            'My App',
            style: Theme.of(context).textTheme.headlineLarge,
          ),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        // 让Logo刚好位于AppBar底部
        Positioned(
          top: 100,
          right: 20,
          child: CircleAvatar(
            radius: 50,
            backgroundImage: AssetImage('assets/images/images.png'),
          ),
        ),
      ],
    ),
  ),
  body: Padding(
    padding: const EdgeInsets.only(top: 50), // 避免ListView内容被Logo遮挡
    child: ListView.builder(
      itemCount: DUMMY_MEALS.length,
      itemBuilder: (ctx, index) {
        final mealData = DUMMY_MEALS[index];
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
          child: MealItemInOverview(
            mealData.id,
            mealData.title,
            mealData.preparation_time,
            mealData.ingredients,
            mealData.steps,
          ),
        );
      },
    ),
  ),
);

两种方法的适用场景 #

• 方法一：适合需要Logo随body滚动的交互场景
• 方法二：适合Logo固定在AppBar下方、不随滚动移动的场景

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