Flutter键盘适配插件input_keyboard_adaptor的使用

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  input_keyboard_adaptor: ^latest

然后运行以下命令以安装依赖：

flutter pub get

导入

在 Dart 文件中导入插件：

import 'package:input_keyboard_adaptor/input_keyboard_adaptor.dart';

使用方法

使用 InputKeyboardAdaptor 小部件包裹你的输入框。通过设置 keyboardDistanceFromTextField 或 keyboardDistanceFromContent 属性，可以调整键盘与输入框或内容之间的距离。

示例代码

class MyApp extends StatelessWidget {
  // 这是应用程序的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      // 如果 resizeToAvoidBottomInset 设置为 false，该组件将无效
      // resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: const Text("InputKeyboardAdaptorTest"),
      ),
      body: InputKeyboardAdaptor(
        // keyboardDistanceFromTextField: 0, // 键盘顶部与当前焦点输入框底部的距离
        keyboardDistanceFromContent: 10, // 键盘顶部与 InputKeyboardAdaptor 组件底部的距离（二选一设置）
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(height: 240,), // 空白区域
              const Text("This is a test", style: TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.bold),),
              const SizedBox(height: 40,), // 空白区域
              TextField(
                onTapOutside: (event) => FocusScope.of(context).unfocus(), // 点击外部时隐藏键盘
                decoration: InputDecoration(
                  hintText: "Enter your name",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
              const SizedBox(height: 40,), // 空白区域
              TextField(
                onTapOutside: (event) => FocusScope.of(context).unfocus(), // 点击外部时隐藏键盘
                decoration: InputDecoration(
                  hintText: "Enter your mobile",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                  ),
                ),
              ),
              const SizedBox(height: 40,), // 空白区域
              Container(
                height: 56,
                width: double.infinity,
                margin: const EdgeInsets.symmetric(horizontal: 80),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(56 / 2),
                  color: const Color(0xff00c487),
                ),
                child: TextButton(
                  onPressed: () => debugPrint('Button pressed'), // 按钮点击事件
                  child: const Text("Submit", style: TextStyle(fontSize: 16, color: Colors.white, fontWeight: FontWeight.w500)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}