揭秘 Flutter 中 Webview 键盘弹出的奥秘

2023-11-28 17:12:38

Webview 中键盘弹出的幕后机制

在 Flutter 应用程序中集成 Webview 时，您需要了解键盘如何与 Webview 交互。当 Webview 获得焦点时，Flutter 会自动将键盘弹出。然而，如果 Webview 内的特定元素（如输入框）获取焦点，则焦点将从 Webview 转移到该元素。此时，Flutter 不再管理键盘，而是由 Webview 负责处理键盘交互。

这可能会导致一系列问题，例如：

键盘弹出和隐藏的时序不当
键盘遮挡 Webview 内容
键盘事件无法正确传递到 Flutter

解决 Flutter 中 Webview 键盘弹出问题

要解决这些问题，需要采取两方面的措施：

1. 管理焦点

通过明确管理 Webview 和其子元素之间的焦点，您可以确保键盘行为的一致性。以下是如何操作：

使用 PlatformViewSurfaceUtils 插件： 这个插件提供了 setOnWebviewInputConnection 方法，允许您在 Flutter 和 Webview 之间传递焦点事件。使用此方法，您可以控制何时让 Flutter 处理键盘事件，何时让 Webview 处理。
使用 FocusNode： Flutter 的 FocusNode 组件可用于手动管理焦点。您可以将 FocusNode 附加到 Webview 和其子元素，并在需要时使用 requestFocus 方法将焦点转移到所需的元素。

2. 处理键盘事件

除了管理焦点之外，您还需要处理从 Webview 收到的键盘事件。为此，可以使用 TextInputClient 类，该类提供了一个接口，用于接收和响应键盘事件。您可以通过 TextInput.attach 方法将 TextInputClient 附加到 Webview。

在 TextInputClient 中，您可以实现 updateEditingState 和 performAction 方法来处理键盘输入和操作。例如，在 updateEditingState 方法中，您可以更新 Webview 中文本输入字段的文本和光标位置。

代码示例

以下是使用上述技术解决 Flutter 中 Webview 键盘弹出问题的代码示例：

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:platform_view_surface_utils/platform_view_surface_utils.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  FocusNode _focusNode = FocusNode();
  late TextInputClient _textInputClient;
  late WebViewController _webViewController;

  @override
  void initState() {
    super.initState();

    // 设置 PlatformViewSurfaceUtils 插件
    PlatformViewSurfaceUtils.initSurfaceUtils();

    // 创建 TextInputClient
    _textInputClient = TextInputClient();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // Webview
          Expanded(
            child: WebView(
              onWebViewCreated: (WebViewController controller) async {
                _webViewController = controller;

                // 附加 TextInputClient
                controller.textInput.attach(_textInputClient);

                // 设置焦点管理
                if (!kIsWeb) {
                  PlatformViewSurfaceUtils.setOnWebviewInputConnection(controller.webSurface, _handleWebviewInputConnection);
                }
              },
              gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[
                Factory<OneSequenceGestureRecognizer>(() => EagerGestureRecognizer()),
              ].toSet(),
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),

          // 焦点控制按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => _focusNode.requestFocus(),
                child: Text('Focus Webview'),
              ),
              ElevatedButton(
                onPressed: () => _webViewController.requestFocus(),
                child: Text('Focus Input Field'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Future<void> _handleWebviewInputConnection(InputConnection connection) async {
    if (connection == null) {
      _focusNode.requestFocus();
    } else {
      _webViewController.requestFocus();
    }
  }

  @override
  void dispose() {
    _focusNode.dispose();
    _textInputClient.dispose();

    super.dispose();
  }
}