有没有办法将 FloatingActionButton 保持在固定位置(带有打开的 BottomSheet)?

Bra*_*ell 5 floating-action-button flutter bottom-sheet bottomnavigationview flutter-layout

我正在开发一个 flutter 应用程序,该应用程序有一个页面,其中包含一个(圆形凹口矩形)BottomAppBar、一个 FloatingActionButton 和一个 BottomSheet,当用户单击地图上的标记时会出现该页面。我的问题是,当 BottomSheet 显示在屏幕上时,它将 FloatingActionButton 向上移动到 BottomSheet 的顶部。以下是我的应用程序中发生的情况的屏幕截图:

FAB

BottomSheet 打开时的 FAB

即使打开 BottomSheet,我也想将此 FloatingActionButton 保持在同一位置(因此位于 BottomAppBar 的中间)。是否可以通过更改某些现有属性来做到这一点?或者我是否必须构建自己的 BottomSheet 元素,以便它不会以这种方式与 FloatingActionButton 交互?

这是 Home.dart 中 FloatingActionButton/Scaffold 的代码片段:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      bottomNavigationBar: bottomAppBar(),
      floatingActionButton: Container(
        height: MediaQuery.of(context).size.width * 0.1625,
        width: MediaQuery.of(context).size.width * 0.1625,
        child: FittedBox(
          child: FloatingActionButton(
            elevation: 0.0,
            onPressed: () {},
            child: Icon(
              Icons.bolt,
              size: MediaQuery.of(context).size.width * 0.075,
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: someWidget,
    );
  }
Run Code Online (Sandbox Code Playgroud)

这是我的 Map.dart 中的 BottomSheet(这里的 Map.dart 只是 Home.Dart PageView 中的一个小部件):

showBottomSheet(
      context: context,
      builder: details(marker),
      backgroundColor: Colors.transparent,
);
Run Code Online (Sandbox Code Playgroud)

最后这是 Home.dart 中的 BottomAppBar 代码:

Widget bottomAppBar() {
    return BottomAppBar(
      color: lightBlackApp,
      shape: CircularNotchedRectangle(),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: options(),
      ),
);
Run Code Online (Sandbox Code Playgroud)

一些要求:

  • BottomSheet 需要显示在 BottomAppBar 和 FloatingActionButton 后面,因此 ModalBottomSheet 在这种情况下不起作用(我还需要用户能够与其他 UI 元素交互)
  • 我需要为 BottomAppBar 保留这个特定的形状

感谢您的时间 !