Flutter showModalBottomSheet隐藏在CupertinoTabBar的后面 我的简化代码

问题描述

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

解决方法

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

,

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

class MyApp extends StatelessWidget {
  void onPressed(BuildContext context) async {
    await showModalBottomSheet(
      context: context,builder: (context) => Padding(
        padding:  EdgeInsets.fromLTRB(0,60),child: Column(
          mainAxisSize: MainAxisSize.min,children: <Widget>[
            ListTile(
              title: Text('Delete'),ListTile(
              title: Text('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();
            }));
  }
}