Flutter iOS WebView插件flutter_webview_ios的使用

Flutter iOS WebView插件flutter_inappwebview_ios的使用

flutter_inappwebview_ios 是 flutter_webview 在 Apple iOS 平台上使用的 WKWebView 实现。

使用方法

该插件已经被官方推荐（endorsed federated plugin），因此你可以直接使用 flutter_webview。当你这样做的时候，该插件会自动包含在你的项目中，所以你无需在 pubspec.yaml 文件中添加它。

然而，如果你导入了此包以直接使用其 API，则应像往常一样将其添加到 pubspec.yaml 文件中。

示例代码

以下是一个简单的示例代码，展示如何在 Flutter 应用程序中使用 flutter_inappwebview_ios 插件。

// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('InAppWebView 示例'),
        ),
        body: InAppWebView(
          initialUrlRequest: URLRequest(url: Uri.parse("https://www.example.com")),
        ),
      ),
    );
  }
}

更多关于Flutter iOS WebView插件flutter_webview_ios的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter iOS WebView插件flutter_webview_ios的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_webview_ios 是 Flutter 中用于在 iOS 平台上嵌入 WebView 的插件。它基于 WKWebView，提供了丰富的功能和自定义选项。以下是如何使用 flutter_webview_ios 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_webview_ios 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_ios: ^2.0.0  # 请使用最新版本

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

2. 导入插件

在需要使用的 Dart 文件中导入 flutter_webview_ios 插件：

import 'package:flutter_webview_ios/flutter_webview_ios.dart';

3. 创建 WebView

使用 WebView 小部件来嵌入 WebView。以下是一个简单的示例：

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

class WebViewExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView iOS'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
        onWebResourceError: (WebResourceError error) {
          print('Error: ${error.description}');
        },
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: WebViewExample(),
));

4. 配置 iOS 项目

在 ios/Runner/Info.plist 文件中添加以下配置，以允许加载网络内容和处理 JavaScript：

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

5. 运行应用

现在，你可以运行应用并查看 WebView 加载指定 URL 的内容。

flutter run

6. 自定义 WebView

flutter_webview_ios 提供了许多自定义选项，例如：

  • initialUrl: 初始加载的 URL。
  • javascriptMode: 设置 JavaScript 模式，可以是 JavascriptMode.unrestricted 或 JavascriptMode.disabled。
  • onPageStarted: 页面开始加载时的回调。
  • onPageFinished: 页面加载完成时的回调。
  • onWebResourceError: 加载资源出错时的回调。
  • gestureNavigationEnabled: 是否启用手势导航。
  • userAgent: 设置自定义的 User-Agent。

7. 处理导航

你还可以通过 NavigationDelegate 来处理导航请求，例如拦截某些 URL 或重定向：

WebView(
  initialUrl: 'https://flutter.dev',
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith('https://flutter.dev')) {
      return NavigationDecision.navigate;
    }
    return NavigationDecision.prevent;
  },
)

8. 与 JavaScript 交互

你可以通过 WebViewController 来与 WebView 中的 JavaScript 进行交互：

WebView(
  initialUrl: 'https://flutter.dev',
  onWebViewCreated: (WebViewController controller) {
    controller.evaluateJavascript("alert('Hello from Flutter!')");
  },
)

9. 清理资源

在不需要 WebView 时，确保释放资源：

[@override](/user/override)
void dispose() {
  _controller?.dispose();
  super.dispose();
}
回到顶部