Flutter 键盘可见性携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

运行此命令：

使用Flutter：

 $ flutter pub add flutter_keyboard_visibility

这将在你的包的 pubspec.yaml 中添加这样的一行（并运行一个隐式flutter pub get）：

dependencies:
  flutter_keyboard_visibility: ^5.3.0

或者，您的编辑器可能支持flutter pub get。

对键盘可见性变化做出反应。

关于 Flutter Web 支持的注意事项

Web 支持在这里是一个悬而未决的问题。目前这个库将只返回false网络上的键盘可见性。

安装

安装包

用法：对键盘可见性更改做出反应

1：在您的`Widget`树中使用构建器

使用 . 根据键盘是否可见构建您的 Widget 树KeyboardVisibilityBuilder。

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

/// In any of your widgets...
@override
Widget build(BuildContext context) {
  return KeyboardVisibilityBuilder(
      builder: (context, isKeyboardVisible) {
        return Text(
          'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
        );
      }
  );

2：在您的`Widget`树中使用

Widget根据键盘是否可见，KeyboardVisibilityProvider在树的顶部附近添加一个来构建树。

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
  return KeyboardVisibilityProvider(
    child: MyDemoPage(),
  );
}

// Within MyDemoPage...
@override
Widget build(BuildContext context) {
  final bool isKeyboardVisible = KeyboardVisibilityProvider.isKeyboardVisible(context);
  return Text(
    'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
  );
}

3.直接查询订阅

直接使用类查询和/或订阅键盘可见性 KeyboardVisibilityController。

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import 'dart:async';

late StreamSubscription<bool> keyboardSubscription;

@override
void initState() {
  super.initState();

  var keyboardVisibilityController = KeyboardVisibilityController();
  // Query
  print('Keyboard visibility direct query: ${keyboardVisibilityController.isVisible}');

  // Subscribe
  keyboardSubscription = keyboardVisibilityController.onChange.listen((bool visible) {
    print('Keyboard visibility update. Is visible: $visible');
  });
}

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

点击关闭键盘

在树顶KeyboardDismissOnTap附近放置一个。Widget当用户在当前焦点之外点击时Widget，Widget将失去焦点并且键盘将被关闭。

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
  return KeyboardDismissOnTap(
    child: MyDemoPage(),
  );
}

默认情况下KeyboardDismissOnTap，只会关闭其他交互Widgets 未捕获的点击，例如按钮。如果您想关闭任何点击的键盘，包括在交互Widgets 上的点击，请设置dismissOnCapturedTaps为 true。

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

// Somewhere near the top of your tree...
@override
Widget build(BuildContext context) {
  return KeyboardDismissOnTap(
    dismissOnCapturedTaps: true,
    child: MyDemoPage(),
  );
}

测试

使用模拟测试

@GenerateMocks([KeyboardVisibilityController])
void main() {
  testWidgets('It reports true when the keyboard is visible', (WidgetTester tester) async {
    // Pretend that the keyboard is visible.
    var mockController = MockKeyboardVisibilityController();
    when(mockController.onChange)
        .thenAnswer((_) => Stream.fromIterable([true]));
    when(mockController.isVisible).thenAnswer((_) => true);

    // Build a Widget tree and query KeyboardVisibilityProvider
    // for the visibility of the keyboard.
    bool? isKeyboardVisible;

    await tester.pumpWidget(
      KeyboardVisibilityProvider(
        controller: mockController,
        child: Builder(
          builder: (BuildContext context) {
            isKeyboardVisible =
                KeyboardVisibilityProvider.isKeyboardVisible(context);
            return SizedBox();
          },
        ),
      ),
    );

    // Verify that KeyboardVisibilityProvider reported that the
    // keyboard is visible.
    expect(isKeyboardVisible, true);
  });
}

Flutter 键盘可见性