Flutter键盘监听插件flutter_keyboard_listener的使用

Flutter键盘监听插件flutter_keyboard_listener的使用

一个应用的键盘监听（不仅可以监听键盘的显示隐藏，还可以监听键盘的高度变化）。

创建项目

# 创建一个新的Flutter应用
flutter create tsbaseuidemo

# 创建一个新的Flutter包
flutter create --template=package flutter_baseui_kit
flutter create --template=package tsdemo_baseui

使用方法

首先，我们需要在代码中添加对键盘监听器的注册与注销。通过WidgetsBinding.instance来管理观察者。我们将原来的观察者注册方式修改为：

// 注册键盘观察者
WidgetsBinding.instance.addObserver(KeyBoardObserver.instance);

// 移除键盘观察者
// WidgetsBinding.instance.removeObserver(KeyBoardObserver.instance);

然后，我们可以通过KeyBoardObserver.instance添加监听器，该监听器接收两个参数：是否显示键盘(isKeyboardShow) 和键盘的高度 (keyboardHeight)。

示例代码如下：

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

class _MyHomePageState extends State<MyHomePage> {
  bool currentKeyboardVisible = false;
  double _keyboardHeight = 0;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 添加键盘监听器
    KeyBoardObserver.instance.addListener((isKeyboardShow, keyboardHeight) {
      // debugPrint('Keyboard update:$isKeyboardShow, height:$keyboardHeight');
      setState(() {
        currentKeyboardVisible = isKeyboardShow;
        _keyboardHeight = keyboardHeight;
      });
      _onKeyboardListener();
    });
  }

  [@override](/user/override)
  void dispose() {
    // 移除键盘监听器
    KeyBoardObserver.instance.removeListener();
    super.dispose();
  }

  void _onKeyboardListener() {
    // 在这里处理键盘显示/隐藏后的逻辑
    debugPrint('Keyboard is $currentKeyboardVisible and height is $_keyboardHeight');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 键盘监听示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '键盘可见: $currentKeyboardVisible',
              style: TextStyle(fontSize: 18),
            ),
            Text(
              '键盘高度: $_keyboardHeight',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter键盘监听插件flutter_keyboard_listener的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter键盘监听插件flutter_keyboard_listener的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_keyboard_listener 是一个 Flutter 插件，用于监听键盘事件，特别是全局键盘事件。它允许你在 Flutter 应用程序中监听键盘按键，无论当前焦点在哪个控件上。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_keyboard_listener 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_keyboard_listener: ^1.0.0

然后运行 flutter pub get 来安装插件。

使用 flutter_keyboard_listener

以下是一个简单的示例，展示了如何使用 flutter_keyboard_listener 插件来监听键盘事件。

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

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

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

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

class _KeyboardListenerExampleState extends State<KeyboardListenerExample> {
  String _keyPressed = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Keyboard Listener Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Pressed Key: $_keyPressed'),
            KeyboardListener(
              onKeyEvent: (KeyEvent event) {
                setState(() {
                  _keyPressed = event.logicalKey.keyLabel;
                });
              },
              child: Container(
                width: 200,
                height: 100,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text(
                  'Press any key',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部