显示键盘时如何拦截颤动的后退按钮

Question

我想在flutter中拦截软键盘的返回键。因此，当我想通过按下后退按钮关闭键盘时，我想调用一个附加功能。我该怎么做？

键盘后退按钮

Answer 1

您可以使用 keyboard_visibility 包来实现。

工作示例

键盘关闭后，以下代码显示 SnackBar。

import 'package:flutter/material.dart';
import 'package:keyboard_visibility/keyboard_visibility.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  GlobalKey<ScaffoldState> _key;

  @override
  void initState() {
    super.initState();
    _key = GlobalKey<ScaffoldState>();
    KeyboardVisibilityNotification().addNewListener(
      onHide: () {
        _key.currentState.showSnackBar(
          SnackBar(
            content: Text("Keyboard closed"),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: _key,
        body: Center(
          child: TextField(),
        ),
      ),
    );
  }
}

Answer 2

您可以使用 https://pub.dev/packages/flutter_keyboard_visibility 包来实现。

import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'package:flutter_keyboard_visibility_example/keyboard_dismiss_demo.dart';
import 'package:flutter_keyboard_visibility_example/provider_demo.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardDismissOnTap(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Keyboard Visibility Example'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(24.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => ProviderDemo()),
                    );
                  },
                  child: Text('Provider Demo'),
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => KeyboardDismissDemo()),
                    );
                  },
                  child: Text('KeyboardDismiss Demo'),
                ),
                Spacer(),
                TextField(
                  keyboardType: TextInputType.text,
                  decoration: InputDecoration(
                    labelText: 'Input box for keyboard test',
                  ),
                ),
                Container(height: 60.0),
                KeyboardVisibilityBuilder(builder: (context, visible) {
                  return Text(
                    'The keyboard is: ${visible ? 'VISIBLE' : 'NOT VISIBLE'}',
                  );
                }),
                Spacer(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

显示键盘时如何拦截颤动的后退按钮

How to intercept flutter back-button when keyboard is shown

keyboard

back-button

flutter