导航栏上方的颤动模态底部表单

Question

我有一个带有图标按钮的导航栏。当我按下按钮时，我想在导航栏上方显示模式底部表单（因此导航栏可见）。我不能尝试很长时间但无法成功。

我希望在导航栏上方显示模态底部表格

BottomNavigationBarItem(
            icon:Container(
              height: 40,
              width: 54,
              decoration: const BoxDecoration(
                  color: Colors.orange,
                borderRadius: BorderRadius.all(Radius.circular(10.0)
                ),
              ),
              child: IconButton(onPressed: () {
                showModalBottomSheet(
                    context: context,
                    //backgroundColor: Colors.transparent,
                    builder: (context) => Container(
                      height:200,
                      child: ListTile(
                        leading: Icon(Icons.share),
                        title: Text('Share'),
                      ),
                    ));
              },
                icon:const Icon(Icons.add_outlined,color: Colors.white,),),
            ),
            label: '',
          ),

Answer 1

如果您使用

modal_bottom_sheet

包，只需添加参数

useRootNavigator

并将其设置为 true。

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

如果你使用的是Flutter内部的

showModalBottomSheet

，不用担心，它也有相同的参数。只需将其设置为 true 即可。

BottomNavigationBarItem(
            icon:Container(
              height: 40,
              width: 54,
              decoration: const BoxDecoration(
                  color: Colors.orange,
                borderRadius: BorderRadius.all(Radius.circular(10.0)
                ),
              ),
              child: IconButton(onPressed: () {
                showModalBottomSheet(
                    context: context,
                    //backgroundColor: Colors.transparent,
                    useRootNavigator: true,
                    builder: (context) => Container(
                      height:200,
                      child: ListTile(
                        leading: Icon(Icons.share),
                        title: Text('Share'),
                      ),
                    ));
              },
                icon:const Icon(Icons.add_outlined,color: Colors.white,),),
            ),
            label: '',
          ),

Answer 2

由于底部sheet是从Scaffold执行的，所以需要将NavigationBar（BottomBar）和底部sheet的导航分开。要实现这一点，使用 go_router 包中的 ShellRoute 会很有帮助。欲了解更多详情，请参阅以下链接。

• https://medium.com/@ahm4d.bilal/using-gorouters-shellroute-in-flutter-for-nested-navigation-777a9a20642f

• https://codewithandrea.com/articles/flutter-bottom-navigation-bar-nested-routes-gorouter/