如何在 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 个连续的对话框的主要内容,如果未能解决你的问题,请参考以下文章