Flutter键盘检测插件keyboard_detection的使用

Keyboard Detection

此插件为您提供了一种简单的方法来检测键盘是否可见。它通过底部视图内边距（inset）的调整来检查键盘的可见性，因此它是Flutter原生支持的功能。

简单用法

您只需像下面这样将Scaffold包裹在KeyboardDetection中，并监听onChanged值。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: KeyboardDetection(
      controller: KeyboardDetectionController(
        onChanged: (value) {
          print('Keyboard visibility onChanged: $value');
          setState(() {
            keyboardState = value;
            stateAsBool = keyboardDetectionController.stateAsBool();
            stateAsBoolWithParamTrue =
                keyboardDetectionController.stateAsBool(true);
          });
        },
      ),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Keyboard Detection'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('State: $keyboardState'),
              Text(
                  'State as bool (includeTransitionalState = false): $stateAsBool'),
              Text(
                  'State as bool (includeTransitionalState = true): $stateAsBoolWithParamTrue'),
              const TextField(),
            ],
          ),
        ),
      ),
    ),
  );
}

onChanged将以枚举KeyboardState的形式返回（unknown:未知, visibling:显示中, visible:已显示, hiding:隐藏中, hidden:已隐藏）。

使用控制器

您可以像下面这样在build方法外部声明controller：

late KeyboardDetectionController keyboardDetectionController;

@override
void initState() {
  keyboardDetectionController = KeyboardDetectionController(
    onChanged: (value) {
      print('Keyboard visibility onChanged: $value');
      setState(() {
        keyboardState = value;
        stateAsBool = keyboardDetectionController.stateAsBool();
        stateAsBoolWithParamTrue =
            keyboardDetectionController.stateAsBool(true);
      });
    },
  );

  // Listen to the stream
  _sub = keyboardDetectionController.stream.listen((state) {
    print('Listen to onChanged with Stream: $state');
  });

  // One time callback
  keyboardDetectionController.addCallback((state) {
    print('Listen to onChanged with one time Callback: $state');

    // End this callback by returning false
    return false;
  });

  // Looped callback
  keyboardDetectionController.addCallback((state) {
    print('Listen to onChanged with looped Callback: $state');

    // This callback will be looped
    return true;
  });

  // Looped with future callback
  keyboardDetectionController.addCallback((state) async {
    await Future.delayed(const Duration(milliseconds: 100));
    print('Listen to onChanged with looped future Callback: $state');

    // This callback will be looped
    return true;
  });

  super.initState();
}

并在build方法内部添加到controller:

@Override
Widget build(BuildContext context) {
  return KeyboardDetection(
    controller: keyboardDetectionController,
    child: Scaffold(
      appBar: AppBar(
        title: const Text('Keyboard Detection'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('State: $keyboardState'),
              Text('State as bool (includeTransitionalState = false): $stateAsBool'),
              Text('State as bool (includeTransitionalState = true): $stateAsBoolWithParamTrue'),
              FutureBuilder(
                future: keyboardDetectionController.ensureSizeLoaded,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text(
                        'Keyboard size is loaded with size: ${keyboardDetectionController.size}');
                  }

                  return const Text('Keyboard size is still loading');
                },
              ),
              const TextField(),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => const MyApp(),
                    ),
                  );
                },
                child: const Text('Navigate to another page'),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.pushAndRemoveUntil(
                      context,
                      MaterialPageRoute(
                        builder: (_) => const MyApp(),
                      ),
                      (_) => false);
                },
                child: const Text('Move to another page'),
              )
            ],
          ),
        ),
      ),
    ),
  );
}

您可以使用以下方式获取当前键盘可见性的状态：

• keyboardDetectionController.state: 返回当前键盘可见性的状态，以枚举KeyboardState的形式（unknown:未知, visibling:显示中, visible:已显示, hiding:隐藏中, hidden:已隐藏）。
• keyboardDetectionController.stateAsBool([bool includeTransitionalState = false]): 返回当前键盘可见性的状态，以bool?的形式（null:未知, true:可见, false:隐藏）。如果includeTransitionalState为true，那么即使状态是visibling时也会返回true，当状态是hiding时会返回false。
• keyboardDetectionController.addCallback(callback)：添加一个回调，在键盘状态改变时调用。如果回调返回true，则每次键盘改变时都会调用；如果返回false，则会被忽略。这个callback也支持Future方法。
• keyboardDetectionController.stream：监听键盘可见性变化事件，以KeyboardState的形式。
• keyboardDetectionController.size：获取键盘大小。请注意，这个值可能在键盘状态为可见时仍返回0，因为键盘需要时间完全显示。因此，您应该调用keyboardDetectionController.isSizeLoaded来检查键盘大小是否已经加载。从版本0.5.0开始，您可以通过await keyboardDetectionController.ensureSizeLoaded等待这个值。

局限性

• 此包使用底部内边距来检测键盘可见性，因此不适用于浮动键盘（Issue #1）

完整示例代码

// ignore_for_file: avoid_print

import 'dart:async';

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

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  KeyboardState keyboardState = KeyboardState.unknown;
  bool? stateAsBool;
  bool? stateAsBoolWithParamTrue;

  StreamSubscription<KeyboardState>? _sub;

  late KeyboardDetectionController keyboardDetectionController;

  @override
  void initState() {
    keyboardDetectionController = KeyboardDetectionController(
      onChanged: (value) {
        print('Keyboard visibility onChanged: $value');
        setState(() {
          keyboardState = value;
          stateAsBool = keyboardDetectionController.stateAsBool();
          stateAsBoolWithParamTrue =
              keyboardDetectionController.stateAsBool(true);
        });
      },
    );

    _sub = keyboardDetectionController.stream.listen((state) {
      print('Listen to onChanged with Stream: $state');
    });

    // One time callback
    keyboardDetectionController.addCallback((state) {
      print('Listen to onChanged with one time Callback: $state');

      // End this callback by returning false
      return false;
    });

    // Looped callback
    keyboardDetectionController.addCallback((state) {
      print('Listen to onChanged with looped Callback: $state');

      // This callback will be looped
      return true;
    });

    // Looped with future callback
    keyboardDetectionController.addCallback((state) async {
      await Future.delayed(const Duration(milliseconds: 100));
      print('Listen to onChanged with looped future Callback: $state');

      // This callback will be looped
      return true;
    });

    super.initState();
  }

  @override
  void dispose() {
    _sub?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return KeyboardDetection(
      controller: keyboardDetectionController,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Keyboard Detection'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('State: $keyboardState'),
                Text(
                    'State as bool (includeTransitionalState = false): $stateAsBool'),
                Text(
                    'State as bool (includeTransitionalState = true): $stateAsBoolWithParamTrue'),
                FutureBuilder(
                  future: keyboardDetectionController.ensureSizeLoaded,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(
                          'Keyboard size is loaded with size: ${keyboardDetectionController.size}');
                    }

                    return const Text('Keyboard size is still loading');
                  },
                ),
                const TextField(),
                ElevatedButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => const MyApp(),
                      ),
                    );
                  },
                  child: const Text('Navigate to another page'),
                ),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pushAndRemoveUntil(
                        context,
                        MaterialPageRoute(
                          builder: (_) => const MyApp(),
                        ),
                        (_) => false);
                  },
                  child: const Text('Move to another page'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}