Flutter showModalBottomSheet 隐藏在 CupertinoTabBar 后面

Question

我使用 CupertinoTabBar，但想在用户设备是 Android 时显示材质设计 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

您只需设置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'),
          )
        ],
      ),
    );
}