如何在Flutter的FAB上添加两个图标并实现多触发动作？

这个需求完全可实现，没有兼容性问题，以下是两种对应不同场景的实现方式，以及可选的标准交互替代方案：

方案1：单FAB状态切换（符合「可切换图标」需求） #

适用于两个功能不同时展示，需要根据页面状态切换FAB的图标和触发逻辑的场景：

• 首先在State类中定义状态变量标记当前FAB的展示状态

// 状态类中定义变量
bool _isMapMode = true;

• 构建FAB时根据状态变量动态渲染图标和绑定点击事件

floatingActionButton: FloatingActionButton(
  onPressed: () {
    if (_isMapMode) {
      // 触发显示地图的逻辑
      _openMapPage();
    } else {
      // 触发弹出底部模态框逻辑
      showModalBottomSheet(context: context, builder: (ctx) => const YourBottomSheet());
    }
    // 如果需要点击FAB后自动切换状态，取消下面注释即可
    // setState(() => _isMapMode = !_isMapMode);
  },
  child: Icon(
    _isMapMode ? Icons.map : Icons.list, // 第二个图标可替换为你需要的样式
  ),
),

• 如需外部触发切换FAB状态，直接调用setState(() => _isMapMode = 新状态值)即可。

方案2：双图标常驻FAB #

适用于需要两个功能入口同时展示在FAB上，不需要切换状态的场景：
你可以直接自定义FAB的child布局，同时放置两个可点击的图标：

floatingActionButton: FloatingActionButton.extended(
  backgroundColor: Theme.of(context).primaryColor,
  onPressed: () {}, // 外层点击事件留空，事件绑定到各个图标上
  label: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      GestureDetector(
        onTap: _openMapPage,
        child: const Icon(Icons.map, color: Colors.white, size: 24),
      ),
      const SizedBox(width: 16),
      Container(width: 1, height: 20, color: Colors.white60),
      const SizedBox(width: 16),
      GestureDetector(
        onTap: () => showModalBottomSheet(context: context, builder: (ctx) => const YourBottomSheet()),
        child: const Icon(Icons.more_vert, color: Colors.white, size: 24),
      ),
    ],
  ),
),

可选替代方案：展开式SpeedDial FAB #

如果你的场景更符合「点击主FAB后弹出多个操作选项」的交互，可以使用官方规范推荐的SpeedDial组件，点击主按钮后弹出两个子操作按钮，分别对应地图和底部弹窗功能，这种交互用户认知成本更低，也符合Material Design设计规范。

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