发布于 由admin

Native 键盘事件拦截：通过 `KeyEmbedderResponder` 修改硬件键盘输入流

Native 键盘事件拦截：通过 KeyEmbedderResponder 修改硬件键盘输入流

大家好，今天我们来深入探讨一个在Flutter框架下，关于底层键盘事件处理的高级话题：如何通过 KeyEmbedderResponder 修改硬件键盘输入流。这个功能对于需要深度定制键盘行为，或者需要实现特殊输入法功能的Flutter应用来说，至关重要。

1. 背景与挑战

在标准的Flutter应用中，键盘输入通常是通过框架提供的TextInput小部件和TextInputClient机制来处理的。这种方式对于大多数常见的文本输入场景已经足够。然而，有些情况下，我们需要更底层的控制，例如：

  • 自定义快捷键绑定： 需要拦截特定的键盘组合键，并执行应用自定义的逻辑，而不是依赖操作系统默认的行为。
  • 模拟键盘输入： 在某些测试或自动化场景下，需要程序模拟键盘输入。
  • 实现自定义输入法： 需要完全控制键盘输入的转换过程，例如，实现拼音输入法、手写输入法等。
  • 游戏开发： 需要直接监听键盘按键，用于游戏角色的控制等。

直接操作底层的键盘事件流，相比于依赖框架提供的TextInput系统，能够提供更大的灵活性和性能优势。但是，这也意味着我们需要处理更多底层的平台差异性和复杂性。

2. KeyEmbedderResponder 的角色

KeyEmbedderResponder 是Flutter Engine中一个重要的类，它负责处理来自操作系统的原始键盘事件，并将这些事件传递给Flutter框架。更具体地说，它实现了操作系统提供的键盘事件监听接口，例如，在iOS上，它会响应 UIKeyCommand 和 UITextInput 的相关方法；在Android上，它会处理 KeyEvent。

通过自定义 KeyEmbedderResponder，我们可以拦截、修改甚至阻止某些键盘事件传递给Flutter框架。这为我们提供了直接控制键盘输入流的能力。

3. 如何自定义 KeyEmbedderResponder

要自定义 KeyEmbedderResponder，我们需要：

  1. 创建自定义的 KeyEmbedderResponder 子类。
  2. 重写关键的键盘事件处理方法。
  3. 在Flutter Engine启动时，将自定义的 KeyEmbedderResponder 实例注册到Engine中。

接下来，我们将分别针对 iOS 和 Android 平台，给出具体的代码示例。

3.1 iOS 平台

在 iOS 平台上，我们需要修改 FlutterViewController 的行为，因为它负责创建和管理 KeyEmbedderResponder。我们可以通过创建一个 FlutterViewController 的子类，并重写相关的方法来实现。

// CustomFlutterViewController.swift

import Flutter

class CustomFlutterViewController: FlutterViewController {

    private var customResponder: CustomKeyEmbedderResponder?

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建自定义的 KeyEmbedderResponder
        customResponder = CustomKeyEmbedderResponder(flutterViewController: self)
    }

    override var keyCommands: [UIKeyCommand]? {
        // 返回自定义的 keyCommands，允许拦截系统快捷键
        return customResponder?.keyCommands
    }

    override var canBecomeFirstResponder: Bool {
        // 确保 FlutterViewController 可以成为第一响应者
        return true
    }

    override func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        // 将 presses 事件传递给自定义的 KeyEmbedderResponder
        if let responder = customResponder {
            responder.pressesBegan(presses, with: event)
        } else {
            super.pressesBegan(presses, with: event)
        }
    }

    override func pressesEnded(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        // 将 presses 事件传递给自定义的 KeyEmbedderResponder
        if let responder = customResponder {
            responder.pressesEnded(presses, with: event)
        } else {
            super.pressesEnded(presses, with: event)
        }
    }

    override func pressesCancelled(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        // 将 presses 事件传递给自定义的 KeyEmbedderResponder
        if let responder = customResponder {
            responder.pressesCancelled(presses, with: event)
        } else {
            super.pressesCancelled(presses, with: event)
        }
    }

}

class CustomKeyEmbedderResponder: NSObject {

    private weak var flutterViewController: FlutterViewController?

    init(flutterViewController: FlutterViewController) {
        self.flutterViewController = flutterViewController
    }

