[Flutter combat] Haga clic globalmente en el espacio en blanco para ocultar el teclado

Guía de Lao Meng: ¿Por qué quiere ocultar el teclado haciendo clic en el espacio en blanco ? Debido a que este es el comportamiento predeterminado de la plataforma iOS, la plataforma Android tiene un botón para cerrar el teclado por defecto en la esquina superior derecha del teclado emergente, por lo que hacer clic en el espacio en blanco no ocultará el teclado.

Para una sola página, al agregar focusNode al TextField, TextField pierde el foco al hacer clic en el espacio en blanco, la implementación es la siguiente:

class DismissKeyboardDemo extends StatelessWidget {
  final FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: GestureDetector(
        onTap: () {
          focusNode.unfocus();
        },
        child: Container(
          color: Colors.transparent,
          alignment: Alignment.center,
          child: TextField(
            focusNode: focusNode,
          ),
        ),
      ),
    );
  }
}

Cuando hay varios TextFields en varias páginas de la aplicación, este método aumentará una gran cantidad de código repetitivo, así que agregue globalmente un oyente que haga clic en el espacio en blanco:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      builder: (context, child) => Scaffold(
        body: GestureDetector(
          onTap: () {
            FocusScopeNode currentFocus = FocusScope.of(context);
            if (!currentFocus.hasPrimaryFocus &&
                currentFocus.focusedChild != null) {
              FocusManager.instance.primaryFocus.unfocus();
            }
          },
          child: child,
        ),
      ),
      home: DismissKeyboardDemo(),
    );
  }
}

También puede ocultar el teclado de la siguiente manera:

SystemChannels.textInput.invokeMethod('TextInput.hide');

Modifique la página DismissKeyboardDemo :

class DismissKeyboardDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: TextField(),
      ),
    );
  }
}

El efecto es el mismo que el anterior y el teclado también se puede ocultar haciendo clic en el espacio en blanco.

comunicarse con

Dirección del blog de Laomeng Flutter (uso de control 330): http://laomengit.com

Bienvenido a unirse al grupo de intercambio Flutter (WeChat: laomengit) y seguir la cuenta pública [Lao Meng Flutter]:

Supongo que te gusta

Origin blog.csdn.net/mengks1987/article/details/108374575
Recomendado
Clasificación