Flutter技术问题：如何让Floating Action Button在BottomSheet中实现悬浮（未停靠）效果

你说得没错，FloatingActionButtonLocation确实只针对BottomNavigationBar生效——它是Scaffold专门为底部导航栏设计的位置计算逻辑，而BottomSheet作为独立的Overlay组件，不会被这个属性影响。下面给你两个实用的解决方案，不用过度自定义BottomSheet就能实现你要的效果：

方案一：动态调整FAB位置（推荐） #

利用PersistentBottomSheetController监听BottomSheet的状态，手动计算FAB应该悬浮的位置，通过自定义FloatingActionButtonLocation类来实现精确控制。

代码示例： #

把原有的无状态组件改成有状态组件，方便保存BottomSheet状态和FAB位置：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PersistentBottomSheetController? _bottomSheetController;
  FloatingActionButtonLocation? _fabLocation;

  @override
  void dispose() {
    _bottomSheetController?.close();
    super.dispose();
  }

  void _showBottomSheet() {
    _bottomSheetController = Scaffold.of(context).showBottomSheet((BuildContext context) {
      return Container(
        height: 200,
        color: Colors.amber,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const Text('Modal BottomSheet'),
              ElevatedButton(
                child: const Text('Close BottomSheet'),
                onPressed: () {
                  Navigator.pop(context);
                  // 关闭BottomSheet后恢复FAB原位置
                  setState(() => _fabLocation = FloatingActionButtonLocation.startFloat);
                },
              )
            ],
          ),
        ),
      );
    });

    // BottomSheet显示时，切换到自定义悬浮位置
    setState(() {
      _fabLocation = _CustomFabLocation();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Text('loc'),
      ),
      floatingActionButtonLocation: _fabLocation ?? FloatingActionButtonLocation.startFloat,
      appBar: AppBar(title: const Text('Flutter Code Sample')),
      body: Center(
        child: ElevatedButton(
          child: const Text('showModalBottomSheet'),
          onPressed: _showBottomSheet,
        ),
      ),
    );
  }
}

// 自定义FAB位置，让它悬浮在BottomSheet上方左侧
class _CustomFabLocation extends FloatingActionButtonLocation {
  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    // 动态获取BottomSheet高度，避免硬编码
    final bottomSheetHeight = scaffoldGeometry.bottomSheetSize?.height ?? 200.0;
    final fabSize = scaffoldGeometry.floatingActionButtonSize;
    final screenHeight = scaffoldGeometry.scaffoldSize.height;
    const horizontalMargin = 16.0; // 左侧间距
    const verticalGap = 16.0; // FAB与BottomSheet的间距

    return Offset(
      horizontalMargin,
      screenHeight - bottomSheetHeight - fabSize.height - verticalGap,
    );
  }
}

这个方案的优势是FAB仍属于Scaffold，不会随BottomSheet关闭而消失，且位置能适配动态高度的BottomSheet。

方案二：将FAB嵌入BottomSheet布局中 #

如果你不介意FAB随BottomSheet一起消失，可以直接把FAB放在BottomSheet的Stack布局里，用Positioned实现悬浮效果：

代码示例： #

修改showBottomSheet的builder部分：

_bottomSheetController = Scaffold.of(context).showBottomSheet((BuildContext context) {
  return Stack(
    children: [
      Container(
        height: 200,
        color: Colors.amber,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const Text('Modal BottomSheet'),
              ElevatedButton(
                child: const Text('Close BottomSheet'),
                onPressed: () => Navigator.pop(context),
              )
            ],
          ),
        ),
      ),
      // 悬浮在BottomSheet顶部左侧的FAB
      Positioned(
        left: 16,
        top: -28, // FAB半径为28，刚好一半露出在BottomSheet上方
        child: FloatingActionButton(
          onPressed: () {},
          child: const Text('loc'),
        ),
      ),
    ],
  );
});

这个方案实现起来更简单，适合只需要在BottomSheet显示时才展示FAB的场景。

注意事项 #

• 使用方案一时，务必在BottomSheet关闭后恢复FAB的原位置，避免影响页面其他状态。
• 自定义位置时，可以根据设计需求调整偏移量，适配不同屏幕尺寸。

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