问题

我有一个带有图标按钮的导航栏。当我按下按钮时，我想在导航栏上方显示模态底部表单（使导航栏可见）。但我尝试了很久都无法实现。

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

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: '',
),

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: '',
          ),

答案1

得分: 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,
          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: '',
),

<details>
<summary>英文:</summary>

If you are using [`modal_bottom_sheet`][1] package, just add the parameter `useRootNavigator` and set it to true. 

&gt; The useRootNavigator parameter ensures that the root navigator is used to display the bottom sheet when set to true. This is useful in the case that a modal bottom sheet needs to be displayed above all other content but the caller is inside another Navigator.

If you are using Flutter’s internal `showModalBottomSheet`, don’t worry, it also has the same parameter. Just set it to 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) =&gt; Container(
                          height:200,
                          child: ListTile(
                            leading: Icon(Icons.share),
                            title: Text(&#39;Share&#39;),
                          ),
                        ));
                  },
                    icon:const Icon(Icons.add_outlined,color: Colors.white,),),
                ),
                label: &#39;&#39;,
              ),


  [1]: https://pub.dev/packages/modal_bottom_sheet

</details>