更改 Scaffold.body 值后如何在颤动中隐藏抽屉

Posted 2023-02-15

【中文标题】更改 Scaffold.body 值后如何在颤动中隐藏抽屉

【英文标题】：How to hide drawer in flutter after changing Scaffold.body value

【发布时间】：2018-06-15 15:35:08

【问题描述】：

我正在使用这个问题中的方法在颤动中改变脚手架的主体：

Flutter Drawer Widget - change Scaffold.body content

所描述的方法非常有效。现在我希望抽屉在用户点击其中一项后自动关闭。

我尝试使用 Navigator.pop() 方法，但它会弹出整个屏幕，而不仅仅是抽屉。它让我完全黑屏。

有什么建议吗？

【问题讨论】：

最简单的方法是：'Scaffold.of(context).openEndDrawer();'

【参考方案1】：

你使用的是Navigator.of(context).pop()吗？我无法重现您的问题，您可以发布一个最小的示例来重现它吗？

以下代码按预期工作：设置按钮弹出抽屉，而另一个则没有。

class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

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


class _MyHomePageState extends State<MyHomePage> 
  String text = "Initial Text";

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
        drawer: new Drawer(
          child: new ListView(
            children: <Widget>[
              new Container(child: new DrawerHeader(child: new Container())),
              new Container (
                child: new Column(
                    children: <Widget>[
                      new ListTile(leading: new Icon(Icons.info),
                          onTap:()
                            setState(()
                              text = "info pressed";
                            );
                          
                      ),
                      new ListTile(leading: new Icon(Icons.save),
                          onTap:()
                            setState(()
                              text = "save pressed";
                            );
                          
                      ),
                      new ListTile(leading: new Icon(Icons.settings),
                          onTap:()
                            setState(()
                              text = "settings pressed";
                            );
                            Navigator.of(context).pop();
                          
                      ),

                    ]
                ),
              )
            ],
          ),
        ),
        appBar: new AppBar(title: new Text("Test Page"),),
        body: new Center(child: new Text((text)),
        ));
  

【讨论】：

你是对的。事实证明，我将 Scaffold 包装在 MaterialApp 中。这导致了这个问题。谢谢！

【参考方案2】：

创建scaffoldKey

关闭抽屉

 _scaffoldKey.currentState.openEndDrawer(),

打开抽屉

scaffoldKey.currentState.openDrawer(),

示例

     InkWell(
        onTap: ()=> widget.scaffoldKey.currentState.openDrawer(),
        child: Icon(
          Icons.menu,
          size: 38,
          color: Color(0xFFFFFFFF),
        ),
      ), 

【讨论】：

openEndDrawer 在屏幕末尾打开抽屉！

我认为这是一个可怕的 hack，但我认为它拯救了我的一天。不知何故，我的 ListTiles 与我的 Scaffold 处于不同的上下文中，因此我无法从那里访问 Navigator 以关闭 Drawer。奇怪的是，键上没有 closeDrawer() 方法，我可以将它注入到我的 ListTile 中。打开 EndDrawer 首先关闭抽屉。所以只要我没有 EndDrawer 我就可以使用这个方法。

我什至没有想到解决我的问题可以这么简单。我有一个带有列表图块的抽屉，它弹出抽屉并推送另一条路线，但如果我这样做太快，在抽屉打开后立即 - 弹出也从脚手架内部调用，所以我的初始页面被弹出并显示黑屏反而起来。节省了我的时间，伙计

【参考方案3】：

如果您使用的是 MaterialApp，则需要使用 Scaffold.of(context).openEndDrawer() 这样您就不需要创建 GlobalKey。

class Menu extends StatelessWidget 
  const Menu(
    Key key,
  ) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return ListView(
      padding: EdgeInsets.zero,
      children: [
        FlatButton(
          onPressed: () 
            Navigator.of(context).pushNamed('/');
            Scaffold.of(context).openEndDrawer();
          ,
          child: ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
          ),
        ),
        FlatButton(
          onPressed: () 
            Navigator.of(context).pushNamed('/about');
            Scaffold.of(context).openEndDrawer();
          ,
          child: ListTile(
            leading: Icon(Icons.question_answer),
            title: Text('About'),
          ),
        ),
      ],
    );
  

【参考方案4】：

简单地说：

ListTile(
  title: const Text('Item 1'),
  onTap: () 
    // Update the state of the app
    // ...
    // Then close the drawer
    Navigator.pop(context);
  ,
),