时间戳

首页 > 解决方案 > 如何从 Flutter 中的底部导航栏制作弹出菜单？

flutter - 如何从 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"),
        activeColor: Colors.purpleAccent,
        inactiveColor: Colors.grey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.search),
        title: ("MyAct"),
        activeColor: Colors.purpleAccent,
        inactiveColor: Colors.grey,
      ),
    ];
  }
  @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，但我认为常规底部导航的情况是一样的......我想我可以制作自定义底部导航栏，或者使用不同小部件类型的列表？

标签： flutterbottomnavigationviewpopupmenubottombar

解决方案

您可以使用

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 点击执行这个功能。

推荐阅读