如何在Flutter Flow中向API请求JSON传递动态手机号参数？

1. 绑定输入框到页面状态变量 #

• 先在登录/注册页面的状态管理里创建一个字符串类型的变量，比如phoneNumber。
• 选中手机号输入框，在右侧属性面板的Text Controller里，选择「绑定到页面状态变量」，关联刚才创建的phoneNumber。这样输入框的内容会实时同步到这个变量里。

2. 配置API调用的请求参数 #

• 打开你的API配置页面（Flutter Flow的API面板里），找到请求体设置部分。
• 如果API用JSON格式接收参数，直接在JSON请求体里用{{变量名}}的格式引用，示例：

  {
    "phone": "{{phoneNumber}}"
  }
  

• 注意：变量名要和页面状态里的完全一致，大小写也不能错。
• 如果是GET请求，参数在URL里，直接在查询参数位置替换成{{phoneNumber}}，比如https://your-api.com/send-otp?phone={{phoneNumber}}。

3. 触发动作时的变量检查 #

• 在登录/注册页面给按钮添加「调用API」的点击动作，确认动作配置里开启了「传递页面状态变量」的选项（部分版本会自动关联，但建议手动核对）。

4. 排查失败的常见原因 #

• 检查变量绑定：输入手机号后，打开Preview的Debug面板，查看页面状态里的phoneNumber是否同步了输入内容。
• 核对API参数名：确保JSON里的键名和API要求的完全匹配（比如API要求mobile就别写phone）。
• 确认变量类型：必须用字符串类型，别用数字类型（手机号带区号或长位数时会出问题）。

5. 测试验证 #

• 在Preview模式下输入手机号，触发API调用，查看Network面板的请求详情，确认参数是否正确携带。

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