    lazy var keyCommands: [UIKeyCommand]? = {
        // 定义需要拦截的快捷键
        return [
            UIKeyCommand(input: "a", modifierFlags: .command, action: #selector(handleCommandA)),
            UIKeyCommand(input: "b", modifierFlags: [.command, .shift], action: #selector(handleCommandShiftB))
        ]
    }()

    @objc func handleCommandA() {
        // 处理 Command + A 快捷键
        print("Command + A pressed!")
        // 在这里可以执行自定义的逻辑，例如，调用 Flutter 方法
        flutterViewController?.engine.send(
            "custom-key-event",
            data: ["key": "Command+A"]
        )
    }

    @objc func handleCommandShiftB() {
        // 处理 Command + Shift + B 快捷键
        print("Command + Shift + B pressed!")
        // 在这里可以执行自定义的逻辑
        flutterViewController?.engine.send(
            "custom-key-event",
            data: ["key": "Command+Shift+B"]
        )
    }

    // 可以重写 pressesBegan, pressesEnded, pressesCancelled 方法来处理更底层的按键事件
    func pressesBegan(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        for press in presses {
            if let key = press.key {
                print("Key pressed: (key.charactersIgnoringModifiers)")
                // 在这里可以拦截或修改按键事件
                if key.charactersIgnoringModifiers == "c" {
                    print("Intercepted key 'c'")
                    // 不调用 super，阻止事件传递
                    return
                }
            }
        }
        flutterViewController?.handleKeypresses(presses, with: event)
    }

    func pressesEnded(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        flutterViewController?.handleKeypresses(presses, with: event)
    }

    func pressesCancelled(_ presses: Set<UIPress>, with event: UIPressesEvent?) {
        flutterViewController?.handleKeypresses(presses, with: event)
    }

}

代码解释：

  • CustomFlutterViewController 是 FlutterViewController 的子类，负责创建和管理 CustomKeyEmbedderResponder。
  • CustomKeyEmbedderResponder 拦截了 Command + A 和 Command + Shift + B 快捷键，并在控制台打印信息，同时通过 engine.send 方法将事件发送到 Flutter 端。
  • pressesBegan 方法演示了如何拦截特定的按键事件（例如，拦截 ‘c’ 键），阻止其传递到 Flutter 框架。
  • flutterViewController?.handleKeypresses(presses, with: event) 保证未拦截的事件能够正常传递到 Flutter 侧。

集成到 Flutter 应用：

在 AppDelegate.swift 中，需要使用 CustomFlutterViewController 来启动 Flutter Engine。

// AppDelegate.swift

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {

    let controller : FlutterViewController = CustomFlutterViewController()
    let window = UIWindow(frame: UIScreen.main.bounds)
    window.rootViewController = controller
    self.window = window
    window.makeKeyAndVisible()

    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Flutter 端代码：

在 Flutter 端，我们需要监听来自 Native 端的 custom-key-event 事件。

// main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Keyboard Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _keyEvent = 'No key event received';

  @override
  void initState() {
    super.initState();
    // 监听来自 Native 端的事件
    const channel = MethodChannel('custom-key-event');
    channel.setMethodCallHandler((MethodCall call) async {
      if (call.method == 'custom-key-event') {
        setState(() {
          _keyEvent = call.arguments['key'];
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Keyboard Demo'),
      ),
      body: Center(
        child: Text(
          'Received Key Event: $_keyEvent',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

3.2 Android 平台

在 Android 平台上，我们需要修改 FlutterActivity 的行为，并重写 dispatchKeyEvent 方法。

// MainActivity.kt

package com.example.flutter_app

import android.os.Bundle
import android.view.KeyEvent
import io.flutter.embedding.android.FlutterActivity
import io.flutter.plugin.common.MethodChannel

class MainActivity: FlutterActivity() {

    private val CHANNEL = "custom-key-event"
    private lateinit var channel: MethodChannel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        channel = MethodChannel(flutterEngine?.dartExecutor?.binaryMessenger, CHANNEL)
    }

    override fun dispatchKeyEvent(event: KeyEvent): Boolean {
        // 拦截特定的按键事件
        if (event.keyCode == KeyEvent.KEYCODE_VOLUME_UP) {
            if (event.action == KeyEvent.ACTION_DOWN) {
                // 处理音量加键
                println("Volume Up pressed!")
                // 将事件发送到 Flutter 端
                channel.invokeMethod("custom-key-event", mapOf("key" to "VolumeUp"))
                return true // 阻止事件传递到系统
            }
        }
        // 其他按键事件交给系统处理
        return super.dispatchKeyEvent(event)
    }
}

代码解释：

  • MainActivity 重写了 dispatchKeyEvent 方法，该方法会在每次键盘事件发生时被调用。
  • 我们拦截了 KeyEvent.KEYCODE_VOLUME_UP (音量加键) 事件，并在控制台打印信息，同时通过 MethodChannel 将事件发送到 Flutter 端。
  • return true 阻止了音量加键事件传递到系统，这意味着音量不会被调节。
  • super.dispatchKeyEvent(event) 保证了其他按键事件能够正常传递到系统。

Flutter 端代码：

在 Flutter 端，我们需要监听来自 Native 端的 custom-key-event 事件。

// main.dart (与 iOS 示例相同)

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Keyboard Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _keyEvent = 'No key event received';

  @override
  void initState() {
    super.initState();
    // 监听来自 Native 端的事件
    const channel = MethodChannel('custom-key-event');
    channel.setMethodCallHandler((MethodCall call) async {
      if (call.method == 'custom-key-event') {
        setState(() {
          _keyEvent = call.arguments['key'];
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Keyboard Demo'),
      ),
      body: Center(
        child: Text(
          'Received Key Event: $_keyEvent',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

4. 注意事项

  • 平台差异性： 不同的操作系统和设备，键盘事件的处理方式可能存在差异。需要针对不同的平台进行适配。
  • 性能影响： 过度拦截键盘事件可能会影响应用的性能。应该只拦截必要的事件，并尽量减少事件处理的耗时。
  • 用户体验： 修改键盘行为可能会影响用户体验。应该谨慎设计，确保修改后的键盘行为符合用户的预期。
  • 代码维护： 底层键盘事件处理的代码通常比较复杂，需要仔细测试和维护。

5. 案例分析：自定义全局快捷键

假设我们需要实现一个全局快捷键，当用户按下 Ctrl + Shift + C 时，将当前选中的文本复制到剪贴板。

iOS 平台：

// CustomKeyEmbedderResponder.swift (部分代码)

import UIKit
import Flutter

class CustomKeyEmbedderResponder: NSObject {

    // ... (之前的代码)

    lazy var keyCommands: [UIKeyCommand]? = {
        return [
            UIKeyCommand(input: "c", modifierFlags: [.control, .shift], action: #selector(handleCtrlShiftC))
        ]
    }()

    @objc func handleCtrlShiftC() {
        // 处理 Ctrl + Shift + C 快捷键
        print("Ctrl + Shift + C pressed!")
        // 获取当前选中的文本（需要访问系统剪贴板权限）
        // TODO: Implement getting selected text
        let selectedText = "Placeholder Selected Text"
        UIPasteboard.general.string = selectedText
        // 发送事件到 Flutter 端
        flutterViewController?.engine.send(
            "custom-key-event",
            data: ["key": "Ctrl+Shift+C", "text": selectedText]
        )
    }

    // ... (之前的代码)

}

Android 平台：

由于 Android 系统没有全局快捷键的概念，我们只能在应用内部监听 Ctrl + Shift + C 组合键。

// MainActivity.kt (部分代码)

import android.view.KeyEvent

class MainActivity: FlutterActivity() {

    // ... (之前的代码)

    override fun dispatchKeyEvent(event: KeyEvent): Boolean {
        if (event.isCtrlPressed && event.isShiftPressed && event.keyCode == KeyEvent.KEYCODE_C) {
            if (event.action == KeyEvent.ACTION_DOWN) {
                // 处理 Ctrl + Shift + C 快捷键
                println("Ctrl + Shift + C pressed!")
                // 获取当前选中的文本（需要访问系统剪贴板）
                // TODO: Implement getting selected text
                val selectedText = "Placeholder Selected Text"
                // 将文本复制到剪贴板
                val clipboard = getSystemService(CLIPBOARD_SERVICE) as ClipboardManager
                val clip = ClipData.newPlainText("label", selectedText)
                clipboard.setPrimaryClip(clip)

                // 发送事件到 Flutter 端
                channel.invokeMethod("custom-key-event", mapOf("key" to "Ctrl+Shift+C", "text": selectedText))
                return true
            }
        }
        return super.dispatchKeyEvent(event)
    }

    // ... (之前的代码)

}

Flutter 端代码：

// main.dart (部分代码)

class _MyHomePageState extends State<MyHomePage> {
  String _keyEvent = 'No key event received';
  String _selectedText = '';

  @override
  void initState() {
    super.initState();
    const channel = MethodChannel('custom-key-event');
    channel.setMethodCallHandler((MethodCall call) async {
      if (call.method == 'custom-key-event') {
        setState(() {
          _keyEvent = call.arguments['key'];
          _selectedText = call.arguments['text'] ?? ''; // 获取选中的文本
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Keyboard Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Received Key Event: $_keyEvent',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              'Copied Text: $_selectedText',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

在这个案例中，我们演示了如何拦截 Ctrl + Shift + C 快捷键，并将选中的文本复制到剪贴板。请注意，实际的代码需要根据具体的应用场景进行修改，例如，获取当前选中的文本可能需要访问系统剪贴板 API，这需要申请相应的权限。

6. 总结

通过自定义 KeyEmbedderResponder，我们可以深入控制Flutter应用的键盘输入流，实现各种自定义的键盘行为。在iOS平台上，我们需要重写FlutterViewController的keyCommands 和 pressesBegan等方法。在Android平台上，我们需要重写FlutterActivity的dispatchKeyEvent方法。通过MethodChannel，我们可以将自定义的键盘事件传递到Flutter端进行处理。

7. 底层键盘事件处理的价值与挑战

直接操作底层键盘事件流，提供了更大的灵活性和性能优势，但也带来了平台差异性和复杂性。需要谨慎设计和维护，以确保用户体验和应用的稳定性。

8. 持续探索与实践

KeyEmbedderResponder 是一个强大的工具，可以帮助我们实现各种自定义的键盘行为。希望通过今天的讲解，大家能够对 KeyEmbedderResponder 有更深入的了解，并能够在自己的项目中灵活运用。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注