如何在保持对话框打开的同时关闭抽屉? [英] How to close the Drawer while keeping the Dialog opened?

问题描述

最小代码:

  void main()=>runApp(MaterialApp(home:MainPage()));MainPage类扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回脚手架(appBar:AppBar()，抽屉:MyDrawer()，);}}类MyDrawer扩展了StatelessWidget {@override窗口小部件build(BuildContext context){返回抽屉(子代:RaisedButton(onPressed:(){//关闭抽屉，而不是对话框.Timer(Duration(seconds:2)，()=> Navigator.of(context，rootNavigator:true).pop());//显示对话框并将其保持在打开状态.showDialog(上下文:上下文，生成器:(_)=>AlertDialog(title:Text('FooDialog'))，);}，子级:Text('Show Dialog')，)，);}} 

按下按钮时，我将显示对话框，两秒钟后，我想关闭 Drawer ，同时保持 Dialog 在屏幕上打开.为此，我使用了 Navigator 的 Timer 和 rootNavigator 属性.但是，我的对话框被关闭了.

除了使用 GlobalKey< DrawerControllerState> 东西以外，是否还有其他解决方案来关闭抽屉?

解决方案

您可以使用 ScaffoldState 关闭抽屉.只需跟踪时间，您就可以做好准备.在

请注意:我没有点击屏幕上的任何位置来关闭抽屉.它会自动通过 timer()

Minimal code:

void main() => runApp(MaterialApp(home: MainPage()));

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: MyDrawer(),
    );
  }
}

class MyDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: RaisedButton(
        onPressed: () {
          // Close the Drawer, not the Dialog. 
          Timer(Duration(seconds: 2), () => Navigator.of(context, rootNavigator: true).pop());

          // Show the Dialog and keep it in opened state. 
          showDialog(
            context: context,
            builder: (_) => AlertDialog(title: Text('FooDialog')),
          );
        },
        child: Text('Show Dialog'),
      ),
    );
  }
}

On pressing the button, I am showing dialog and after 2s I want to close the Drawer while keeping the Dialog opened on the screen. For this I am using Timer and rootNavigator property of Navigator. However, my dialog is getting dismissed.

Is there any solution for closing the drawer besides using GlobalKey<DrawerControllerState> stuff?

解决方案

You can use ScaffoldState, to close the drawer. Just keep a track of the time and you are good to go. In this answer, I have told you on how to use the ScaffoldState with your drawer.

This code will help you achieve what you want. I have used the second option from my previous answer, that is, using everything in the MainPage only

class MainPage extends StatelessWidget {
  
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  
  // this will check for the drawer state and close it
  // using _scaffoldKey
  timer() {
    return Future.delayed(Duration(seconds: 2), (){
      // checking whether it is open
      if(_scaffoldKey.currentState.isDrawerOpen){
        // here how you close it
        _scaffoldKey.currentState.openEndDrawer();
      }
    });
  }
  
  Future<void> _showMyDialog(BuildContext context) async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('AlertDialog Title'),
          content: SingleChildScrollView(
            child: ListBody(
              children: <Widget>[
                Text('This is a demo alert dialog.'),
                Text('Would you like to approve of this message?'),
              ],
            ),
          ),
          actions: <Widget>[
            FlatButton(
              child: Text('Approve'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
  
  // Our drawer
  Drawer _drawer(BuildContext context) => Drawer(
    child: RaisedButton(
      onPressed: (){
        timer();
        _showMyDialog(context);
      },
      child: Text('Show Dialog'),
    )
  );
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(),
      drawer: _drawer(context)
    );
  }
}

Result

Please note: I have not clicked anywhere on the screen, to close the drawer. It goes automatically by the timer()

这篇关于如何在保持对话框打开的同时关闭抽屉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！