flutter webview 自动填充功能如何在ios上实现

在Flutter的WebView中，iOS平台如何实现自动填充功能？我在Android上可以通过autofillHints实现表单自动填充，但在iOS上似乎不生效。是否需要在iOS端单独配置？还是目前Flutter的WebView插件不支持这个特性？如果能实现，能否提供具体的代码示例或解决方案？

2 回复

在iOS上实现WebView自动填充，需使用autofillHints属性。例如：

WebView(
  initialUrl: '...',
  onWebViewCreated: (controller) {
    controller.setAutofillHints(['username', 'password']);
  },
)

确保iOS项目开启Autofill功能，并在Info.plist中配置相关权限。

更多关于flutter webview 自动填充功能如何在ios上实现的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter WebView 中实现 iOS 自动填充功能，主要依赖于 webview_flutter 插件，并配置 WebView 以支持密码自动填充。以下是实现步骤：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  webview_flutter: ^4.4.2

2. 配置 iOS 项目

  • 在 ios/Runner/Info.plist 中添加以下键值，启用自动填充：
<key>com.apple.developer.authentication-services.autofill-credential-provider</key>
<true/>

3. 在 Flutter 中实现 WebView

使用 WebViewController 并设置 allowsInlinePredictions 和 isTextInteractionEnabled 为 true：

import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://example.com'))
      // 启用自动填充相关设置
      ..setConfiguration(WebViewConfiguration(
        allowsInlineMediaPlayback: true,
        allowsPictureInPictureMediaPlayback: true,
      ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebViewWidget(
          controller: controller,
        ),
      ),
    );
  }
}

4. 关键设置说明

  • allowsInlinePredictions：允许内联预测，对自动填充有辅助作用（部分版本插件默认支持）。
  • isTextInteractionEnabled：启用文本交互，确保输入框可正常触发键盘和自动填充建议。

注意事项

  1. iOS 系统要求：确保设备系统为 iOS 12 或更高版本，且已设置 iCloud 钥匙串或保存过密码。
  2. 网页兼容性：自动填充依赖网页输入框的 autocomplete 属性（如 username、current-password）。
  3. 测试：在真实 iOS 设备上测试，模拟器可能无法完全模拟自动填充行为。

完整示例代码

参考以上 WebViewExample 类，确保控制器配置正确。如果遇到问题，检查 iOS 项目配置及网页表单结构。

通过以上步骤，Flutter WebView 在 iOS 上即可支持密码自动填充功能。

回到顶部