Flutter技术问题：如何将FloatingActionButton附着到AppBar上？

其实解决这个问题的核心思路是不要依赖Scaffold自带的floatingActionButton属性——因为它的位置确实被限制在底部区域。我们可以通过自定义布局的方式，把FAB放在AppBar和body之间的位置，这里给你两种常用的实现方式：

方法1：将FAB作为布局的一部分（非悬浮） #

这种方式适合不需要FAB悬浮在body内容上方的场景，直接把FAB放在AppBar下方的独立行中，和body内容在同一个Column布局里：

class CustomFABLayout extends StatelessWidget {
  const CustomFABLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("FAB Between AppBar & Body"),
        backgroundColor: Colors.blue,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          // 放置FAB的行，可自定义对齐方式（比如居中、左对齐）
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(
                  onPressed: () {
                    // 这里添加FAB的点击逻辑
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
          ),
          // 主体内容，用Expanded占满剩余屏幕空间
          Expanded(
            child: Container(
              color: Colors.grey[200],
              child: const Center(
                child: Text("你的页面主体内容"),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

这种实现的优点是布局逻辑简单，不需要计算位置，FAB和body内容是上下排列的关系。

方法2：悬浮式FAB（覆盖在body顶部） #

如果需要FAB悬浮在body内容的上方（视觉上卡在AppBar和body之间），可以用Stack结合Positioned来精准定位：

import 'package:flutter/material.dart';

class FloatingFABBetweenSections extends StatelessWidget {
  const FloatingFABBetweenSections({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("悬浮FAB示例"),
        backgroundColor: Colors.blue,
      ),
      body: Stack(
        children: [
          // 主体内容，给顶部留出FAB的位置（避免被遮挡）
          Padding(
            padding: const EdgeInsets.only(top: 60),
            child: Container(
              color: Colors.grey[200],
              child: const Center(
                child: Text("你的页面主体内容"),
              ),
            ),
          ),
          // 精准定位FAB到AppBar下方居中位置
          Positioned(
            // 计算位置：状态栏高度 + AppBar高度 - FAB半径（默认FAB大小56，半径28）
            top: MediaQuery.of(context).padding.top + kToolbarHeight - 28,
            // 水平居中：屏幕宽度的一半减去FAB半径
            left: MediaQuery.of(context).size.width / 2 - 28,
            child: FloatingActionButton(
              onPressed: () {
                // 这里添加FAB的点击逻辑
              },
              child: const Icon(Icons.add),
            ),
          ),
        ],
      ),
    );
  }
}

这里的核心是通过MediaQuery获取设备的状态栏高度和屏幕宽度，结合AppBar的默认高度kToolbarHeight，计算出FAB的精准位置，让它刚好“卡在”AppBar和body的交界处。

总结一下：两种方法都绕开了Scaffold对FAB位置的限制，根据你的需求选择即可——如果需要FAB和body内容分离，用方法1；如果需要悬浮效果，用方法2。

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