如何从 Flutter 的底部导航栏中制作弹出菜单？

问题描述

IM 试图实现类似于此屏幕截图中的内容，即底部导航栏在页面之间切换，但中间按钮启动底部工作表或其他操作（如弹出菜单）并停留在该页面上...

class _HomePageState extends State<HomePage> {
  PersistentTabController _controller;

  @override
  void initState() {
    super.initState();

    _controller = PersistentTabController(initialIndex: 0);
    _hideNavBar = false;
  }

  List<Widget> _buildScreens() {
    return [
      MyHomePage(),AddPage(),// this need to be action button not new page...

      MyActivity(),];
  }
  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),title: "Home",activeColor: Colors.purpleAccent,inactiveColor: Colors.grey,),PersistentBottomNavBarItem(
        icon: Icon(Icons.add),title: ("Add"),PersistentBottomNavBarItem(
        icon: Icon(Icons.search),title: ("MyAct"),];
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView.custom(
        context,controller: _controller,screens: _buildScreens(),confineInSafeArea: true,itemCount: 3,handleAndroidBackButtonPress: true,resizetoAvoidBottomInset: false,stateManagement: true,hideNavigationBar: _hideNavBar,screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,curve: Curves.ease,duration: Duration(milliseconds: 200),customWidget: CustomNavBarWidget(
          items: _navBarsItems(),onItemSelected: (index) {

            setState(() {
              _controller.index = index; // THIS IS CRITICAL!! Don't miss it!
            });
          },selectedindex: _controller.index,);
}

IM 使用persistenNavBar，但我认为与常规底部导航情况相同... 我想我可以制作自定义底部导航栏或具有不同小部件类型的列表？

解决方法

您可以使用

showModalBottomSheet()

来自 Flutter 并设置参数如下：

showModalBottomSheet(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),//for the round edges
    builder: (context) {
        return Container(
            //specify height,so that it does not fill the entire screen
            child: Column(children: []) //what you want to have inside,I suggest using a column
        );
    }
    context: context,isDismissible: //boolean if you want to be able to dismiss it
    isScrollControlled: //boolean if something does not display,try that
);

然后你就可以在BottomNavigationBar tap上执行这个函数了。