Flutter开发中TextField组件的onSubmitted参数作用及使用场景是什么？

核心作用 #

onSubmitted 是 TextField 提供的回调方法，当用户点击软键盘右下角的提交类按钮时触发，回调会带回当前 TextField 内的输入内容作为参数。

配置后无效果的原因 #

你当前未观察到效果是因为缺少两个必要的关联配置：

• 没有指定 textInputAction 参数：该参数控制软键盘右下角的按钮类型，默认值多为换行，只有配置为 TextInputAction.done、TextInputAction.search、TextInputAction.send 这类提交类动作时，点击按钮才会触发 onSubmitted 回调
• 没有给 onSubmitted 配置具体执行逻辑：回调触发后没有定义跳转、请求、提示等可见行为，自然观察不到效果

可运行的参考代码 #

TextField(
  style: TextStyle(
    color: Colors.lightBlueAccent,
  ),
  // 配置软键盘右下角为「完成」按钮
  textInputAction: TextInputAction.done,
  // 配置onSubmitted回调逻辑
  onSubmitted: (inputValue) {
    // 此处可替换为你需要的业务逻辑，比如密码校验、提交登录请求等
    print("用户输入的密码内容为：$inputValue");
  },
  decoration: InputDecoration(
    labelText: "Password",
    labelStyle: TextStyle(
      color: Colors.grey,
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.grey.shade300,
        width: 2,
      ),
      borderRadius: BorderRadius.circular(30),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue,
        width: 2,
      ),
      borderRadius: BorderRadius.circular(30),
    ),
    prefixIcon: Icon(
      Icons.lock_outline,
    ),
  ),
)

适用场景 #

• 搜索页搜索框：用户输入完关键词后直接点击软键盘的搜索按钮触发搜索，无需额外点击页面的搜索按钮
• 表单页快速提交：比如登录页用户名输入完成后点击「下一步」自动跳转到密码输入框，密码输入完成后点击「完成」直接触发登录请求
• 聊天输入框：用户输入完消息内容后点击软键盘的「发送」按钮直接提交消息，无需点击页面的发送按钮

内容的提问来源于stack exchange，提问作者Mou Rani Biswas