如何在 Flutter 的 TextFormField 上使用按键事件？

Question

有什么方法可以捕捉到文本字段中的按键吗？在我的例子中，当用户在文本字段内按下回车键时，值将被存储。为此，我需要像 Kotlin+Android 中那样使用按键事件。我这周才开始尝试 flutter，因为它很有趣而且是跨平台的。

RawKeyboardListener(
  child: TextFormField(
    keyboardType: TextInputType.text,
    decoration: new InputDecoration(labelText: "Phone"),
    validator: (val) => val.length == 0 ? 'Enter your phone' : null,
    onSaved: (val) => this.phone = val,
  ),
   focusNode: FocusNode(),
   onKey: (RawKeyEvent event) {
     print(event.data.logicalKey.keyId);
     if (event.runtimeType == RawKeyDownEvent ) {
       print("asdadda");

     }
   },
),

但我不知道为什么我按了键却不起作用

Answer 1

有两种方法可以做到 1)。像这样使用 TextField 小部件附带的 onChanged 方法，

TextField(
  onChanged: (text) {
    print("First text field: $text");
  },
);

2).使用 TextEditingController

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void initState() {
    super.initState();

    myController.addListener(_printLatestValue);
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the widget tree.
    // This also removes the _printLatestValue listener.
    myController.dispose();
    super.dispose();
  }

  _printLatestValue() {
    print("Second text field: ${myController.text}");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (text) {
                print("First text field: $text");
              },
            ),
            TextField(
              controller: myController,
            ),
          ],
        ),
      ),
    );
  }
}

示例取自 https://flutter.dev/docs/cookbook/forms/text-field-changes

Answer 2

我确定您要查找的是 TextField 的 onSubmitted。它的作用是，在您的键盘上按下 Enter 时，它会为您提供一个 param/args 的值。有关此的更多信息，您可以查看此：onSubmitted Property TextField

如何做到这一点，它是一个属性的 TextField，您只需简单地执行此操作即可完成任务。

您还可以在此属性中执行任何操作。

TextField(
  onSubmitted: (value){ 
     print(value);
     // or do whatever you want when you are done editing
     // call your method/print values etc
  }
)

另请阅读有关 TextField Class 的更多信息。这将在很多方面帮助你。希望这对您的情况有所帮助。快乐学习:)

Answer 3

只需用 GestureDetector 包装您的 TextFormField，然后添加事件 onTap：

GestureDetector(
    onTap: () {
      setState(() {
        // Add event here
      });
    },
    child: TextFormField(
      keyboardType: TextInputType.text,
      decoration: new InputDecoration(labelText: "Phone"),
      validator: (val) => val.length == 0 ? 'Enter your phone' : null,
      onSaved: (val) => this.phone = val,
    ),
  ),

Answer 4

按照Alok的建议，我研究了onSubmitted方法。我使用 TextfromField，所以我选择 onFieldSubmitted 方法。而且我还添加了 RawKeyBoardListener 用于从移动扫描仪设备按下物理 Enter 键。代码是 -

RawKeyboardListener(//for physical keyboard press
              child: TextFormField(
                keyboardType: TextInputType.text,
                decoration: new InputDecoration(labelText: "Phone"),
                validator: (val) => val.length == 0 ? 'Enter your phone' : null,
                onSaved: (val) => this.phone = val,
                onFieldSubmitted: (_) async {
                  print("asdadda");
                  submitContact();
                },
              ),
               focusNode: FocusNode(),
               onKey: (RawKeyEvent event) { 
                 print(event.data.logicalKey.keyId);
                 if (event.runtimeType == RawKeyDownEvent  &&
                     (event.logicalKey.keyId == 4295426088))//Enter Key ID from keyboard
                 {
                   print("asdadda");
                   submitContact();
                 }
               },
            ),

欢迎编辑^_^

Answer 5

看来您可以使用 KeyEventSimulator。这是一些文档的 link： https://api.flutter.dev/flutter/flutter_test/simulateKeyDownEvent.html

如何在 Flutter 的 TextFormField 上使用按键事件？

How to use Key Press Event on TextFormField in Flutter?

onkeypress

dart

flutter