Flutter Scaffold.of(context).openDrawer() 不起作用

Vol*_*vus 3 dart navigation-drawer flutter

我想在按下底部菜单中的自定义按钮后打开一个抽屉 我在使用 Scaffold.of(context).openDrawer() 时遇到问题,它不起作用。我的BottomMenu 是一个单独的小部件类。据我了解,它不起作用,因为它是一个单独的上下文。我怎样才能获得正确的上下文?或者也许有人知道另一种解决方案。

这是我的代码复制器:

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(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Drawer'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: BottomMenu(),
      endDrawer: SizedBox(
        width: double.infinity,
        child: Drawer(
          elevation: 16,
          child: Container(
            color: Colors.black,
            child: ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
                ListTile(
                    title: Text('Some context here',
                        style: TextStyle(color: Colors.white))),
                ListTile(
                    title: Text('Some context here',
                        style: TextStyle(color: Colors.white))),
              ],
            ),
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Call Drawer form menu reproducer',
            )
          ],
        ),
      ),
    );
  }
}

class BottomMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Wrap(
        alignment: WrapAlignment.center,
        children: <Widget>[
          Divider(color: Colors.black, height: 1),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 2),
            child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  InkWell(
                    borderRadius: new BorderRadius.circular(20.0),
                    customBorder: Border.all(color: Colors.black),
                    child: Container(
                      padding: EdgeInsets.only(
                          left: 3, right: 6, bottom: 15, top: 11),
                      child: Row(
                        children: <Widget>[
                          Icon(Icons.menu),
                          Text('Show menu', style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold)),
                        ],
                      ),
                    ),
                    onTap: () {
                      Scaffold.of(context).openDrawer();
                    },
                  ),
                ],
              ),
          ),
        ],
      ),
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

ceg*_*gas 9

问题是您指定了endDraweronScaffold但您正在调用Scaffold.of(context).openDrawer()

openDrawer()文档指出:

如果脚手架有一个非空的 Scaffold.drawer,则此函数将导致抽屉开始其入口动画。

由于您的drawer值为空,因此什么也没有发生。

相反,openEndDrawer()它告诉我们:

如果脚手架有一个非空的 Scaffold.endDrawer,则此函数将导致末端侧抽屉开始其入口动画。

由于您的endDrawer不为空,因此您应该使用openEndDrawer()方法。或者,如果您不关心抽屉从哪一侧滑入,则可以在构建时使用drawer代替。endDrawerScaffold


Sho*_*din 8

我的问题解决了,而不是

Scaffold.of(context).openEndDrawer()
Run Code Online (Sandbox Code Playgroud)

我给 Scaffold 钥匙,然后按状态调用,如下所示

_scaffoldkey.currentState.openEndDrawer()
Run Code Online (Sandbox Code Playgroud)

它解决了我的问题我希望它也适用于你


Hoo*_*oon 7

就我而言,这行得通。

return Scaffold(
      key: _scaffoldKey,
      endDrawerEnableOpenDragGesture: false,  // This!
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.white),
        leading: IconButton(
          icon: Icon(Icons.menu, size: 36),
          onPressed: () => _scaffoldKey.currentState.openDrawer(),  // And this!
        ),
      ),
      drawer: DrawerHome(),
      ....
Run Code Online (Sandbox Code Playgroud)

并且_scaffoldKey必须初始化为,

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
Run Code Online (Sandbox Code Playgroud)

下课。


cha*_*rde 4

Scaffold.of(context).openEndDrawer()
Run Code Online (Sandbox Code Playgroud)