在Column中使用两个FloatingActionButton时位置非默认的解决方法

FloatingActionButton（FAB）的默认悬浮定位是由Scaffold组件的floatingActionButton属性控制的，默认会固定在屏幕右下角。如果把FAB直接放在Column里，它会变成Column的线性布局子元素，失去原本的悬浮特性，自然偏离默认位置。要恢复默认的悬浮定位，需要调整布局结构：

核心思路 #

不要将FAB作为Column的子组件，而是交给Scaffold的floatingActionButton属性管理，多个FAB时通过组合组件（如Stack、Row）包裹后再赋值给该属性。

具体方案 #

1. 单个FAB恢复默认位置 #

直接将FAB赋值给Scaffold的floatingActionButton属性即可：

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  body: Column(
    // 页面主体内容
    children: [/* ... */],
  ),
)

2. 多个FAB保持悬浮定位 #

如果需要放置多个FAB，可通过Stack或Row组合后设置给floatingActionButton，同时调整位置避免重叠：

方式一：用Stack自定义位置

Scaffold(
  floatingActionButton: Stack(
    clipBehavior: Clip.none,
    children: [
      // 主FAB保持默认右下角位置
      Positioned(
        bottom: 16,
        right: 16,
        child: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
      // 第二个FAB放在主FAB左侧
      Positioned(
        bottom: 16,
        right: 80,
        child: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.edit),
          mini: true, // 可选：用迷你FAB节省空间
        ),
      ),
    ],
  ),
  body: Column(
    // 页面主体内容
    children: [/* ... */],
  ),
)

方式二：用Row横向排列

Scaffold(
  floatingActionButton: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.edit),
        mini: true,
      ),
      SizedBox(width: 16), // 间距避免重叠
      FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    ],
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat, // 指定默认悬浮位置
  body: Column(
    // 页面主体内容
    children: [/* ... */],
  ),
)

关键提示 #

• 始终通过Scaffold的floatingActionButton属性挂载FAB，才能保留其悬浮定位特性。
• 若需要修改整体悬浮位置，可通过floatingActionButtonLocation属性设置（如centerFloat、startFloat等）。

内容的提问来源于stack exchange，提问作者JUSTIN N THAMPI