Flutter键盘可见性

运行此命令：

使用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 支持[在这里](https://github.com/MisterJimson/flutter_keyboard_visibility/issues/10)是一个悬而未决的问题。目前这个库将只返回`false`网络上的键盘可见性。

## 安装

[安装包](https://pub.dev/packages/flutter_keyboard_visibility/install)

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

### 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`，只会关闭其他交互`Widget`s 未捕获的点击，例如按钮。如果您想关闭任何点击的键盘，包括在交互`Widget`s 上的点击，请设置`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);
  });
}
```

\