showModalBottomSheet: 在底部表单关闭之前显示对话框

huangapple go评论86阅读模式
英文:

showModalBottomSheet: show dialog before bottom sheet close

问题

我想向用户显示一个底部表单以编辑一些数值。
一旦TextField被更改,我会显示一个保存按钮,该按钮将写入数据库。
在每次编辑时写入数据库会非常慢,因为我还需要将数据序列化。

如果用户在没有保存编辑数据的情况下关闭底部表单,我想显示一个警告对话框。
只有当用户确信他们的编辑可能会丢失时,底部表单才应该关闭。

我发现Flutter的BottomSheet已经有一个onClosing回调。然而,我没有找到任何方法来从showModalBottomSheet配置(设置)它,所以有了这个问题。

文档中说,通过使用showModalBottomSheetBottomSheet成为builder返回的小部件的父级。然而,据我所知,在Flutter中,小部件没有办法访问它的父小部件。

英文:

I want to show the user a bottom sheet to edit some values.
I display a save button once a TextField is changed that writes to the database.
Writing to the database on every edit would be very slow as I need to serialize the data too.

I want to display a warning dialog if the bottom sheet is closed without the user having saved the edited data.
The bottom sheet should only close if the user is sure that their edits can be lost.

I found that Flutter's BottomSheet already has an onClosing callback. However, I didn't find any way to configure (set) it from showModalBottomSheet, therefore the question.

The docs say that by using showModalBottomSheet, BottomSheet becomes the parent of the widget returned by builder. However, as far as I know, there is no way for a widget to access it's parent widget in Flutter.

This is NOT a dupe of this question. That wants a way to do stuff after the sheet was closed. I want to do this before the sheet gets closed

答案1

得分: 1

你可以使用WillPopScope小部件来包裹你的showModalBottomSheet的内容。当用户试图关闭模态框时,WillPopScope会被触发,你可以在那里添加一个条件来检查模态底部表应该实际关闭还是保持打开。例如,在那里,你可以触发一个AlertDialog,通知用户可能会有数据丢失,并让用户在两个选项之间做出选择。

这个AlertDialog的例子可能是:

> 如果继续,你将失去所有编辑的数据。你确定要继续吗?
>
> 按钮:'是','否'

如果用户选择'是',然后你可以返回WillPopScope为true,你的模态框将被关闭。如果用户选择'否',那么WillPopScope将返回false,底部模态表单将不会关闭。

这里有一个使用WillPopScope的例子:https://api.flutter.dev/flutter/widgets/WillPopScope-class.html

不过有一个已知的问题(https://github.com/flutter/flutter/issues/106942),即当用户拖动模态底部表以关闭它时,WillPopScope不起作用。这意味着你必须将enableDrag设置为false

英文:

You could use WillPopScope Widget to wrap the contents of your showModalBottomSheet. When the user tries to close the modal the WillPopScope is triggered and there you can add a condition in order to check if the modalBottomSheet should actually close or not. For example, there you can trigger an AlertDialog that informs the user about potential data loss and let him decide between two options.

An example of this AlertDialog could be:

> If you continue you will lose all edited data. Are you sure that you
> want to proceed?
>
> CTA: 'Yes', 'No'

If user selects 'Yes' then you can return WillPopScope true and your modal will be dismissed. If the user selects 'No', then the WillPopScope will return false and the bottomModalSheet won't pop.

Here is an example with WillPopScope https://api.flutter.dev/flutter/widgets/WillPopScope-class.html

There is a known issue (https://github.com/flutter/flutter/issues/106942) though that WillPopScope doesn't work when user drags the modalbottomsheet in order to dismiss it. That means that you have to set enableDrag to false.

huangapple
  • 本文由 发表于 2023年3月8日 17:21:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/75671269.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定