当键盘出现时如何拦截Flutter返回按钮

Question

我希望在Flutter中拦截软键盘的返回按钮。因此，当我想通过按返回按钮关闭键盘时，我希望调用一个附加函数。我该怎么做？ 软键盘返回按钮

- thgehr

---

尝试使用 WillPopScope小部件 - haroldolivieri

@haroldolivieri WillPopScope 无法检测到键盘的返回按钮。我已经尝试过了，它不起作用。我在下面添加了一个答案，你可以查看一下。 - Karim Elghamry

据我所知，Android操作系统在监听器中没有暴露键盘向下按钮。@KarimElghamry的答案是你能得到的最接近的答案。 - haroldolivieri

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(),
        ),
      ),
    );
  }
}

- Karim Elghamry

---

不要忘记保存监听器的 id 并在 dispose() 方法中将其移除，就像这样：KeyboardVisibilityNotification().removeListener(id); - AQRC

此软件包存在空安全和 Android V2 的问题。 - hasanm08

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(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

- hasanm08