英文:
How to show flutter bottom sheets, dialogue boxes over native bottom navigation bar?
问题
我正在将一个使用Flutter创建的屏幕集成到现有的原生应用中。原生应用有一个底部导航栏，该导航栏在所有屏幕上都存在。Flutter屏幕需要显示底部表和对话框，但所有这些只显示在底部导航栏（顶部导航栏也是如此）的后面。理想情况下，它应该显示在所有UI元素的顶部。我该如何做到这一点？
英文:
I'm integrating a screen done in flutter to an existing native app. The native app has a bottom navigation bar that is present on all screens. The flutter screen needs to show bottom sheets and dialogue boxes, but all of these only show behind the bottom navigation bar (top navigation bar as well). Ideally, it should appear on top of all UI elements. How can I do that?
答案1
得分: 1
在showModalBottomSheet方法中将useRootNavigator标记为true
代码如下：
showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
),
),
backgroundColor: Colors.white,
context: context,
isScrollControlled: true,
useRootNavigator: true, /// 添加这一行以在导航栏上显示底部表单
builder: (BuildContext context) {
return YourBottomLayout();
},
);
英文:
mark useRootNavigator as true in showModalBottomSheet method
code shows like below:
showModalBottomSheet(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25.0),
topRight: Radius.circular(25.0),
),
),
backgroundColor: Colors.white,
context: context,
isScrollControlled: true,
useRootNavigator: true, /// add this line to show bottomsheet over navbar
builder: (BuildContext context) {
return YourBottomLayout();
},
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论