Flutter:如何以编程方式打开 Drawer [英] Flutter: How to open Drawer programmatically

问题描述

我想以编程方式打开 Drawer 而不是通过滑动它，如何禁用滑动功能(抽屉的触摸功能)

I want to open Drawer programmatically not by sliding it, how to disable that sliding functionality (touch functionality of Drawer)

推荐答案

1. 要禁用滑动打开功能，您可以将 Scaffold 上的属性 drawerEnableOpenDragGesture 设置为 false.

1. To disable the slide to open functionality you can set the property drawerEnableOpenDragGesture on Scaffold to false.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // this to prevent the default sliding behaviour
        drawerEnableOpenDragGesture: false,
        drawer: Drawer(),
        appBar: AppBar(
          leading: Builder(builder: (context) => // Ensure Scaffold is in context
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () => Scaffold.of(context).openDrawer()
            ),
          ),
        )
      )
    );
  }
}

1. 要使用 Scaffold.of(context) 以编程方式打开抽屉，您必须确保(感谢 Krolaw !) 调用的上下文知道 Scaffold.

1. To open the drawer programmatically using Scaffold.of(context) you'll have to ensure (thanks Krolaw !) that the context inside which the call is made is aware of the Scaffold.

一种干净的方法是将按钮包装在构建器中.我已经编辑了答案以包含一个最小的完整工作示例.

A clean way to do it is to wrap the button in a builder. I've edited the answer to include a minimal full working example.

Scaffold 是一个实现 Material Design 原则的小部件，所以请注意，为了能够调用这个方法，你需要 import 'package:flutter/material.dart'; 和你的小部件需要有一个 MaterialApp 作为祖先.

Scaffold is a widget that implements material design principles, so be aware that to be able to call this method, you'll need to import 'package:flutter/material.dart'; and your widget needs to have a MaterialApp as ancestor.

Codepen 演示

与许多 Flutter 事物一样，还有其他解决方案可以确保 Scaffold 处于上下文中.

As with many Flutter things, there are other solutions to ensure Scaffold is in context.

错误消息是 IMO 中 Flutter 框架的最佳功能之一，请允许我谦虚地建议始终彻底阅读它们并探索它们指向的文档.

Error messages are IMO among the best features of flutter framework, allow me to humbly suggest to always read them thoroughly and to explore the documentation they point at.

例如，这是在正确上下文之外调用 openDrawer 时得到的错误消息的一部分:

For instance, this is part of the error message that one gets if calling openDrawer outside of a proper context:

Scaffold.of() 在不包含 Scaffold 的上下文中调用.

从传递给 Scaffold.of() 的上下文开始，找不到任何 Scaffold 祖先.这通常发生在所提供的上下文来自与其构建函数实际创建正在寻找的 Scaffold 小部件相同的 StatefulWidget 时.

No Scaffold ancestor could be found starting from the context that was passed to Scaffold.of(). This usually happens when the context provided is from the same StatefulWidget as that whose build function actually creates the Scaffold widget being sought.

有几种方法可以避免这个问题.最简单的方法是使用 Builder 来获取低于"上下文的上下文.脚手架.有关此示例，请参阅 Scaffold.of() 的文档:https://api.flutter.dev/flutter/material/Scaffold/of.html

There are several ways to avoid this problem. The simplest is to use a Builder to get a context that is "under" the Scaffold. For an example of this, please see the documentation for Scaffold.of(): https://api.flutter.dev/flutter/material/Scaffold/of.html

更有效的解决方案是将您的构建功能拆分为多个小部件.这引入了一个新的上下文，您可以从中获取 Scaffold.在此解决方案中，您将有一个外部小部件来创建由新内部小部件的实例填充的 Scaffold，然后在这些内部小部件中您将使用 Scaffold.of().

A more efficient solution is to split your build function into several widgets. This introduces a new context from which you can obtain the Scaffold. In this solution, you would have an outer widget that creates the Scaffold populated by instances of your new inner widgets, and then in these inner widgets you would use Scaffold.of().

一个不太优雅但更方便的解决方案是为 Scaffold 分配一个 GlobalKey，然后使用 key.currentState 属性来获取 ScaffoldState 而不是使用 Scaffold.of() 函数.

A less elegant but more expedient solution is assign a GlobalKey to the Scaffold, then use the key.currentState property to obtain the ScaffoldState rather than using the Scaffold.of() function.

这篇关于Flutter:如何以编程方式打开 Drawer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！