如何在 Flutter 中的 BottomSheet 上重叠按钮？答案

【问题标题】：How to overlap button on BottomSheet in Flutter?如何在 Flutter 中的 BottomSheet 上重叠按钮？
【发布时间】：2021-09-08 20:39:49
【问题描述】：

在我的设计中，BottomSheet 中有一个关闭按钮。我试过Stack。但它没有用。有谁知道如何实现结果？谢谢:)


modalBottomSheet(context) {
  return showModalBottomSheet(
    context: context,
    builder: (context) {
      return Stack(
        children: [
          Container(
            child: Text('Sample Text'),
          ),
          Container(
            height: 50,
            width: 50,
            decoration: BoxDecoration(
              color: Colors.red,
              shape: BoxShape.circle,
            ),
          ),
        ],
      );
    }
  );
}

【问题讨论】：

您是否尝试过在应用程序的脚手架中使用floatingActionButton，但位置不同？我知道这可用于将 FAB 停靠到底部导航，但我不确定它对底部工作表有何反应。在此处查看选项：api.flutter.dev/flutter/material/…
我能找到的唯一相关问题（您可能已经看过）建议使用Stack 和Postioned 小部件以确保它们正确重叠。 link to post
是的，我看到了。但是Positioned 和 FAB 小部件也不起作用。
嗨！我正在尝试并找到解决方案。看看下面:)

标签： flutter dart flutter-layout

【解决方案1】：

所以我已经尝试了一段时间，这似乎像你解释的那样有效。

  modalBottomSheet(context) {
    return showModalBottomSheet(
        context: context,
        builder: (context) {
          // using a scaffold helps to more easily position the FAB
          return Scaffold(
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  width: double.maxFinite,
                ),
                Padding(
                  padding: EdgeInsets.all(30.0),
                  child: Text("Text in the sheet"),
                ),
              ],
            ),
            // translate the FAB up by 30
            floatingActionButton: Container(
              transform: Matrix4.translationValues(0.0, -30, 0.0),  // translate up by 30
              child: FloatingActionButton(
                onPressed: () {
                  // do stuff
                  print('doing stuff');
                },
                child: Icon(Icons.add),
              ),
            ),
            // dock it to the center top (from which it is translated)
            floatingActionButtonLocation: FloatingActionButtonLocation.centerTop,
          );
        });
  }

这里解决方案的核心是转换包含 FAB 的 Container。我从this older SO answer 得到了这个想法，并提出了一个相关的问题。

结果如下：

您可能需要进行更多编辑才能获得您想要的确切结果，但我希望这能让您走上正确的道路。

编辑

在上述解决方案中，当您想要按下 FAB 并点击上半部分时，onPressed 处理程序会触发，但模式也会关闭。您可能应该使用WillPopScope，它仅在按下实际按钮时才会弹出（而不是它周围/上方的区域）。如果您认为在它上面的任何位置也可以按，您可以保持原样。

【讨论】：