Flutter中如何在StatefulWidget页面间传递List数据并填充目标页表单

第一步：卡片页添加跳转传参逻辑 #

在你原来的卡片onTap回调中补充跳转逻辑，将需要传递的纸杯蛋糕数据通过路由参数带到第二个页面：

onTap: () {
  cupcakeName = data['cupcake_name'];
  cupcakeDesc = data['description'];
  cupcakePrice = data['price'];
  // 跳转到第二个页面并携带参数
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => const CupcakeEditPage(), // 替换为你第二个页面的类名
      settings: RouteSettings(
        // 按key-value格式传递所有需要的字段
        arguments: {
          'name': cupcakeName,
          'desc': cupcakeDesc,
          'price': cupcakePrice
        },
      ),
    ),
  );
},

第二步：第二个页面接收参数并自动填充输入框 #

在第二个页面的initState生命周期中获取路由传递的参数，直接给TextEditingController赋值即可实现输入框自动填充：

// 先定义第二个页面的State类
class _CupcakeEditPageState extends State<CupcakeEditPage> {
  // 你原有代码里的输入框控制器
  final cupCake = TextEditingController();
  // 如果还有描述、价格输入框，对应定义控制器即可
  final cupCakeDesc = TextEditingController();
  final cupCakePrice = TextEditingController();
  final _cupcakeKey = GlobalKey<FormState>();
  String cupcakeName = '';

  @override
  void initState() {
    super.initState();
    // 页面渲染完成后读取路由参数
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final Map? args = ModalRoute.of(context)?.settings.arguments as Map?;
      if (args != null) {
        // 给控制器赋值，输入框会自动显示对应内容
        cupCake.text = args['name'] ?? '';
        cupCakeDesc.text = args['desc'] ?? '';
        cupCakePrice.text = args['price'] ?? '';
        // 同步赋值给你的业务变量
        cupcakeName = args['name'] ?? '';
      }
    });
  }

  // 页面销毁时释放控制器，避免内存泄漏
  @override
  void dispose() {
    cupCake.dispose();
    cupCakeDesc.dispose();
    cupCakePrice.dispose();
    super.dispose();
  }

  // 你原有build代码无需修改
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        shrinkWrap: true,
        children: <Widget>[
          DropDown(),
          Form(
            key: _cupcakeKey,
            autovalidateMode: AutovalidateMode.always,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextFormField(
                decoration: const InputDecoration(),
                controller: cupCake,
                validator: (_val) {
                  if (_val!.isEmpty) {
                    return "Can't Be Empty";
                  }
                  return null;
                },
                onChanged: (cupcake) {
                  cupcakeName = cupcake;
                },
              ),
            ),
          ),
          // 其他输入框逻辑同上
        ],
      ),
    );
  }
}

注意事项 #

• 如果使用命名路由管理页面，参数传递逻辑一致，仅需在onGenerateRoute中接收参数即可
• 给TextEditingController的text属性赋值后，绑定的TextFormField会自动填充内容，无需手动调用setState刷新

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