Flutter内嵌网页视图插件flutter_inappwebview_designhubz的使用

Flutter内嵌网页视图插件flutter_inappwebview_designhubz的使用

简介

flutter_inappwebview_designhubz 是一个强大的 Flutter 插件，用于在应用中实现内嵌网页视图。它可以轻松地在应用中添加内联 WebView、无头 WebView，并支持打开原生浏览器窗口。该插件兼容多种平台（如 Android、iOS 和 Web），并且功能丰富，包括 JavaScript 注入、事件监听等。

新版本 6.x.x 已发布！

从版本 5.x.x 迁移到最新版本非常简单！请参考在线的 迁移指南。

文档与资源

以下是一些有用的资源和文档：

使用示例

以下是一个完整的示例，展示如何在 Flutter 应用中使用 flutter_inappwebview_designhubz 插件。

示例代码

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview_designhubz/flutter_inappwebview_designhubz.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('InAppWebView 示例')),
        body: InAppWebViewPage(),
      ),
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  late InAppWebViewController webViewController;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: InAppWebView(
            initialUrlRequest: URLRequest(
              url: Uri.parse("https://example.com"),
            ),
            onWebViewCreated: (controller) {
              webViewController = controller;
            },
            onLoadStop: (controller, url) {
              print("加载完成: $url");
            },
          ),
        ),
        ElevatedButton(
          onPressed: () async {
            String? result = await webViewController.evaluateJavascript(
                source: "document.title");
            print("网页标题: $result");
          },
          child: Text("获取网页标题"),
        ),
      ],
    );
  }
}

依赖安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_inappwebview_designhubz: ^最新版本号

然后运行 flutter pub get。

Web 平台支持

为了在 Web 平台上正常工作，请将以下代码添加到 web/index.html 文件的 <head> 部分：

<script type="application/javascript" src="/assets/packages/flutter_inappwebview_designhubz_web/assets/web/web_support.js" defer></script>

更多关于Flutter内嵌网页视图插件flutter_inappwebview_designhubz的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter内嵌网页视图插件flutter_inappwebview_designhubz的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_inappwebview_designhubz 是一个用于在 Flutter 应用中嵌入网页视图的插件。它基于 flutter_inappwebview，但由 DesignHubz 维护和更新。这个插件提供了丰富的功能，允许你在 Flutter 应用中加载和显示网页内容，并且可以与网页进行交互。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview_designhubz: ^6.0.0 # 请根据最新版本号进行替换

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

基本用法

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: InAppWebViewExample(),
    );
  }
}

class InAppWebViewExample extends StatefulWidget {
  @override
  _InAppWebViewExampleState createState() => _InAppWebViewExampleState();
}

class _InAppWebViewExampleState extends State<InAppWebViewExample> {
  late InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('InAppWebView Example'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
        onWebViewCreated: (InAppWebViewController controller) {
          _webViewController = controller;
        },
        onLoadStart: (InAppWebViewController controller, Uri? url) {
          print("Page started loading: $url");
        },
        onLoadStop: (InAppWebViewController controller, Uri? url) {
          print("Page finished loading: $url");
        },
      ),
    );
  }
}

主要功能

  1. 加载网页：通过 initialUrlRequest 属性指定初始加载的 URL。
  2. 控制网页视图：通过 InAppWebViewController 可以控制网页的加载、刷新、前进、后退等操作。
  3. 监听网页事件：可以通过 onLoadStart、onLoadStop 等回调监听网页的加载状态。
  4. JavaScript 交互：可以通过 evaluateJavascript 方法在网页中执行 JavaScript 代码，也可以通过 addJavaScriptHandler 方法在 Flutter 中处理来自网页的 JavaScript 调用。

示例：JavaScript 交互

以下是一个简单的示例，展示如何在 Flutter 和网页之间进行 JavaScript 交互：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
  onWebViewCreated: (InAppWebViewController controller) {
    _webViewController = controller;

    // 添加 JavaScript 处理器
    controller.addJavaScriptHandler(
      handlerName: 'flutterHandler',
      callback: (args) {
        print("Received message from JavaScript: $args");
      },
    );
  },
  onLoadStop: (InAppWebViewController controller, Uri? url) async {
    // 在网页加载完成后执行 JavaScript 代码
    await controller.evaluateJavascript(source: "window.flutterHandler.postMessage('Hello from Flutter!');");
  },
);

其他功能

  • 自定义 User Agent：可以通过 initialOptions 属性设置自定义的 User Agent。
  • Cookie 管理：可以通过 CookieManager 类来管理网页的 Cookie。
  • 文件上传：支持网页中的文件上传功能。
  • 自定义错误页面：可以自定义网页加载错误时显示的页面。

注意事项

  • iOS 配置：在 iOS 上使用 flutter_inappwebview_designhubz 时，需要在 Info.plist 中添加以下配置以允许加载网页：

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

  • Android 配置：在 Android 上，确保你的 AndroidManifest.xml 文件中已经启用了网络权限：

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