Flutter对话框关闭前保存编辑文本至SQLite数据库的实现问询

嘿，这个问题我之前做项目时也碰到过，确实Flutter的对话框没有直接的onClose监听器，但咱们可以通过几个巧妙的方式实现需求，下面给你分享最实用的两种方案：

方案一：利用showDialog的Future返回值 #

showDialog本身是一个Future，当对话框关闭时会返回你通过Navigator.pop传递的数据。咱们可以在关闭对话框前收集好所有文本字段的内容，传递给调用方，再在调用方完成SQLite的保存操作。

代码示例： #

首先是调用对话框的地方：

// 弹出对话框并等待返回的编辑内容
final editedItems = await showDialog<List<String>>(
  context: context,
  barrierDismissible: false, // 可选：禁止点击外部关闭，确保用户通过按钮操作
  builder: (context) => EditableListDialog(),
);

// 如果返回了有效数据，就保存到SQLite
if (editedItems != null) {
  // 这里替换成你的SQLite保存逻辑
  await yourDatabaseHelper.saveItems(editedItems);
}

然后是自定义的对话框Widget：

class EditableListDialog extends StatefulWidget {
  @override
  _EditableListDialogState createState() => _EditableListDialogState();
}

class _EditableListDialogState extends State<EditableListDialog> {
  late List<TextEditingController> _textControllers;

  @override
  void initState() {
    super.initState();
    // 初始化控制器，这里可以根据你的初始数据生成
    _textControllers = List.generate(
      3,
      (index) => TextEditingController(text: "列表项${index+1}"),
    );
  }

  @override
  void dispose() {
    // 务必销毁控制器，避免内存泄漏
    for (var controller in _textControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  // 收集所有文本字段的内容
  List<String> _getEditedContent() {
    return _textControllers.map((controller) => controller.text.trim()).toList();
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text("编辑列表项"),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: _textControllers.map((controller) {
          return TextField(
            controller: controller,
            decoration: InputDecoration(
              hintText: "请输入内容",
              border: const OutlineInputBorder(),
            ),
            margin: const EdgeInsets.symmetric(vertical: 8),
          );
        }).toList(),
      ),
      actions: [
        TextButton(
          onPressed: () {
            // 取消操作，返回null
            Navigator.pop(context);
          },
          child: const Text("取消"),
        ),
        TextButton(
          onPressed: () {
            // 保存操作，返回编辑后的内容
            Navigator.pop(context, _getEditedContent());
          },
          child: const Text("保存"),
        ),
      ],
    );
  }
}

方案二：监听对话框的所有关闭场景（包括点击外部/返回键） #

如果允许用户点击对话框外部或者按返回键关闭，咱们可以用WillPopScope来监听这些关闭事件，确保无论用户怎么关闭对话框，都能收集到最新的编辑内容。

代码调整： #

只需要修改对话框的build方法，用WillPopScope包裹AlertDialog：

@override
Widget build(BuildContext context) {
  return WillPopScope(
    // 监听返回键/外部点击关闭事件
    onWillPop: () async {
      // 收集内容并返回
      Navigator.pop(context, _getEditedContent());
      return true;
    },
    child: AlertDialog(
      // 原有的对话框内容...
    ),
  );
}

这样不管用户是点击保存按钮、返回键，还是点击对话框外部，都会触发内容收集并返回给调用方，之后就能正常保存到SQLite了。

注意事项 #

• 一定要记得在dispose方法中销毁所有TextEditingController，避免内存泄漏。
• 如果你的列表项是动态添加/删除的，要动态管理_textControllers的增删，确保每个文本字段都对应一个控制器。

内容的提问来源于stack exchange，提问作者Tin Man