如何解决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();
}));
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。