Flutter showModalBottomSheet 隐藏在 CupertinoTabBar 后面答案

【问题标题】：Flutter showModalBottomSheet is hidden behind CupertinoTabBarFlutter showModalBottomSheet 隐藏在 CupertinoTabBar 后面
【发布时间】：2021-01-06 13:26:25
【问题描述】：

我使用 CupertinoTabBar，但想在用户设备为 Android 时显示 Material Design 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();
        }
      )
    );
  }
}

【问题讨论】：

请检查我的回答，你可以吗？

标签： flutter bottom-sheet flutter-cupertino flutter-showmodalbottomsheet cupertinotabbar

【解决方案1】：

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

useRootNavigator 参数确保在设置为 true 时根导航器用于显示底部工作表。这在模态底部工作表需要显示在所有其他内容之上但调用者位于另一个导航器内的情况下很有用。

重构代码：

    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'),
          )
        ],
      ),
    );
}

【讨论】：

【解决方案2】：

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

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();
            }));
  }
}

【讨论】：