Flutter键盘高度监听插件wait_keyboard_height的使用

Flutter键盘高度监听插件wait_keyboard_height的使用

wait_keyboard_height 是一个为iOS和Android平台提供的Flutter插件，它在键盘动画开始之前提供键盘的高度信息。这有助于消除布局控件时的延迟，例如将TextField放置在键盘上方。

wait_keyboard_height 是flutter sdk的一个降级版本插件，并依赖于 keyboard_height_plugin 包：

dependencies:
  wait_keyboard_height: ^0.0.1

安装

要安装 wait_keyboard_height，只需将其添加到您的 pubspec.yaml 文件的 dependencies 部分：

dependencies:
  wait_keyboard_height: ^0.0.1

然后运行 flutter pub get 来获取该包。

使用

首先，在Dart文件中导入 wait_keyboard_height 插件：

import 'package:wait_keyboard_height/wait_keyboard_height.dart';

接下来，创建一个有状态的Widget，并声明一个变量来存储键盘高度，同时创建 KeyboardHeightPlugin 的实例：

class _HomePageState extends State<HomePage> {
  double _keyboardHeight = 0;
  final WaitKeyboardHeight _waitKeyboardHeight = WaitKeyboardHeight();

  [@override](/user/override)
  void initState() {
    super.initState();
    _waitKeyboardHeight.onKeyboardHeightChanged((double height) {
      setState(() {
        _keyboardHeight = height;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text('键盘高度'),
      ),
      body: Center(
        child: Stack(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  '键盘高度: $_keyboardHeight',
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  child: Text('获取键盘高度'),
                  onPressed: () {},
                ),
              ],
            ),
            Positioned(
              bottom: _keyboardHeight,
              left: 0,
              right: 0,
              child: TextField(
                decoration: InputDecoration(
                  filled: true,
                  fillColor: Colors.orange,
                  hintText: '在此输入以打开键盘',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

示例

以下是完整的示例代码，展示了如何使用 wait_keyboard_height：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _keyboardHeight = 0;
  final WaitKeyboardHeight _waitKeyboardHeight = WaitKeyboardHeight();

  [@override](/user/override)
  void initState() {
    super.initState();
    _waitKeyboardHeight.onKeyboardHeightChanged((double height) {
      setState(() {
        _keyboardHeight = height;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text('键盘高度'),
      ),
      body: Center(
        child: Stack(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  '键盘高度: $_keyboardHeight',
                ),
                SizedBox(height: 16),
                ElevatedButton(
                  child: Text('获取键盘高度'),
                  onPressed: () {},
                ),
              ],
            ),
            Positioned(
              bottom: _keyboardHeight,
              left: 0,
              right: 0,
              child: TextField(
                decoration: InputDecoration(
                  filled: true,
                  fillColor: Colors.orange,
                  hintText: '在此输入以打开键盘',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}