Flutter键盘同步监听插件synchronized_keyboard_listener的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter键盘同步监听插件synchronized_keyboard_listener的使用

SynchronizedKeyboardListener 是一个键盘监听器，它具有阻止键盘事件冒泡的能力。这意味着如果你有多个 SynchronizedKeyboardListener，只有最接近用户输入的那个监听器能够处理特定的键盘事件。

其工作原理是在创建时查找父级的 SynchronizedKeyboardListener 并形成一个链表结构。这样可以使得它们能够同步行为。

使用方法

该组件非常直观易用。

SynchronizedKeyboardListener(
  keyEvents: <LogicalKeyboardKey, Function()> {
    LogicalKeyboardKey.escape : () { Navigator.of(context).pop(); }, // 当按下 ESC 键时，返回上一页
    LogicalKeyboardKey.enter : () { Navigator.of(context).pop(); }, // 当按下 Enter 键时，返回上一页
  },
  child: Container(
    child: Text("Press ESC or ENTER to pop"),
  ),
)

keyEvents 参数用于指定要监听的按键以及当这些按键被触发时应执行的操作。

完整示例

下面是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 SynchronizedKeyboardListener。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Synchronized Keyboard Listener Example')),
        body: SynchronizedKeyboardListenerExample(),
      ),
    );
  }
}

class SynchronizedKeyboardListenerExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: SynchronizedKeyboardListener(
        keyEvents: <LogicalKeyboardKey, Function()> {
          LogicalKeyboardKey.escape : () { 
            print("ESC pressed"); 
            // 可以添加其他逻辑
          },
          LogicalKeyboardKey.enter : () { 
            print("Enter pressed"); 
            // 可以添加其他逻辑
          },
        },
        child: Container(
          padding: EdgeInsets.all(20),
          color: Colors.blue,
          child: Text(
            "Press ESC or ENTER",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用synchronized_keyboard_listener插件来同步监听键盘事件的代码示例。这个插件允许你在Flutter应用中监听键盘的显示和隐藏事件，并且在多个Widget之间同步这些事件。

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

dependencies:
  flutter:
    sdk: flutter
  synchronized_keyboard_listener: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中如下使用SynchronizedKeyboardListener：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Synchronized Keyboard Listener Demo'),
        ),
        body: SynchronizedKeyboardListener(
          onKeyboardVisibilityChanged: (bool isVisible) {
            print('Keyboard visibility changed: $isVisible');
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                decoration: InputDecoration(labelText: 'First TextField'),
              ),
              SizedBox(height: 20),
              TextField(
                decoration: InputDecoration(labelText: 'Second TextField'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // You can also manually trigger a keyboard visibility change
                  // for testing purposes, though this is not typically necessary.
                  // SynchronizedKeyboardListener.of(context)!.notifyKeyboardVisibilityChanged(!SynchronizedKeyboardListener.of(context)!.isVisible);
                },
                child: Text('Toggle Keyboard Visibility (for testing)'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们做了以下几件事：

  1. 添加依赖：在pubspec.yaml文件中添加了synchronized_keyboard_listener依赖。
  2. 使用SynchronizedKeyboardListener：在Scaffold的body中包裹了一个SynchronizedKeyboardListener。
  3. 监听键盘可见性变化：通过onKeyboardVisibilityChanged回调来监听键盘的显示和隐藏事件，并在控制台中打印出当前键盘的可见性状态。
  4. 添加TextField和Button：为了演示效果，我们添加了两个TextField和一个ElevatedButton。虽然按钮的onPressed回调中有一段注释代码用于手动触发键盘可见性变化（主要用于测试），但在实际使用中通常不需要这样做。

这样，当用户在任何一个TextField中打开或关闭键盘时，SynchronizedKeyboardListener都会捕捉到这一变化，并通过回调函数通知你。

请注意，这个插件依赖于平台通道来获取键盘的可见性信息，因此在iOS和Android上都应该能够正常工作。如果遇到任何问题，建议查阅插件的官方文档或在其GitHub仓库中查找相关信息。

回到顶部