如何在 Flutter 中显示 2 个连续的对话框

Posted

技术标签:

【中文标题】如何在 Flutter 中显示 2 个连续的对话框【英文标题】:How to show 2 consecutive Dialogs in Flutter 【发布时间】:2020-02-06 02:48:00 【问题描述】:

我有一个带有 Dismissible 小部件的列表。当用户交换 startToEnd 我想播种对话框时,用户可以添加注释。一旦用户在该对话框中单击“确定”,我希望弹出另一个对话框以确认已添加注释,然后在 2 秒后消失。当用户从右向左交换时,我想显示一个带有消息的对话框 2 秒

这是我的代码

  List<Container> _buildBasketList() 
    return appData.basketList.map((bList) 
      var container = Container(
        child: Builder(
          builder: (context) => Dismissible(
            key: Key(UniqueKey().toString()),
            background: Container(
              margin: EdgeInsets.all(8.0),
              color: kColorAccent,
              child: Align(
                  alignment: Alignment(-0.90, 0.00),
                  child: Icon(Icons.add_comment)),
            ),
            onDismissed: (direction) async 
              print('ondismiss  started');
              if (direction == DismissDirection.startToEnd) 
                print('adding a note');
                await showDialog(
                    context: context,
                    builder: (context) => AddDetailsInDialog(
                          dialogText: 'Enter your note',
                          hintText: 'eg. xxx',
                        )).then((value) async 
                  if (value != null) 
                    print('got value');
                    await showDialog(
                        context: context,
                        builder: (context) => ShowAlertAndAutoDismiss(
                              text: 'Note added',
                            ));
                  
                );
               else 
                print('deleting record in basketList');
                await showDialog(
                    context: context,
                    builder: (context) => ShowAlertAndAutoDismiss(
                          text:
                               "Item removed from your list",
                        ));
              
            ,

这是我的课程

class ShowAlertAndAutoDismiss extends StatelessWidget 
  final String text;
  ShowAlertAndAutoDismiss(this.text);

  @override
  Widget build(BuildContext context) 
    print('building ShowAlertAndAutoDismiss');
    Future.delayed(Duration(milliseconds: 1000)).then((_) 
      print('ziiiip');
    );
    return AlertDialog(
      title: Center(child: Text(text)),
    );
  

class AddDetailsInDialog extends StatelessWidget 
  final String dialogText;
  final String hintText;
  final myController = TextEditingController();

  AddDetailsInDialog(
    this.dialogText,
    this.hintText,
  );

  @override
  Widget build(BuildContext context) 
    return AlertDialog(
      title: Text(dialogText),
      content: new Row(
        children: <Widget>[
          new Expanded(
              child: new TextField(
            controller: myController,
            autofocus: true,
            decoration: new InputDecoration(hintText: hintText),
          ))
        ],
      ),
      actions: <Widget>[
        FlatButton(
          child: Text('OK'),
          onPressed: () 
            Navigator.of(context).pop(myController.toString());
          ,
        ),
      ],
    );
  

  @override
  void dispose() 
    myController.dispose();
  

现在由于某些奇怪的原因,AddDetailsInDialog 中的 ShowAlertAndAutoDismiss 被调用了两次......嗯?

这是我从右向左交换(删除)然后从左向右滑动(添加注释)时得到的日志。删除工作,但 addNote 被调用 2 次。为什么???有人明白为什么吗?

删除时记录

I/flutter ( 7941): ondismiss  started
I/flutter ( 7941): deleting record in basketList
I/flutter ( 7941): building ShowAlertAndAutoDismiss
I/flutter ( 7941): ziiiip

添加注释时记录

I/flutter ( 7941): ondismiss  started
I/flutter ( 7941): adding a note
I/flutter ( 7941): got value
I/flutter ( 7941): building ShowAlertAndAutoDismiss
I/flutter ( 7941): building ShowAlertAndAutoDismiss
I/flutter ( 7941): ziiiip
I/flutter ( 7941): ziiiip

【问题讨论】:

我刚刚意识到罪魁祸首是AddDetailsInDialog,它被调用了两次......为什么仍然是个谜?!看起来它正在重建,但为什么呢? 【参考方案1】:

所以我通过在函数中移动 ShowAlertAndAutoDismiss 来解决

void alertToDismiss() 
    showDialog(
        context: context,
        builder: (context) => ShowAlertAndAutoDismiss(
              text: 'Note added',
            ));
  

...

await showDialog(
                    context: context,
                    builder: (context) => AddDetailsInDialog(
                          dialogText: 'Enter your note',
                          hintText: 'eg. xxx',
                        )).then((value) async 
                  if (value != null) 
                    print('got value');
                    alertToDismiss():
                  

看起来这个小部件的行为类似于 FutureBuilder,并且首先立即使用 null 调用构建器,然后在解析未来之后

【讨论】:

以上是关于如何在 Flutter 中显示 2 个连续的对话框的主要内容,如果未能解决你的问题,请参考以下文章

Flutter - 一次只显示一个对话框

如何根据 Firebase Auth 错误消息在 Flutter 中显示自定义警报对话框?

如何在不覆盖的情况下连续打开对话框

如何在 Flutter 中更改权限对话框 UI? [关闭]

Flutter:bloc,如何显示警报对话框

你如何在flutter.dart中连续检查互联网访问,而不是连接[重复]