Как использовать событие нажатия клавиши на TextFromField во флаттере? - PullRequest
Новая
       28

Как использовать событие нажатия клавиши на TextFromField во флаттере?

0 голосов
/ 07 октября 2019

Есть ли способ поймать нажатие клавиши в текстовом поле? В моем случае, когда пользователь нажмет клавишу ввода внутри текстового поля, значения будут сохранены. Чтобы это произошло, мне нужно использовать Keypress-событие, как в Kotlin + Android. Я только начал пробовать флаттер на этой неделе, потому что он интересный и кроссплатформенный.

Отредактировано 

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");

                 }
               },
            ),

Но я не знаю, почему это не работает, однако я нажимаю клавишу.

Ответы [ 4 ]

1 голос
/ 07 октября 2019

Как и предполагал 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();
                 }
               },
            ),

Не стесняйтесь редактировать ^ _ ^

1 голос
/ 07 октября 2019

Я уверен, что вы ищете TextField's onSubmitted. Для этого при нажатии клавиши Enter на клавиатуре вы получаете значение, которое оно принимает в качестве параметра / аргумента. Для получения дополнительной информации об этом, вы можете проверить это: onSubmitted Свойство 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 также. Это поможет вам во многих отношениях. Надеюсь, что это поможет вам в вашем случае. Счастливого обучения:)

0 голосов
/ 07 октября 2019

Просто оберните ваш TextFormField с помощью GestureDetector, затем добавьте событие 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,
    ),
  ),
0 голосов
/ 07 октября 2019

Есть два способа сделать 1). Используя метод onChanged, который поставляется с виджетом TextField следующим образом: 

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

...