【问题标题】:Open drawer on clicking AppBar点击 AppBar 打开抽屉
【发布时间】:2018-05-06 05:21:26
【问题描述】:

如果您创建支架,则可以选择抽屉。如果您现在创建此抽屉,您将自动获得应用栏前导位置的菜单图标。但我想要一个打开抽屉的其他图标。我尝试自己在领先位置制作一个图标按钮,但即使使用“Scafold.of(context).openDrawer()”,此按钮也无法打开抽屉。

是否有任何选项可以替换抽屉按钮的图标?

【问题讨论】:

  • 有时您需要注意您传递给Scaffold.of(context) 方法的BuildContext。如果该上下文与构建 Scaffold 的上下文相同,则该上下文将不知道 Scaffold,因此Scaffold.of(context) 将返回 null。您可以将小部件包装在 Builder 小部件中,以使用更新的上下文构建它。
  • 不幸的是,@JohnDengis 用 Builder 包装 AppBar 不起作用。
  • @AndriyTrubchanin 我的意思不是包装 AppBar,但您可以包装前导,如其他答案之一所示。

标签: flutter


【解决方案1】:

在您的Scaffold 中使用Key 并通过调用myKey.currentState.openDrawer() 来显示抽屉,这是一个工作代码:

import "package:flutter/material.dart";

class Test extends StatefulWidget {
  @override
  _TestState createState() => new _TestState();
}

class _TestState extends State<Test> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      drawer: new Drawer(),
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.settings),
          onPressed: () => _scaffoldKey.currentState.openDrawer(),
        ),
      ),
    );
  }
}

【讨论】:

  • 这样,如果我再次点击 IconButton,抽屉不会关闭。
  • @Augusto 有没有办法在抽屉打开时点击图标按钮?
  • 还是要关闭吗?
  • @user9139407 调用“Navigator.pop(context)”
  • @aziza,我可以请你看一下这里的 Flutter 相关问题:stackoverflow.com/questions/60565658/… 吗?
【解决方案2】:

不需要GlobalKey的已接受答案的替代方案:

class _TestState extends State<Test> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      drawer: new Drawer(),
      appBar: new AppBar(
        leading: Builder(
        builder: (context) => IconButton(
            icon: new Icon(Icons.settings),
            onPressed: () => Scaffold.of(context).openDrawer(),
          ),
        ),
      ),
    );
  }
}

【讨论】:

  • @SuyonWon 有什么问题?
  • 抱歉,您是对的,您应用了额外的 Builder()。我错过了。
  • 我还用 Padding 小部件包装了 Icon 小部件,使其准确放置:Padding(child:Icon(Icons.menu),padding:EdgeInsets.all(8.0)
  • 最佳答案。使您的本地 BuildContext 获胜。
【解决方案3】:

你需要初始化scaffoldKey 之后,

打开抽屉并关闭抽屉

 GestureDetector(
          onTap: () {
            if(scaffoldKey.currentState.isDrawerOpen){
              scaffoldKey.currentState.openEndDrawer();
            }else{
              scaffoldKey.currentState.openDrawer();
            }
          },
          child:  LeadingIcon(icon: Icons.menu),//your button
        ),

【讨论】:

    【解决方案4】:

    使用 GlobalKey:

    final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key
    
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        key: _key, // Assign the key to Scaffold.
        drawer: Drawer(),
        floatingActionButton: FloatingActionButton(
          onPressed: () => _key.currentState!.openDrawer(), // <-- Opens drawer
        ),
      );
    }
    

    使用生成器:

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        drawer: Drawer(),
        floatingActionButton: Builder(builder: (context) {
          return FloatingActionButton(
            onPressed: () => Scaffold.of(context).openDrawer(), // <-- Opens drawer.
          );
        }),
      );
    }
    

    【讨论】:

    • 它工作了,但抽屉汉堡按钮仍然出现在应用栏
    猜你喜欢
    • 2015-09-11
    • 1970-01-01
    • 1970-01-01
    • 2019-04-04
    • 2015-04-13
    • 1970-01-01
    • 2023-03-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多