我正在制作一个Ffltter应用程序,我需要能够通过点击BottomNavigationBarItem来打开抽屉.有什么办法可以做到这一点吗?

UX Designer的家伙把抽屉菜单图标放在底部导航栏的索引0处.我试图在Flutter 文档中找到答案,但我没有找到任何相关的东西.我实际上找到了一种以编程方式打开它的方法(如下所示),但在我的例子中不是这样工作的.

class _HomeState extends State<Home> {
  int _currentIndex = 1; // 0 = menu

  final List<Widget> _children = [
    PlaceholderWidget(Colors.deepPurple),
    PlaceholderWidget(Colors.white),
    DiagnosisWidget(),
    FindUsWidget(),
  ];

  _navItem(String text, IconData icon) {
    return BottomNavigationBarItem(
      /* Building Bottom nav item */
    );
  }

  void onTabTapped(int index) {
    setState(() {
      if(index == 0) {
        Scaffold.of(context).openDrawer(); // This is what I've tried
      }
      else {
        _currentIndex = index;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: MyDrawer(),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed, // 4+ items in the bar
        items: [
          _navItem('MENU', Icons.menu),
          _navItem('HOME', Icons.home),
          _navItem('DIAGNOSIS', Icons.person),
          _navItem('FIND US', Icons.location_on),
        ],
      ),
    );
  }
}

我没有显示抽屉,而是收到以下错误消息:

使用不包含Scaffold的上下文调用了Scaffold.of().

推荐答案

这是因为在onTabTapped中,你使用的上下文不包含你创建的脚手架.

您在build中实例化了Scaffold,但是在onTabTapped中,您要在当前上下文(_HomeState上下文)中查找父Scaffold.

您可以在Scaffold内使用Builder来获得正确的上下文,或者在您的Scaffold上使用GlobalKey.

有关更多详细信息,请参见this answer.

EDIT:

您可以执行以下操作:

class _HomeState extends State<Home> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>(); // ADD THIS LINE
  int _currentIndex = 1; // 0 = menu

  final List<Widget> _children = [
    PlaceholderWidget(Colors.deepPurple),
    PlaceholderWidget(Colors.white),
    DiagnosisWidget(),
    FindUsWidget(),
  ];

  _navItem(String text, IconData icon) {
    return BottomNavigationBarItem(
      /* Building Bottom nav item */
    );
  }

  void onTabTapped(int index) {
    setState(() {
      if(index == 0) {
        _scaffoldKey.currentState.openDrawer(); // CHANGE THIS LINE
      }
      else {
        _currentIndex = index;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey, // ADD THIS LINE
      drawer: Drawer(
        child: MyDrawer(),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed, // 4+ items in the bar
        items: [
          _navItem('MENU', Icons.menu),
          _navItem('HOME', Icons.home),
          _navItem('DIAGNOSIS', Icons.person),
          _navItem('FIND US', Icons.location_on),
        ],
      ),
    );
  }
}

Dart相关问答推荐

为什么 Dart 的编译器认为代码可能为空,而代码保证它不能为空?

在 Dart 中使用隔离优于异步的优势

ListView 不会刷新,而附加列表会刷新 (Flutter)

Flutter.io (dart) - 如何创建左填充覆盖?

如何处理 ListView 滚动方向

如何在Flatter中打开设备GPS?

Flutter Null 安全迁移说Package doesn't exist

Flutter-创建一个倒计时(countdown)小部件

Flutter:测试期间的计时器问题

Flutter DataTable - 点击行

如何平移和zoom 图像?

有没有更好的方法来找出文件或目录是否存在?

如何从 JavaScript 调用 Dart 函数

如何在 Dart 中创建 StreamTransformer?

何时使用polymer点击或点击?

Dart 中的抽象基类

从 Dart 调用 javascript

比较在 Dart 中创建单例的方法

如何在 base64 中编码 Dart 字符串?

Dart 中的函数重载