Flutter WebView 插件常见问题解决方案

项目基础介绍

Flutter WebView 插件是一个社区驱动的开源项目，旨在允许 Flutter 与原生 WebView 进行通信。该项目的主要编程语言是 Dart，用于 Flutter 应用的开发，同时涉及到一些原生平台的代码（如 Java 和 Objective-C）用于实现 WebView 的功能。

新手使用注意事项及解决方案

1. WebView 不集成在 Flutter 的 Widget 树中

问题描述：WebView 是一个原生视图，位于 Flutter 视图之上，因此无法与 Flutter 的 Widget 树集成。这意味着你无法在 WebView 覆盖的区域看到 Snackbars、Dialogs 或其他 Flutter Widgets。

解决方案：

• 理解 WebView 的层级：WebView 是一个独立的原生视图，不与 Flutter 的 Widget 树交互。因此，在设计界面时，应避免在 WebView 覆盖的区域放置需要显示的 Flutter Widgets。
• 使用 initialChild 参数：在 WebView 加载时，可以使用 initialChild 参数显示一个占位符 Widget，直到 WebView 加载完成。

new WebviewScaffold(
  url: "https://www.google.com",
  appBar: new AppBar(
    title: new Text("Widget webview"),
  ),
  initialChild: Center(
    child: CircularProgressIndicator(),
  ),
)

2. iOS 上的 App Transport Security (ATS) 配置问题

问题描述：在 iOS 上，为了使插件正常工作，需要在 Info.plist 文件中添加新的键值对来配置 App Transport Security (ATS)。

解决方案：

• 编辑 Info.plist 文件：在 ios/Runner/Info.plist 文件中添加以下配置：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
  <key>NSAllowsArbitraryLoadsInWebContent</key>
  <true/>
</dict>

• 理解 ATS 配置：NSAllowsArbitraryLoadsInWebContent 适用于 iOS 10 及以上版本，而 NSAllowsArbitraryLoads 适用于 iOS 9。确保你的应用支持的目标版本与配置一致。

3. WebView 加载过程中的隐藏和显示问题

问题描述：在 WebView 加载过程中，默认情况下会显示一个 CircularProgressIndicator，但有时你可能希望显示自定义的加载界面。

解决方案：

• 使用 hidden 和 initialChild 参数：通过设置 hidden 为 true，WebView 会在加载时隐藏，并显示 initialChild 指定的 Widget。

new WebviewScaffold(
  url: "https://www.google.com",
  appBar: new AppBar(
    title: new Text("Widget webview"),
  ),
  hidden: true,
  initialChild: Center(
    child: Text("Loading..."),
  ),
)

• 自定义加载界面：你可以根据需要自定义 initialChild 的内容，例如显示一个自定义的加载动画或提示信息。

总结

Flutter WebView 插件是一个强大的工具，允许 Flutter 应用与原生 WebView 进行交互。新手在使用时需要注意 WebView 的层级关系、iOS 上的 ATS 配置以及加载过程中的界面显示问题。通过正确配置和使用相关参数，可以有效解决这些问题，提升用户体验。