Flutter内嵌网页视图与页面调用插件flutter_inappwebview_pagecall的使用

在Flutter开发中，内嵌网页视图是一个非常常见的需求。flutter_inappwebview 插件提供了强大的功能来实现这一需求，并且 flutter_inappwebview_pagecall 插件进一步增强了与网页之间的交互能力。本文将通过一个完整的示例代码展示如何在Flutter应用中使用这两个插件。

示例代码说明

我们将构建一个简单的Flutter应用，其中包含一个内嵌的网页视图，并演示如何通过插件与网页进行交互。

依赖项

首先，在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^6.0.0
  flutter_inappwebview_pagecall: ^1.0.0

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

主代码结构

我们将在 lib/main.dart 中编写主逻辑。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_inappwebview_pagecall/flutter_inappwebview_pagecall.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('内嵌网页视图'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(
          url: Uri.parse("https://example.com"),
        ),
        onWebViewCreated: (controller) {
          _webViewController = controller;
        },
        onLoadStop: (controller, url) {
          print("页面加载完成: $url");
        },
        onPageFinished: (controller, url) {
          print("页面渲染完成: $url");
        },
      ),
    );
  }
}

页面调用插件的使用

接下来，我们将展示如何使用 flutter_inappwebview_pagecall 插件来实现Flutter与网页之间的通信。

初始化插件

在 _InAppWebViewPageState 类中初始化插件：

late PageCallController _pageCallController;

[@override](/user/override)
void initState() {
  super.initState();
  _pageCallController = PageCallController();
}

注册事件监听器

在 onWebViewCreated 方法中注册事件监听器：

onWebViewCreated: (controller) {
  _webViewController = controller;
  _pageCallController.registerEventListener(_webViewController);
},

发送消息到网页

在需要发送消息的地方调用以下方法：

_pageCallController.sendMessageToWebview(
  _webViewController,
  message: '{"type": "customEvent", "data": "Hello from Flutter"}',
);

接收网页发送的消息

在网页端通过 JavaScript 调用 Pagecall 对象发送消息后，可以在 Flutter 端接收并处理：

_pageCallController.addMessageListener((message) {
  print("收到网页消息: $message");
});

完整示例代码

以下是完整的示例代码：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:flutter_inappwebview_pagecall/flutter_inappwebview_pagecall.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

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

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

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  late InAppWebViewController _webViewController;
  late PageCallController _pageCallController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _pageCallController = PageCallController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('内嵌网页视图'),
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(
          url: Uri.parse("https://example.com"),
        ),
        onWebViewCreated: (controller) {
          _webViewController = controller;
          _pageCallController.registerEventListener(_webViewController);
        },
        onLoadStop: (controller, url) {
          print("页面加载完成: $url");
        },
        onPageFinished: (controller, url) {
          print("页面渲染完成: $url");
        },
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _pageCallController.unregisterEventListener(_webViewController);
    super.dispose();
  }
}