Flutter WebView插件webview_pro_wkwebview的使用

Flutter WebView插件webview_pro_wkwebview的使用

webview_pro_wkwebview 是 flutter_webview_pro 插件的 Apple WKWebView 实现。它允许开发者在 Flutter 应用中嵌入高性能的 WebView。

使用方法

此包是 Flutter 官方推荐的 endorsed federated 插件之一。这意味着你可以直接使用 flutter_webview_pro，而无需额外配置。当你使用 flutter_webview_pro 时，webview_pro_wkwebview 会自动包含在你的应用中。

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 flutter_webview_pro 和 webview_pro_wkwebview：

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:flutter_webview_pro/flutter_webview_pro.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebviewExample(),
    );
  }
}

class WebviewExample extends StatefulWidget {
  [@override](/user/override)
  _WebviewExampleState createState() => _WebviewExampleState();
}

class _WebviewExampleState extends State<WebviewExample> {
  // 控制 WebView 的控制器
  final WebViewController _controller = WebViewController();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化 WebView 控制器
    _controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://www.example.com'))
      ..setBackgroundColor(Colors.transparent);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView 示例'),
      ),
      body: WebviewPro(
        controller: _controller,
        debuggingEnabled: true, // 启用调试模式
        scrollBar: true, // 显示滚动条
      ),
    );
  }
}

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

1 回复

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


webview_pro_wkwebview 是一个用于 Flutter 的 WebView 插件，它基于 iOS 的 WKWebView 和 Android 的 WebView。这个插件允许你在 Flutter 应用中嵌入 WebView，并提供了丰富的功能，如 JavaScript 支持、加载本地 HTML、监听页面加载事件等。

安装

首先，你需要在 pubspec.yaml 文件中添加 webview_pro_wkwebview 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_pro_wkwebview: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示了如何在 Flutter 应用中使用 webview_pro_wkwebview 插件来加载一个网页：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WebView Example'),
        ),
        body: WebView(
          initialUrl: 'https://www.example.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),
    );
  }
}

主要功能

  1. 加载 URL: 你可以通过 initialUrl 参数指定要加载的网页 URL。

  2. JavaScript 支持: 通过 javascriptMode 参数，你可以控制是否启用 JavaScript。可以设置为 JavascriptMode.unrestricted（启用）或 JavascriptMode.disabled（禁用）。

  3. 加载本地 HTML: 你可以使用 initialFile 参数加载本地 HTML 文件。例如：

    WebView(
  initialFile: 'assets/local.html',
)

  4. 监听页面加载事件: 你可以使用 onPageFinished 回调来监听页面加载完成的事件：

    WebView(
  initialUrl: 'https://www.example.com',
  onPageFinished: (String url) {
    print('Page finished loading: $url');
  },
)

  5. 控制 WebView: 你可以通过 WebViewController 来控制 WebView 的行为，例如加载新的 URL、执行 JavaScript 代码等。

    WebView(
  initialUrl: 'https://www.example.com',
  onWebViewCreated: (WebViewController controller) {
    _controller = controller;
  },
)

// 使用 _controller 控制 WebView
void _loadNewUrl() {
  _controller.loadUrl('https://www.newurl.com');
}

  6. 处理导航: 你可以使用 navigationDelegate 来处理导航请求，并根据需要决定是否允许导航。

    WebView(
  initialUrl: 'https://www.example.com',
  navigationDelegate: (NavigationRequest request) {
    if (request.url.contains('blocked')) {
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
)

注意事项

  • iOS 配置: 在 iOS 上使用 WKWebView，你需要在 Info.plist 文件中添加以下配置，以允许加载非安全的 HTTP 请求：

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

  • Android 配置: 在 Android 上，你可能需要在 AndroidManifest.xml 文件中添加网络权限：

    <uses-permission android:name="android.permission.INTERNET"/>
回到顶部