Flutter自定义键盘插件super_keyboard的使用

Flutter自定义键盘插件super_keyboard的使用

super_keyboard 是一个用于报告键盘可见性和大小的插件。该插件支持iOS和Android平台。

支持平台

此插件支持iOS和Android。

统一API

对于不关心iOS和Android如何报告键盘信息的用户来说，最简单的方法是通过统一API（最低公分母）来使用super_keyboard。

构建基于键盘状态的小部件子树

[@override](/user/override)
Widget build(BuildContext context) {
  return SuperKeyboardBuilder(
    builder: (context, keyboardState) {
      // 根据键盘状态执行操作
      return const SizedBox();
    }
  );
}

直接监听键盘状态的变化

void startListeningToKeyboardState() {
  SuperKeyboard.instance.state.addListener(_onKeyboardStateChange);
}

void stopListeningToKeyboardState() {
  SuperKeyboard.instance.state.removeListener(_onKeyboardStateChange);
}

void _onKeyboardStateChange(KeyboardState newState) {
  // 根据新的键盘状态执行操作
}

激活日志

SuperKeyboard.initLogs();

iOS 和 Android

还提供了特定于平台的API。统一的SuperKeyboard API在底层委托给特定平台的API。

• iOS可以在SuperKeyboardIOS中使用。
• Android可以在SuperKeyboardAndroid中使用。

特定平台的API之所以可用，是因为每个平台以不同的方式报告键盘状态和高度。这些报告方法可能不完全兼容。此外，一个平台可能会报告比另一个平台更多的键盘信息。我们希望为用户提供尽可能多的信息，而不仅仅是最低公分母API所能提供的信息。

完整示例代码

以下是一个完整的示例代码，展示了如何使用super_keyboard插件：

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:super_keyboard/super_keyboard.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();

    initSuperKeyboard();
  }

  Future<void> initSuperKeyboard() async {
    SuperKeyboard.initLogs();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: defaultTargetPlatform != TargetPlatform.android,
        body: Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 250),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ValueListenableBuilder(
                  valueListenable: SuperKeyboard.instance.state,
                  builder: (context, value, child) {
                    final icon = switch (value) {
                      KeyboardState.closed => Icons.border_bottom,
                      KeyboardState.opening => Icons.upload_sharp,
                      KeyboardState.open => Icons.border_top,
                      KeyboardState.closing => Icons.download_sharp,
                    };

                    return Icon(
                      icon,
                      size: 24,
                    );
                  },
                ),
                const SizedBox(height: 12),
                SuperKeyboardBuilder(builder: (context, keyboardState) {
                  return Text("Keyboard state: $_keyboardState");
                }),
                const SizedBox(height: 12),
                ValueListenableBuilder(
                  valueListenable: SuperKeyboard.instance.keyboardHeight,
                  builder: (context, value, child) {
                    return Text("Keyboard height: ${value != null ? "${value.toInt()}" : "???"}");
                  },
                ),
                const SizedBox(height: 48),
                TextField(
                  decoration: const InputDecoration(
                    hintText: "Type some text",
                  ),
                  onTapOutside: (_) {
                    FocusManager.instance.primaryFocus?.unfocus();
                  },
                ),
                ValueListenableBuilder(
                  valueListenable: SuperKeyboard.instance.keyboardHeight,
                  builder: (context, value, child) {
                    if (value == null) {
                      return const SizedBox();
                    }

                    return SizedBox(height: value / MediaQuery.of(context).devicePixelRatio);
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  String get _keyboardState {
    return switch (SuperKeyboard.instance.state.value) {
      KeyboardState.closed => "Closed",
      KeyboardState.opening => "Opening",
      KeyboardState.open => "Open",
      KeyboardState.closing => "Closing",
    };
  }
}