如何从底部导航触发抽屉？ [复制]答案

【问题标题】：How can i trigger drawer from bottom navigation? [duplicate]如何从底部导航触发抽屉？ [复制]
【发布时间】：2021-09-21 20:56:37
【问题描述】：

我需要这样的抽屉-> https://i.stack.imgur.com/TWT4H.jpg

这是我当前的代码。我正在使用persistent_bottom_nav_bar。我需要从底部导航栏最后一项触发抽屉。有人知道吗？如果无法从底部导航访问抽屉，是否有其他方法可以复制该 UI。谢谢

 class BottomNav extends StatefulWidget {
  const BottomNav({Key? key}) : super(key: key);

  @override
  _BottomNavState createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  late PersistentTabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PersistentTabController(initialIndex: 0);
    setState(() {});
  }

  List<Widget> _buildScreens() {
    return [
      HomePage(),
      HistoryPage(),
      ServicePage(),
      ProfilePage(),
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: ("Home"),
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        activeColorPrimary: themeBlue,
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.history),
        title: ("History"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.apps_outlined),
        title: ("Services"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.person_alt_circle),
        title: ("Profile"),
        activeColorPrimary: themeBlue,
        inactiveColorPrimary: greyColor,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(),
        confineInSafeArea: true,
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: true,
        popAllScreensOnTapOfSelectedTab: true,
        popActionScreens: PopActionScreensType.all,
        itemAnimationProperties: ItemAnimationProperties(
          duration: Duration(milliseconds: 200),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        navBarStyle:
            NavBarStyle.style6, // Choose the nav bar style with this property.
      ),
    );
  }
}

【问题讨论】：

@Hamed，是的。谢谢你的帮助
查看How to Ask 来改进这个问题。

标签： flutter

【解决方案1】：

通过声明该页面的脚手架的脚手架键。

GlobalKey scaffoldKey = GlobalKey();

并将抽屉和末端抽屉提供给脚手架，然后单击打开并调用您选择的操作：

抽屉：scaffoldKey.currentState?.openDrawer();

结束抽屉：scaffoldKey.currentState?.openEndDrawer();

【讨论】：

【解决方案2】：

只需使用 GlobalKey 即可访问 Scaffold 的状态。然后在 PersistentBottomNavBarItem 的 onPressed() 中使用它来执行 openEndDrawer()。

    final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
    List<PersistentBottomNavBarItem> _navBarsItems(BuildContext context) {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: ("Home"),
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        activeColorPrimary: themeBlue,
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.history),
        title: ("History"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.apps_outlined),
        title: ("Services"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
          icon: Icon(CupertinoIcons.person_alt_circle),
          title: ("Profile"),
          activeColorPrimary: themeBlue,
          inactiveColorPrimary: greyColor,
          textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
          onPressed: (_) {
            _scaffoldKey.currentState?.openEndDrawer();
          }),
    ];
  }

    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      // to prevent endDrawer from accidentally showing by swipe
      endDrawerEnableOpenDragGesture: false,
      body: PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(context),
        confineInSafeArea: true,
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: true,
        popAllScreensOnTapOfSelectedTab: true,
        popActionScreens: PopActionScreensType.all,
        itemAnimationProperties: ItemAnimationProperties(
          duration: Duration(milliseconds: 200),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        navBarStyle:
            NavBarStyle.style6, // Choose the nav bar style with this property.
      ),
    );
  }

但是，您可能需要实现自己的 BottomNavBar 而不是使用此包，因为使用 PersistentBottomNavBar.onPressed() 会覆盖突出显示配置文件磁贴的默认行为。

要关闭末端抽屉，请使用：

Navigator.of(context).pop();

有用的链接：

PersistentBottomNavBar.onPressed()

ScaffoldState.openEndDrawer()

【讨论】：