Flutter showModalBottomSheet 隐藏在 CupertinoTabBar 后面

Question

我使用 CupertinoTabBar，但想在用户设备为 Android 时显示 material 设计 BottomSheet。但是，当我同时使用它们时，BottomSheet 隐藏在 CupertinoTabBar 后面，如下所示。

你能帮我解决这个问题吗？还是两者都用不好？

我的简化代码

class MyApp extends StatelessWidget {
  void onPressed(BuildContext context) async {
    await showModalBottomSheet(
      context: context,
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text('Delete'),
            onTap: () => Navigator.of(context).pop('delete'),
          ),
          Divider(),
          ListTile(
            title: Text('Cancel'),
            onTap: () => Navigator.of(context).pop('cancel'),
          )
        ],
      ),
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.music_note),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
            ),
          ]
        ),
        tabBuilder: (context, index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (context) {
                  return CupertinoPageScaffold(
                    child: FlatButton(
                      child: Text('button'),
                      onPressed: () => onPressed(context),
                    ),
                  );
                },
              );
            case 1:
              return CupertinoTabView(
                builder: (context) {
                  return CupertinoPageScaffold(
                    child: Text('tab 2'),
                  );
                },
              );
          }
          return Container();
        }
      )
    );
  }
}

Answer 1

您可以在下面设置一些内边距或为此设置容器高度。我编辑了你的代码设置了一些填充，请检查它。

class MyApp extends StatelessWidget {
  void onPressed(BuildContext context) async {
    await showModalBottomSheet(
      context: context,
      builder: (context) => Padding(
        padding:  EdgeInsets.fromLTRB(0, 0, 0, 60),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              title: Text('Delete'),
              onTap: () => Navigator.of(context).pop('delete'),
            ),
            Divider(),
            ListTile(
              title: Text('Cancel'),
              onTap: () => Navigator.of(context).pop('cancel'),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: CupertinoTabScaffold(
            tabBar: CupertinoTabBar(items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.music_note),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.settings),
              ),
            ]),
            tabBuilder: (context, index) {
              switch (index) {
                case 0:
                  return CupertinoTabView(
                    builder: (context) {
                      return CupertinoPageScaffold(
                        child: FlatButton(
                          child: Text('button'),
                          onPressed: () => onPressed(context),
                        ),
                      );
                    },
                  );
                case 1:
                  return CupertinoTabView(
                    builder: (context) {
                      return CupertinoPageScaffold(
                        child: Text('tab 2'),
                      );
                    },
                  );
              }
              return Container();
            }));
  }
}

Answer 2

您只需将 useRootNavigator 设置为 true。这将在所有其他内容之上显示模型 sheet。

The useRootNavigator parameter ensures that the root navigator is used to display the bottom sheet when set to true. This is useful in the case that a modal bottom sheet needs to be displayed above all other content but the caller is inside another Navigator.

重构代码：

    void onPressed(BuildContext context) async {
     await showModalBottomSheet(
      useRootNavigator: true,
      context: context,
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            title: Text('Delete'),
            onTap: () => Navigator.of(context).pop('delete'),
          ),
          Divider(),
          ListTile(
            title: Text('Cancel'),
            onTap: () => Navigator.of(context).pop('cancel'),
          )
        ],
      ),
    );
}

Flutter showModalBottomSheet 隐藏在 CupertinoTabBar 后面

Flutter showModalBottomSheet is hidden behind CupertinoTabBar

flutter

bottom-sheet

flutter-cupertino

flutter-showmodalbottomsheet

cupertinotabbar

我的简化代码