如何在 Flutter for web TextField 上触发 onSubmitted

Posted 2023-02-23

【中文标题】如何在 Flutter for web TextField 上触发 onSubmitted

【英文标题】：How to trigger onSubmitted on a Flutter for web TextField

【发布时间】：2020-02-07 18:05:28

【问题描述】：

我有一个用于 web 的小型颤振应用程序，并且正在显示一个 TextField。

现在，每当用户离开 TextField（失去焦点）或按下 Enter 键时，我都需要一个类似 onSubmitted 的回调。现在我根本无法进行任何回调。

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
  ),
  controller: TextEditingController(text: event.name),
  onEditingComplete: ()  print("editing complete"); ,
  onSubmitted: (String value)  print("submitted\n"); ,
  maxLines: 1,
),

【问题讨论】：

也许可以尝试改变

我试过这段代码，它可以工作，问题可能出在应用程序的另一部分。你能把一些额外的代码放在你使用这个 TextField 的地方吗？

@0x58 onchanged 在每次击键时触发，“Enter”或焦点丢失除外。但我想知道用户何时完成编辑，以便保存新值。

@PabloBarrera 您是在网络上还是在 android / ios 上运行示例？

我在 Android 上尝试过，但使用的是物理设备。根据这个可能在模拟器中不起作用：github.com/flutter/flutter/issues/19027。但我发布了一个带有网络解决方法的答案。

【参考方案1】：

这在 Flutter Web 上适用于我

            TextField(
              controller: _passwordController,
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              obscureText: true,
              onSubmitted: (value) 
                _loginPresenter.login(
                    _usernameController.text, _passwordController.text);
              ,
            ),

注意onSubmitted 的定义。当用户在flutter web上按下回车键时，会调用loginPresenter.login方法。

【讨论】：

现在将其标记为新的解决方案，因为上面提到的颤振中的错误已经修复了一段时间，我们不再需要解决方法。

这适用于我的桌面应用程序，但是当我在移动设备上使用网络应用程序时，我无法触发 onSubmitted。有什么建议吗？

【参考方案2】：

这似乎是一个问题： [web]: TextField onSubmitted is not triggered when pressing enter

这是链接中提到的解决方法：

    body: RawKeyboardListener(
      focusNode: focusNode,
      onKey: (event) 
        if (event is RawKeyUpEvent && event.data is RawKeyEventDataAndroid) 
          var data = event.data as RawKeyEventDataAndroid;
          if (data.keyCode == 13) 
            debugPrint('onSubmitted');
          
        
      ,
      child: TextField(),
    ),

【讨论】：

感谢您挖掘这个！我刚刚也发现了这个错误。但我无法整合解决方法。我现在设法获得了事件处理程序，但是我现在如何访问孩子的文本值？另请参阅我对错误报告的评论。

你应该有一个控制器附加到TextField，然后你可以使用controller.text访问文本

正如您在我发布的示例中看到的那样，我确实连接了一个控制器，但我可能只是缺少如何构建颤振程序。如何从事件处理程序访问控制器？

您应该将控制器放入一个变量中，然后使用该变量将控制器附加到 TextField 并从某处获取文本值。您可以在 initState()

上初始化控制器

好的，谢谢，我想通了。尽管它添加了相当多的样板代码。希望它很快得到修复:-(

【参考方案3】：

同时删除 maxLines: 1 似乎可以让 onsubmitted 工作。[在移动设备上遇到同样的问题]

【参考方案4】：

您可以尝试创建一个方法，在其中对 TextEditingController 设置条件，并在此基础上在 TextField 上提交。

首先

   final entredTitle = titleController.text;
   final entredAmount = double.parse(amountController.text);
   if (entredTitle.isEmpty || entredAmount <= 0 )
     return ;
   
   widget.addTx(entredTitle,entredAmount);
   Navigator.of(context).pop();
  

第二

 TextField(
                      decoration:  InputDecoration(labelText: 'Amount'),
                      controller: amountController,
                      onSubmitted: (_) => submitData(),
                    ),