Flutter中如何从Data Table向Modal传递参数

嘿，刚接触Flutter的时候确实容易把路由跳转和对话框的参数传递搞混，我来帮你理清楚并解决这个问题！

你之前用Navigator.pushReplacement能成功传参，是因为这属于路由页面跳转，RouteSettings.arguments是Flutter路由系统专门用来传递参数的机制。但showDialog弹出的Modal本质上是当前页面上叠加的一个Widget，不属于新的路由页面，所以那套路由传参的方式就不适用啦。

正确的做法：直接给Modal的构造函数传参 #

这是最直观也最常用的方式，步骤很简单：

1. 修改你的PreviewEstateModal，添加参数接收的构造函数
   先给Modal定义一个接收参数的构造方法，把你需要的element传进去：

   class PreviewEstateModal extends StatelessWidget {
     // 替换成你实际的element类型，比如EstateModel之类的自定义类
     final YourElementDataType element;
   
     // 构造函数，要求必须传入element参数
     const PreviewEstateModal({super.key, required this.element});
   
     @override
     Widget build(BuildContext context) {
       // 现在你可以在Modal的任何地方直接使用this.element啦
       return AlertDialog(
         title: Text(element.title), // 举个例子，调用element的属性
         content: Text(element.description),
         actions: [
           TextButton(
             onPressed: () => Navigator.pop(context),
             child: const Text('关闭'),
           ),
         ],
       );
     }
   }
   

2. 在showDialog中直接传递参数给Modal
   把你原来的代码改成这样，直接在创建PreviewEstateModal实例时传入element：

   previewEstate(element) {
     showDialog(
       context: context,
       barrierDismissible: true,
       builder: (BuildContext context) {
         // 直接把element传给Modal的构造函数
         return PreviewEstateModal(element: element);
       },
     );
   }
   

这样修改后，你的Modal就能正常拿到element的数据啦！

为什么之前的路由方式不适用？ #

Navigator.pushReplacement是在Flutter的路由栈中添加/替换页面，每个路由页面都可以通过RouteSettings携带参数；但showDialog只是在当前页面的Widget树中插入一个对话框Widget，它并没有创建新的路由，所以没法通过RouteSettings来传递参数。直接用构造函数传参是对话框这类Widget传递数据的标准做法哦。

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